Uploaded May 2026 | Updated September 2026, 1 week ago
Cracking open the Avalonia Checkbox control — examining how it's 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 YOU'LL 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 we're 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: youtube.com/watch?v=rUKlQnjU0tc
▶ Part 2 – Buttons: youtube.com/watch?v=oKjk6pyyARI
▶ Part 3 – Button Spinner Anatomy: youtube.com/watch?v=WMaTbXkvm9g
▶ Part 4 – Designing a Theme System: youtube.com/watch?v=I5halHoNfH0
📺 Full Series Playlist: youtube.com/playlist?list=PLrW43fNmjaQVE2vDBeWD8QYIm06w6bKyO
💾 Source Code: github.com/angelsix/youtube/tree/develop/AvaloniaThemeLab
🌐 AngelSix: angelsix.com
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
📺 SERIES: Avalonia UI Theming – Hand Coded From Scratch
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
#avalonia #avaloniaui #xaml #csharp #dotnet #uiux #desktopapp #softwaretutorial #coding
Cracking open the Avalonia Checkbox control — examining how it's 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 YOU'LL 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 we're 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: youtube.com/watch?v=rUKlQnjU0tc
▶ Part 2 – Buttons: youtube.com/watch?v=oKjk6pyyARI
▶ Part 3 – Button Spinner Anatomy: youtube.com/watch?v=WMaTbXkvm9g
▶ Part 4 – Designing a Theme System: youtube.com/watch?v=I5halHoNfH0
📺 Full Series Playlist: youtube.com/playlist?list=PLrW43fNmjaQVE2vDBeWD8QYIm06w6bKyO
💾 Source Code: github.com/angelsix/youtube/tree/develop/AvaloniaThemeLab
🌐 AngelSix: angelsix.com
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
📺 SERIES: Avalonia UI Theming – Hand Coded From Scratch
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
#avalonia #avaloniaui #xaml #csharp #dotnet #uiux #desktopapp #softwaretutorial #coding
