Windows 8 Store Apps Color Overrides

Tired of that purple color in your ComboBoxes, ListBoxes, and GridViews? Here is how to change it without retemplating all of the controls.

So your Windows 8 Store (née Metro) is coming along and you are trying to polish up the look and feel. However, that annoying purple highlight color keeps popping up in unexpected places, like the background for selected items in ComboBoxes and ListBoxes, or in the border for selected items in a GridView.

Purple

Purple might work for some apps, but you are a perfectionist and you gotta have the exact shade of green that matches your logo. Some of the controls expose properties that let you set the color in your xaml and you could set up a <Style> rule to apply them, but then you have to always remember to apply the style and some of the controls don't even expose the necessary properties to override the color, so what to do?

Maybe everybody out there other than me already knows this, but the list of pre-defined control colors can be found at: %PROGRAMFILES(x86)%\Windows Kits\8.0\Include\WinRT\Xaml\Design\generic.xaml

In there, there are a few different sections for the Dark theme, Light theme, and High-Contrast theme. Looking through any of them, you can see a section called:

<!--
******************************************************************
DEFAULT COMMON CONTROL COLORS
******************************************************************
-->;

That section contains a long list of all of the colors used by the built-in controls. Most of them are various shades and opacities of black or white and should be good for most apps. But I went through and pulled out all of the items that defined a purplish color so you can easily see which items to override:

<!-- Purple system brushes -->
<SolidColorBrush x:Key="ComboBoxItemSelectedBackgroundThemeBrush" Color="#FF4617B4" />
<SolidColorBrush x:Key="ComboBoxItemSelectedPointerOverBackgroundThemeBrush" Color="#FF5F37BE" />
<SolidColorBrush x:Key="ComboBoxSelectedBackgroundThemeBrush" Color="#FF4617B4" />
<SolidColorBrush x:Key="ComboBoxSelectedPointerOverBackgroundThemeBrush" Color="#FF5F37BE" />
<SolidColorBrush x:Key="HyperlinkForegroundThemeBrush" Color="#FF9C72FF" />
<SolidColorBrush x:Key="HyperlinkPointerOverForegroundThemeBrush" Color="#CC9C72FF" />
<SolidColorBrush x:Key="HyperlinkPressedForegroundThemeBrush" Color="#999C72FF" />
<SolidColorBrush x:Key="ListBoxItemSelectedBackgroundThemeBrush" Color="#FF4617B4" />
<SolidColorBrush x:Key="ListBoxItemSelectedPointerOverBackgroundThemeBrush" Color="#FF5F37BE" />
<SolidColorBrush x:Key="ListViewItemDragBackgroundThemeBrush" Color="#994617B4" />
<SolidColorBrush x:Key="ListViewItemSelectedBackgroundThemeBrush" Color="#FF4617B4" />
<SolidColorBrush x:Key="ListViewItemSelectedPointerOverBackgroundThemeBrush" Color="#FF5F37BE" />
<SolidColorBrush x:Key="ListViewItemSelectedPointerOverBorderThemeBrush" Color="#FF5F37BE" />
<SolidColorBrush x:Key="ProgressBarForegroundThemeBrush" Color="#FF5B2EC5" />
<SolidColorBrush x:Key="ProgressBarIndeterminateForegroundThemeBrush" Color="#FF8A57FF" />
<SolidColorBrush x:Key="SliderTrackDecreaseBackgroundThemeBrush" Color="#FF5B2EC5" />
<SolidColorBrush x:Key="SliderTrackDecreasePointerOverBackgroundThemeBrush" Color="#FF724BCD" />
<SolidColorBrush x:Key="SliderTrackDecreasePressedBackgroundThemeBrush" Color="#FF8152EF" />
<SolidColorBrush x:Key="ToggleSwitchCurtainBackgroundThemeBrush" Color="#FF5729C1" />
<SolidColorBrush x:Key="ToggleSwitchCurtainPointerOverBackgroundThemeBrush" Color="#FF6E46CA" />
<SolidColorBrush x:Key="ToggleSwitchCurtainPressedBackgroundThemeBrush" Color="#FF7E4FEC" />

In order to make sure these get set before any control templates that use them, I simply added them to their own ResourceDictionary xaml file and included it directly above the Common\StandardStyles.xaml in App.xaml.cs:

<ResourceDictionary.MergedDictionaries>
    <ResourceDictionary Source="Common/ColorOverrides.xaml"/>

    <!-- 
        Styles that define common aspects of the platform look and feel
        Required by Visual Studio project and item templates
        -->
    <ResourceDictionary Source="Common/StandardStyles.xaml"/>
</ResourceDictionary.MergedDictionaries>

Hope that helps somebody check of that one last to-do item so they can submit their app, sit back, and start raking in the millions =)

 

@briandunnington


2018.03.25

The many uses of Azure Functions Proxies

Azure Functions Proxies are awesome - here are just a few ways to leverage them

View details »


2018.03.12

Build an Alexa skill using Azure Functions

Although AWS Lambdas are the default, it is dead simple to use Azure Functions for your Alexa skill as well

View details »


2018.02.28

Roll Your Own React

(on Roku, just for an added twist)

View details »


2018.02.06

Streaming live drone footage using Azure Media Services

Directly from your drone to the world, via the the cloud

View details »


2017.07.07

Redux + Roku = Redoku

Making Roku development less painful by making state changes more predictable

View details »


More Posts >