Windows 8 – Overriding Metro app resources

Posted by: | Technical |

Once you’ve installed Visual Studio and explored the default templates one of the first things you’ll want to do from a design point of view is changing the application brush resources. Usually this will be to alter the teal or purple selection colour (depending if you’re using a Dark or Light theme) on most of the controls. The most common answer to this problem is re-template your control referring to your custom colours.

The simpler approach we’ve used at Marker Metro is the following, we’ll create a Colours.xaml resource dictionary, this’ll contain the Colour and Brush resources specific to the app we’re developing.  We typically reference this resource dictionary from the App.xaml.

<Application.Resources>
    <ResourceDictionary>
        <ResourceDictionary.MergedDictionaries>
            <ResourceDictionary Source="Resources/Colours.xaml"/>
        </ResourceDictionary.MergedDictionaries>
    </ResourceDictionary>
</Application.Resources>

In this file we can also override specific resources to our application specific colours, to get the specific resource keys I recommend using the Windows SDK file C:\Program Files\Windows Kits\8.0\Include\winrt\xaml\design\themeresources.xaml.

<ResourceDictionary
 xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
 xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
<Color x:Key="AppRedColor">#FFF11F2A</Color>
 <Color x:Key="AppPurpleColor">#FF585A8E</Color>
 <Color x:Key="AppLightGrey">#FF898989</Color>
 <Color x:Key="AppBlueColor">#FF109FDA</Color>
 <Color x:Key="AppGreenColor">#FF59BA47</Color>
<SolidColorBrush x:Key="AppLightGreyBrush" Color="{StaticResource AppLightGrey}"/>
 <SolidColorBrush x:Key="AppRedBrush" Color="{StaticResource AppRedColor}"/>
 <SolidColorBrush x:Key="AppBlueBrush" Color="{StaticResource AppBlueColor}"/>
 <SolidColorBrush x:Key="AppGreenBrush" Color="{StaticResource AppGreenColor}"/>
 <SolidColorBrush x:Key="AppPurpleBrush" Color="{StaticResource AppPurpleColor}"/>
 <SolidColorBrush x:Key="AppLightPurpleBrush" Opacity="0.3" Color="{StaticResource AppPurpleColor}"/>
 <SolidColorBrush x:Key="AppVeryLightPurpleBrush" Opacity="0.1" Color="{StaticResource AppPurpleColor}"/>
 <!-- Theme Overrides -->
 <SolidColorBrush x:Key="ApplicationForegroundThemeBrush" Color="{StaticResource AppPurpleColor}" />
 <SolidColorBrush x:Key="ComboBoxItemSelectedBackgroundThemeBrush" Color="{StaticResource AppBlueColor}" />
 <SolidColorBrush x:Key="ComboBoxItemSelectedForegroundThemeBrush" Color="White" />
 <SolidColorBrush x:Key="ComboBoxItemSelectedPointerOverBackgroundThemeBrush" Color="{StaticResource AppBlueColor}" />
 <SolidColorBrush x:Key="ComboBoxSelectedBackgroundThemeBrush" Color="{StaticResource AppBlueColor}" />
 <SolidColorBrush x:Key="ComboBoxSelectedPointerOverBackgroundThemeBrush" Color="{StaticResource AppBlueColor}" />
<SolidColorBrush x:Key="ProgressBarIndeterminateForegroundThemeBrush" Color="{StaticResource AppBlueColor}" />
<SolidColorBrush x:Key="ListViewItemPlaceholderBackgroundThemeBrush" Color="{StaticResource AppPurpleColor}" />
 <SolidColorBrush x:Key="ListViewItemSelectedBackgroundThemeBrush" Color="{StaticResource AppBlueColor}" />
 <SolidColorBrush x:Key="ListViewItemSelectedPointerOverBackgroundThemeBrush" Color="{StaticResource AppBlueColor}" />
 <SolidColorBrush x:Key="ListViewItemSelectedPointerOverBorderThemeBrush" Color="{StaticResource AppBlueColor}" />
</ResourceDictionary>

One thing to note is that this solution is application wide, if you want to override the colours for certain controls then you’ll need to fall back to the re-templating solution.

Update: Once you dig the built in resources you’ll notice there are about 50 different shades of purple used and trying to adjust your theme to them all would be a nightmare. Thankfully the hard working people at Code52 have released possibly the best named utility ever Hammer.Pants which lets you generate your entire resource dictionary off an accent colour. Go check it out.

One Response to Windows 8 – Overriding Metro app resources