Update Windows 10 control colors without overriding the whole template

Yesterday I needed to change the IsOn background color of a ToggleSwitch. There is no exposed property allowing you to update this color. And if you extract a copy of the default template, you’ll find that the blue color pictured below comes from a Rectangle with its Fill property bound directly to the ThemeResource “SystemControlHighlightAccentBrush”.

toggle_base

 

 

 

Frustrated that this property was not exposed, I plopped a copy of the default template into my ResourceDictionary and modified the Rectangle Fill directly. Having to deal with the stiffness of XAML templates previously, I decided to whine vent online about it  on Twitter to commiserate with others and hopefully find out that I was wrong.

Good news! I was wrong.

Thanks go to @wiredprairie for pointing out ThemeDictionaries overrides. As the title suggest you can override specific colors which will then cascade across all of the controls tied to that ThemeResource. In this case instead of adding a copy of the ToggleSwitch template, you can add the following code to your Application.

And you end up with the following updated control, averaging around 191 less lines, much less complexity and less crying.

toggle_modified

 

 

4 thoughts on “Update Windows 10 control colors without overriding the whole template

  1. This technique is nice, but as you say, it cascades across all of the controls tied to the ThemeResource you modified.
    Do you know if there’s a technique that allows you to override the ThemeResource for one control only?

    In WPF you could override thoses values in a nested ResourceDictionary in the control you wanted to tweak.

Leave a Reply