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

 

 

Windows 8 AppBarButtonStyles enumerated and visualized

As a result of the WinJS AppBarIcons post yesterday, I’ve received a fair number of requests asking to see how this compares to what’s available for XAML-based projects.

AppBarButtonStylesThe results are in, but they don’t quite stack up.

Download the full image

There are currently 29 options compared to the 150 options in WinJS.  Additionally some of the names and icons conflict or are used in different ways.  I’m hoping this is ironed out before the full Windows 8 release.

Instead of a property, the appearance of the Button is set via a Style where the name of the icon is used as a prefix to the string “AppBarButtonStyle”. The Styles are defined in the “StandardStyles.xaml” resource dictionary which is part of the basic project template.

Sample code:

This works fine and is inline with how XAML-based controls are styled, but after doing so much WinJS work I will say it feel a bit heavy compared to just setting a property.  Custom icons are defined by setting the to “AppBarButtonStyle” and setting the Content property of the Button to your own PNG file.

Overall, I prefer the WinJS choice of names and icon usage over those used in XAML, except for the “find/Search” icon. Since the icon looks like the OS-level Search charm, I believe it should be named “search” and not “find” in WinJS.