Uploaded April 2026 | Updated September 2026, 1 week ago
Building a fully custom Avalonia UI theme from scratch — no AI shortcuts, just real hand-coded development. This is the first video in a complete series on creating professional Avalonia UI themes by hand.
In this video we set up the entire development environment ready to build a custom Avalonia theme from the ground up. Whether you're coming from WPF, WinUI 3, or starting fresh with Avalonia UI, this is where it all begins.
What we cover:
- Setting up the project environment for Avalonia UI theming
- Understanding the structure needed for custom theme development
- What we'll be building across the full series
No AI-generated code. No shortcuts. Just real senior-level engineering, given away for free.
📌 Chapters:0:00 - Introduction
0:53 - Project Structure Overview
1:36 - Creating the Demo App
2:33 - Creating the Theme Project
3:51 - Linking the Theme to the Demo App
4:13 - Getting the Fluent Theme Source
6:11 - Fixing the Version Mismatch
7:01 - Renaming Fluent to Prototype
9:13 - Troubleshooting Build Errors
12:44 - Final Project Rename
13:24 - Theme Compiles — What's Next
🔗 Website: angelsix.com
Building a fully custom Avalonia UI theme from scratch — no AI shortcuts, just real hand-coded development. This is the first video in a complete series on creating professional Avalonia UI themes by hand.
In this video we set up the entire development environment ready to build a custom Avalonia theme from the ground up. Whether you're coming from WPF, WinUI 3, or starting fresh with Avalonia UI, this is where it all begins.
What we cover:
- Setting up the project environment for Avalonia UI theming
- Understanding the structure needed for custom theme development
- What we'll be building across the full series
No AI-generated code. No shortcuts. Just real senior-level engineering, given away for free.
📌 Chapters:0:00 - Introduction
0:53 - Project Structure Overview
1:36 - Creating the Demo App
2:33 - Creating the Theme Project
3:51 - Linking the Theme to the Demo App
4:13 - Getting the Fluent Theme Source
6:11 - Fixing the Version Mismatch
7:01 - Renaming Fluent to Prototype
9:13 - Troubleshooting Build Errors
12:44 - Final Project Rename
13:24 - Theme Compiles — What's Next
🔗 Website: angelsix.com






