Uploaded December 2024 | Updated September 2026, 3 weeks ago
Support me in my journey to giving back to the industry all my knowledge and helping the world with what I do. Spreading knowledge to those who cannot afford an education, and helping those who want to better themselves.
Avalonia UI
avaloniaui.net
Support what I do and pay for me to survive
angelsix.com/donate
Live Chat at Discord
discordapp.com/invite/eHr5BMk
Support me in my journey to giving back to the industry all my knowledge and helping the world with what I do. Spreading knowledge to those who cannot afford an education, and helping those who want to better themselves.
Avalonia UI
avaloniaui.net
Support what I do and pay for me to survive
angelsix.com/donate
Live Chat at Discord
discordapp.com/invite/eHr5BMk










![Avalonia UI Deep Dive: Button Spinner XAML Anatomy
Dissecting the Avalonia Button Spinner control from the inside out — no AI shortcuts, just real hand-coded understanding. Before we style it, we need to know exactly how its built. In this episode we crack open the full XAML control theme and examine every piece.
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 Button Spinner control theme is structured in XAML
• What the Margin Multiplier Converter does and why its needed
• How Stream Geometry draws the up/down arrow icons as Path Icons
• How Repeat Buttons are embedded and their default template overridden
• The role of Data Validation Errors in the control template
• How pseudo-classes (:left, :error) drive state-based layout changes
• The full DockPanel, Content Presenter and Stack Panel layout explained
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
⏱ TIMESTAMPS
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
[0:00] – Introduction & series recap
[0:46] – Upgrade to Avalonia 12 & prototype UI philosophy
[1:48] – Controls overview & choosing the Button Spinner
[2:48] – Avalonia control structure: resource dictionary & design preview
[4:27] – Button Spinner control theme & Repeat Button target types
[5:35] – Margin Multiplier Converter & border thickness
[8:47] – Stream Geometry for up/down arrow icons
[10:57] – Repeat Button template & overriding default visuals
[13:29] – Main Button Spinner control template structure
[14:17] – Pseudo-class selectors: :left layout & :error styling
[15:20] – Data Validation Errors wrapper explained
[16:52] – Core layout: Border, DockPanel, Content Presenter & Repeat Buttons
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
🔗 LINKS
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
▶ Part 1 – Setup: https://www.youtube.com/watch?v=rUKlQnjU0tc
▶ Part 2 – Buttons: https://www.youtube.com/watch?v=oKjk6pyyARI
💾 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 Deep Dive: Button Spinner XAML Anatomy](https://i.ytimg.com/vi/WMaTbXkvm9g/mqdefault.jpg)