Custom colours in Windows 8 apps

It’s full steam ahead on the Cheap Ass Gamer app, I have version 1.0 submitted to the Store for certification and 1.1 ready to follow when the app gets in. Great!

Something I want to touch on is custom theme colours in Windows 8 apps. For the CAG app I restyled the app bar buttons, ListView item and slider colours. Most of the colours aren’t available in the properties of these controls. Strangely, you have to change them in the App.xaml page. Here’s an example:

<Application.Resources>
<ResourceDictionary>

<SolidColorBrush x:Key="ListViewItemSelectedBackgroundThemeBrush" Color="#bf7022"/>
<SolidColorBrush x:Key="ListViewItemPointerOverBackgroundThemeBrush" Color="#3c3c3c"/>
<SolidColorBrush x:Key="ListViewItemSelectedPointerOverBackgroundThemeBrush" Color="#bf7022"/>
<SolidColorBrush x:Key="ListViewItemSelectedPointerOverBorderThemeBrush" Color="#FFEF8D2A"/>

</ResourceDictionary>
</Application.Resources>

Adding a SolidColorBrush to the Application Resources with the same key as an inbuilt brush will override it. This means you can change the colours of things that aren’t available in the controls properties. The above code changes the ListView’s colours, even specifically the colour of the selected item’s border when the mouse hovers over it.

I think you can put the code in a page xaml but putting it in the App.xaml means all the control’s colours change. This can be useful if you’re creating a colour scheme for your app. I found that you might also need to fiddle with colours in the properties box of the control too. I also found this page that has a full list of system brushes you can modify, very useful.