Windows Phone Theme Customisation

by ·2 Comments

I saw a question on stackoverflow.com about theme management in a Silverlight application. As I stated in my answer, there’s no specific API to manage a theme like you know it in Windows. However you have the concept of ResourceDictionnary. Yesterday I posted a link to a video from Microsoft showing different applications with very different “themes”. So you have some liberties from the minimalist UI of Windows Phone 7. But how can you change the default color while still following the guidelines of Microsoft? You can modify the styles provided in the SDK. In the folder “C:\Program Files (x86)\Microsoft SDKs\Windows Phone\v7.0\Design” you will find several XAML files:

ThemeResource.xaml contains the basic Color, SolidColorBrush and TextBlock resources. You can copy/paste this file in your application and reference it in the App.xaml to override specific styles.

System.Windows.xaml has the styles for controls like Button, CheckBox, etc. Again you can use it to override the look and feel of the widgets.

Finally, there is one folder for each of the 10 “accent” colors (blue is the default) for both the light and dark themes (the operator can provide a 11th color).

 

This is a sample with the default dark theme :

1    <Application.Resources>
2    <ResourceDictionary>
3        <ResourceDictionary.MergedDictionaries>
4            <ResourceDictionary Source="Resources/Styles.xaml"/>
5                   </ResourceDictionary.MergedDictionaries>
6    </ResourceDictionary>
7    </Application.Resources>

In the Styles.xaml file you have a copy of the content of ThemeResource.xaml file from the SDK :

1    <ResourceDictionary
2      xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
3      xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
4      xmlns:System="clr-namespace:System;assembly=mscorlib">
5
6     <Color x:Key="PhoneForegroundColor">#000000</Color>
7     <Color x:Key="PhoneBackgroundColor">#D2D9AE</Color>
8    (...)
9    </ResourceDictionary>

 

And now the look and feel of your application is customized.

One important notice: even though if you can override all the controls’ styles you should keep an eye on the implicit contract imposed by the platform i.e. the “Metro” UI guidelines. For example, it’s probably a bad idea to change the appearance of the default Button because your users will look after a particular widget in the page to save, confirm, send, etc.

Please Feelo Free To contact me and please do comment, I need them for sure.