Hello world,

As we come closer to Windows Phone 7s launch date application finalisation amongst a lot of developers is taking place. As many of us are developers coming from other platforms or not accustomed to using the new tools (ie Expression Blend) the benefits as well as disadvantageous of these platforms do not always seem clear. One particular thing I would like to point to people’s attention is the use of colours in their program and fixing their themes. If you have been developing your program and have never changed the Background Colour in your Emulators Theme Setting from Dark to Light then I suggest you do because if you have been customising your UI and changing only top-level colours you might run into a few problems when switching themes.

In the picture below you can see the difference on an application where by I have only changed the background colour to red. When the Emulators Theme is set to Dark the colour scheming turns out legible (as you probably planned it when designing), now change the Emulator Theme over to Light and suddenly we have a problem.

So why does this occur? The way a default WP7 application is created in Expression Blend / Visual Studio the theme templates are tied directly into the phone resources. If you created your application and only had the intention on changing font sizes of your controls your application should flow with the metro theme accordingly (whether it be the light or dark theme).

Say you don’t do this and would like a custom colour scheme yet you only changed a foreground colour of a textblock (the text colour) and also changed your backgrounds default colour to red (as above). What you have done is segregated your applications theme; the rest of your theme and controls are linked to the system (phone) colours resource yet you’ve got these two controls (be it your textbox colour and background) that are explicitly set.

Similarly this might look good when designing in Expression Blend because it shows the application from the Dark Themes point of view. As stated before, set your Emulators Theme Setting to Light and see the difference. To fix User Interface problems such as these you have a few options;

1. Completely customise your application so that it does not rely on any colour resources. This option allows you to tailor your application to your original specifications.. this method requires a bit more work but might be worthwhile.

2. Rely on using the Metro Theme (as Microsoft recommends) and don’t explicitly set colours, use only System (Phone) Colour Resources.

3. Customise your application so that the colours you choose will look good in both Light and Dark Themes – something quite hard to do.

So, what now? Let’s assume you chose Option 1 and you’re going to take the plunge into developing your own style and colour scheme. What you will need to do is explicitly set the Colours (foreground, background, etc) for Each Controls State. A checkbox for example will have many states (often called a visual states), be it Pressed, Disabled, Check, Unchecked, Focused etc. You will have to encounter for all of these states and change the colours accordingly.

As an introduction to fixing your style, below we are going to change the colour of the tick in a Checked Checkbox to Green. Lets do it!

- Firstly, Right Click on a Checkbox and navigate to Edit Template and then click on “Edit a Copy…” and give it a name. Such as in the two pictures below.

- Now give your Style Resource a name.. preferably something standard.

- Click ok and you will be automatically taken to the State Manager. If at any time you wish to exit editing the current template, click the button as pointed to in the arrow below. In the State Manager you will see a series of “states” such as Base, Normal, Unchecked, Checked, and so forth. These are representative of what the control will look like when in that various mode.

- Scroll down the list to “CheckStates” and click on “Checked”.

- You will see below in your Objects and Timeline Manager an item called “CheckMark”, click next on this.

- On the right hand side you will see the “Fill” colour has a green box next to it (this represent that your colour is linked to a System (phone) Colour Resource. If you click on the Solid Colour Brush box and change the colour to Green it will change the Colour of the Tick when it is it’s Checked State.

- Now you have a lovely green tick in your Checked State. Remember that there is still over ten or so states left to customise (including the backgrounds, border colours, etc). Depending on your use of the control in the application you may be able to get away without doing them all. It is also good to note that changing certain elements, especially ones that are Data Bound, can cause other changes throughout the rest of the Controls’  Theme so i is also good to do an entire check of your Control after you’ve properly customised it to make sure it’s ok.

If you have any questions or need any help feel free to ask.

- Beau Allison