Developing for Modern Windows

Tips, tricks, and guides for developing on modern Windows platforms

Colour Resources in Windows 8 and Windows Phone

It’s easy to create colour resources in Windows platforms within the XAML UI code. These resources can be used to ensure that the colour scheme of your app is consistent, such as using the exact same shade of blue throughout. Another benefit of using resources for colour is that you can instantly change all the colours within your UI by just changing the resource value. This is great for apps that use themes or branding, and also for when you decide you don’t like the colours you initially chose when creating the app.

What is a resource in a Windows app?

A resource or static resource is a setting or object that you can use within your project like a variable. A colour resource stores a set colour, and you can then use this colour to paint UI elements.

First things first

First let’s create some static resources. Open your project (or create a new one) in Visual Studio. Open App.xaml and add the resource as below.

You need to put the resource code within the <ResourceDictionary> area of your App.xaml.

Here is the full XAML for the two colour brush resources we’ll set up. We are making two because there are two ways to define a colour in XAML, so we’ll do one of each.

Code should go in between <ResourceDictionary> and </ResourceDictionary> in the App.xaml file of your project. This ensures that every part of your app can access it. You can be more specific and make resources available only to a specific page, and you can also create a separate resource dictionary file to hold your resources, but those things are outside the topic of this tutorial.

This XAML code applies to both Windows Phone and Windows 8/8.1:

 <SolidColorBrush x:Key="MainColourBrush" Color="#FFF7A619"/>
<SolidColorBrush x:Key="SecondColourBrush" Color="Blue" />;

Put the above code into your App.xaml and you can then use those colour resources everywhere in your app.

What does it all mean?

A SolidColorBrush is what XAML uses to paint the colour of most UI elements, such as text and background fills.

You will also notice that we’ve defined our colours in two different ways: with a hex definition (#FFF7A619) and with a word (“Blue”). All colours displayed by computers are defined by the amount of opacity (how transparent the colour is), and the amounts of red, green, and blue in the colour. Hex colour definitions use the hash sign (#) followed by four 2-digit hexadecimal numbers to represent opacity, red, green, and blue. In hex, FF is the largest possible number (255), and therefore any colour that starts with FF is 100% opaque (not transparent at all).

The Blue definition we also used is a predefined colour that Visual Studio recognises. It’s a medium shade of blue. This is actually a predefined colour resource, and there are several of these understood by XAML. You can also create a Color resource to use as well, and the process is very similar to creating a SolidColorBrush.

How to use your resources in your project

Once you’ve set up your colour resource you can use it in your project from the Properties panel for your UI elements/controls. Here you can see how our new colour brush resources look in the Properties panel for a textblock called HeadingText.

And the best part is that you can now change your resource, and instantly every item in your project painted with that resource will change to the new colour!

How to change the resource value at runtime from code behind

My app Scottish Football Hub uses the following technique to change the colour theme of the app to match the user’s favourite Scottish football team:

TryCast(App.Current.Resources("FirstColourBrush"), SolidColorBrush.Color = Colors.Red
TryCast(App.Current.Resources("SecondColourBrush"), SolidColorBrush.Color = Color.FromArgb(255,100,50,75)

And instantly, all UI using the changed colours will be updated to the new colours!

Leave a Reply

Your email address will not be published.