![Avalonia UI Theming - Checkbox Control Deep Dive | Hand Coded
Cracking open the Avalonia Checkbox control — examining how its built, how its states work, and how to properly structure the control template without locking users out of overriding styles. We also design a custom tick glyph from SVG data and hit an interesting XAML markup extension problem along the way.
This is part of a complete series on building a fully custom Avalonia UI theme from scratch, hand-coded with zero AI assistance.
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
📌 WHAT YOULL LEARN
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
• How the Checkbox control theme and template are structured
• The three checkbox states: Checked, Unchecked, and Indeterminate (bool?)
• Why DynamicResource inside ControlTemplate causes style override problems
• How to design a custom tick glyph using SVG path data and StreamGeometry
• The Grid layout inside the Checkbox — checkbox box column + content column
• How ViewBox stretches the tick glyph uniformly inside the border
• Attempting a custom UniformThicknessExtension markup extension and its XAML limitations
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
⏱ TIMESTAMPS
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
[0:00] – Introduction & series goal: building a proper Avalonia theme
[0:36] – The theming system plan & cloning the Fluent theme
[1:30] – Reviewing other controls & what were skipping for now
[2:55] – Checkbox in the design previewer & interactive states
[4:10] – Checkbox content, IsChecked, IsThreeState & Indeterminate state
[6:14] – CheckboxMinHeight, StreamGeometry & designing a custom tick glyph
[12:38] – ControlTheme & ControlTemplate structure — DynamicResource problems
[16:01] – Refactoring the template: removing template lockouts
[22:50] – BorderThickness, StrokeThickness & attempting a UniformThicknessExtension
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
🔗 LINKS
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
▶ Part 1 – Setup: https://www.youtube.com/watch?v=rUKlQnjU0tc
▶ Part 2 – Buttons: https://www.youtube.com/watch?v=oKjk6pyyARI
▶ Part 3 – Button Spinner Anatomy: https://www.youtube.com/watch?v=WMaTbXkvm9g
▶ Part 4 – Designing a Theme System: https://www.youtube.com/watch?v=I5halHoNfH0
📺 Full Series Playlist: https://www.youtube.com/playlist?list=PLrW43fNmjaQVE2vDBeWD8QYIm06w6bKyO
💾 Source Code: https://github.com/angelsix/youtube/tree/develop/AvaloniaThemeLab
🌐 AngelSix: https://www.angelsix.com
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
📺 SERIES: Avalonia UI Theming – Hand Coded From Scratch
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
#avalonia #avaloniaui #xaml #csharp #dotnet #uiux #desktopapp #softwaretutorial #coding Avalonia UI Theming - Checkbox Control Deep Dive | Hand Coded](https://i.ytimg.com/vi/uIimnwjITT0/mqdefault.jpg)

![Building a Custom Checkbox: Avalonia UI Deep Dive
Finishing off the Avalonia Checkbox — cleaning up duplication, locking in all visual states, and pushing further towards a unified theme system. No AI shortcuts, just real hand-coded engineering. We fix scaling, foreground pass-through, hover states, indeterminate styling, and more.
This is part of a complete series on building a fully custom Avalonia UI theme from scratch, hand-coded with zero AI assistance.
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
📌 WHAT YOULL LEARN
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
• How to centralise corner radius and stroke thickness as shared static resources
• Correctly passing Foreground through TemplateBinding into child elements
• Eliminating code duplication across checkbox states using the theme colour system
• Applying numbered ThemeColor gradients for hover, pressed and disabled states
• How ViewBox and RelativeSource binding fixes checkbox scaling when size changes
• Styling all three checkbox states: Unchecked, Checked, and Indeterminate
• Replacing the indeterminate unknown panel with a clean dedicated rectangle
• Why style priority order matters and how to control which properties win
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
⏱ TIMESTAMPS
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
[0:00] – Introduction & recap — theme value sharing limitations
[0:36] – Resuming checkbox styling & reviewing the stream geometry tick
[2:35] – Main theme structure & TemplateBinding Foreground pass-through
[2:57] – Introducing default corner radius & stroke thickness resources
[6:57] – Code duplication problem & centralising theme colours
[9:08] – Applying numbered ThemeColor gradients for visual states
[13:31] – ViewBox revisited — Grid & Panel layout for tick scaling
[16:16] – Hover (pointer over) state styling
[21:10] – Checked state styling & style priority order
[26:16] – Indeterminate state — replacing the unknown panel with a rectangle
[40:40] – Fixing checkbox scaling with ViewBox & RelativeSource height-to-width binding
[45:03] – Wrap up & next steps
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
🔗 LINKS
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
▶ Part 1 – Setup: https://www.youtube.com/watch?v=rUKlQnjU0tc
▶ Part 2 – Buttons: https://www.youtube.com/watch?v=oKjk6pyyARI
▶ Part 3 – Button Spinner Anatomy: https://www.youtube.com/watch?v=WMaTbXkvm9g
▶ Part 4 – Designing a Theme System: https://www.youtube.com/watch?v=I5halHoNfH0
▶ Part 5 – Checkbox Anatomy: https://www.youtube.com/watch?v=uIimnwjITT0
📺 Full Series Playlist: https://www.youtube.com/playlist?list=PLrW43fNmjaQVE2vDBeWD8QYIm06w6bKyO
💾 Source Code: https://github.com/angelsix/youtube/tree/develop/AvaloniaThemeLab
🌐 AngelSix: https://www.angelsix.com
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
📺 SERIES: Avalonia UI Theming – Hand Coded From Scratch
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
#avalonia #avaloniaui #xaml #csharp #dotnet #uiux #desktopapp #softwaretutorial #coding Building a Custom Checkbox: Avalonia UI Deep Dive](https://i.ytimg.com/vi/uv1bNrfCjtY/mqdefault.jpg)

