Uploaded June 2026 | Updated September 2026, 3 weeks ago
Hundreds of random hardcoded values scattered across every control in the theme. Margins,
thicknesses, font sizes — all over the place, inconsistent, unmaintainable. In this episode
we do the deduplication pass: collapsing everything down to a minimal, precise set of design
tokens that defines the entire theme system.
AI does the grunt work again — but the interesting part is what happens when it goes off-brief.
Real-time corrections, naming convention debates, a new Scaled markup extension that solves
proportional scaling for edge-case values, and a moment where the AI adds things I explicitly
told it not to. This is what collaborative AI development actually looks like in practice.
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
📌 WHAT YOU'LL LEARN
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
• How to use AI to find and replace hundreds of scattered hardcoded values across a theme
• Adding new token properties to the engine: font family, font sizes, control height, icon
• What the Adorner Layer is and how to correctly map its thickness values to tokens
• How to establish naming conventions for thickness and spacing tokens — with real examples
• When NOT to add a value to the token set — the token bloat problem and how to avoid it
• Styling AutoCompleteBox: placeholder text, border brushes, padding, drop-down height
• The Scaled markup extension — what it is, why it's needed, and how to implement it right
• How to handle negative margins using Edges + a negative multiplier
• How to correct AI when it goes off-brief — real examples of steering it back in real-time
• The ultimate goal: swap any compliant theme without a single line of application code
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
⏱ TIMESTAMPS
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
[0:00] – Introduction — new theme engine recap, goal of the deduplication pass
[0:25] – Using AI to find and replace legacy dynamic resources
[0:48] – New token properties added: font family, font sizes, control height, icon
[1:04] – Button control reviewed — already clean, moving on
[1:31] – What the Adorner Layer is and why it draws on its own visual layer
[3:08] – Prompting AI to merge AdornerLayer thickness values into the theme engine
[3:56] – Moving to AutoCompleteBox — placeholder, borders, padding
[8:49] – AI's first response on AdornerLayer thickness mapping
[11:08] – Decision: add dedicated thickness tokens to the engine
[11:59] – AI identifies further inline resources across other controls
[13:41] – Asking AI for thickness token naming conventions
[13:52] – AI's full token proposal reviewed and critiqued
[14:26] – The token bloat problem — when NOT to add a new token
[18:11] – Policy decision: how to snap stray values to existing tokens
[20:08] – AutoCompleteBox: border brush and accent brush tokens
[21:45] – MaxDropDownHeight and margin replacement
[23:27] – ⚠️ AI adds unwanted spacing values — correcting it in real-time
[24:17] – Introducing the Scaled markup extension for proportional custom values
[26:09] – Problem: Scaled extension hardcoded to ThemeContext — feedback given to AI
[28:17] – Further AI instructions on the Scaled extension + remaining issues
[32:59] – Bug fix discovered in Avalonia source code for AutoCompleteBox
[33:42] – Negative margins fixed with Edges + negative multiplier
[34:07] – Git diff review: AdornerLayer and AutoCompleteBox fully cleaned up
[36:45] – The ultimate goal: seamless theme swapping without any application code changes
[38:00] – Wrap up & next steps
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
🔗 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
▶ Part 5 – Checkbox Anatomy: youtube.com/watch?v=uIimnwjITT0
▶ Part 6 – Checkbox Styling: youtube.com/watch?v=uv1bNrfCjtY
▶ Part 7 – Theme Engine From Scratch: youtube.com/watch?v=NXz8hwITg5U
▶ Part 8 – Design Token System: youtube.com/watch?v=QMVdxRZqaU8
▶ Part 9 – Stripping Legacy Code: youtube.com/watch?v=5-p_fnOi0As
📺 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 #aiagent #aitools #softwaretutorial #coding
Hundreds of random hardcoded values scattered across every control in the theme. Margins,
thicknesses, font sizes — all over the place, inconsistent, unmaintainable. In this episode
we do the deduplication pass: collapsing everything down to a minimal, precise set of design
tokens that defines the entire theme system.
AI does the grunt work again — but the interesting part is what happens when it goes off-brief.
Real-time corrections, naming convention debates, a new Scaled markup extension that solves
proportional scaling for edge-case values, and a moment where the AI adds things I explicitly
told it not to. This is what collaborative AI development actually looks like in practice.
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
📌 WHAT YOU'LL LEARN
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
• How to use AI to find and replace hundreds of scattered hardcoded values across a theme
• Adding new token properties to the engine: font family, font sizes, control height, icon
• What the Adorner Layer is and how to correctly map its thickness values to tokens
• How to establish naming conventions for thickness and spacing tokens — with real examples
• When NOT to add a value to the token set — the token bloat problem and how to avoid it
• Styling AutoCompleteBox: placeholder text, border brushes, padding, drop-down height
• The Scaled markup extension — what it is, why it's needed, and how to implement it right
• How to handle negative margins using Edges + a negative multiplier
• How to correct AI when it goes off-brief — real examples of steering it back in real-time
• The ultimate goal: swap any compliant theme without a single line of application code
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
⏱ TIMESTAMPS
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
[0:00] – Introduction — new theme engine recap, goal of the deduplication pass
[0:25] – Using AI to find and replace legacy dynamic resources
[0:48] – New token properties added: font family, font sizes, control height, icon
[1:04] – Button control reviewed — already clean, moving on
[1:31] – What the Adorner Layer is and why it draws on its own visual layer
[3:08] – Prompting AI to merge AdornerLayer thickness values into the theme engine
[3:56] – Moving to AutoCompleteBox — placeholder, borders, padding
[8:49] – AI's first response on AdornerLayer thickness mapping
[11:08] – Decision: add dedicated thickness tokens to the engine
[11:59] – AI identifies further inline resources across other controls
[13:41] – Asking AI for thickness token naming conventions
[13:52] – AI's full token proposal reviewed and critiqued
[14:26] – The token bloat problem — when NOT to add a new token
[18:11] – Policy decision: how to snap stray values to existing tokens
[20:08] – AutoCompleteBox: border brush and accent brush tokens
[21:45] – MaxDropDownHeight and margin replacement
[23:27] – ⚠️ AI adds unwanted spacing values — correcting it in real-time
[24:17] – Introducing the Scaled markup extension for proportional custom values
[26:09] – Problem: Scaled extension hardcoded to ThemeContext — feedback given to AI
[28:17] – Further AI instructions on the Scaled extension + remaining issues
[32:59] – Bug fix discovered in Avalonia source code for AutoCompleteBox
[33:42] – Negative margins fixed with Edges + negative multiplier
[34:07] – Git diff review: AdornerLayer and AutoCompleteBox fully cleaned up
[36:45] – The ultimate goal: seamless theme swapping without any application code changes
[38:00] – Wrap up & next steps
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
🔗 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
▶ Part 5 – Checkbox Anatomy: youtube.com/watch?v=uIimnwjITT0
▶ Part 6 – Checkbox Styling: youtube.com/watch?v=uv1bNrfCjtY
▶ Part 7 – Theme Engine From Scratch: youtube.com/watch?v=NXz8hwITg5U
▶ Part 8 – Design Token System: youtube.com/watch?v=QMVdxRZqaU8
▶ Part 9 – Stripping Legacy Code: youtube.com/watch?v=5-p_fnOi0As
📺 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 #aiagent #aitools #softwaretutorial #coding
