Create a Theme for your Windows Phone 7 Application
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 :
This is the Resource section of the App.xaml file :
<Application.Resources> <ResourceDictionary> <ResourceDictionary.MergedDictionaries> <ResourceDictionary Source="Resources/Styles.xaml"/> </ResourceDictionary.MergedDictionaries> </ResourceDictionary> </Application.Resources>
In the Styles.xaml file you have a copy of the content of ThemeResource.xaml file from the SDK :
<ResourceDictionary xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" xmlns:System="clr-namespace:System;assembly=mscorlib"> <Color x:Key="PhoneForegroundColor">#000000</Color> <Color x:Key="PhoneBackgroundColor">#D2D9AE</Color> (...) </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.
Here’s a sample project (look at the App.xaml file for the dictionary declaration) :
http://cid-fbcb1aad564465cb.office.live.com/embedicon.aspx/Public/SampleTheme.zip
Hi,
I tried to do something similar to what you are doing here, but couldn’t get it to work. I want my application to use the light theme with the lime accent color regardless of the users theme settings. I copied the content of the files found in Microsoft SDKs\Windows Phone\v7.0\Design\LightLime and pasted the content of System.Windows.xaml into a file in my project called controlstyles.xaml and the content of ThemeResources.xaml into a file named styles.xaml.
In app.xaml I did like this:
But it does not work. I still have a dark bakground in my application. What am I doing wrong?
Yes since there’s no implicit style in Silverlight 3 (which the stack on Windows Phone 7 is based) you need to reference your new background in your “top” grid :
Grid x:Name=”LayoutRoot” Background=”{StaticResource PhoneBackgroundBrush}”
For other controls like textboxes, the template for the Page already references the correct styles, if you look at the Page element in your xaml :
FontSize=”{StaticResource PhoneFontSizeNormal}”
Foreground=”{StaticResource PhoneForegroundBrush}”
Thank you for posting this. I had problems getting this to work as well. Could you please post your sample project?
Thanks!
Hello Bill, yes I will upload the project as soon as I have access to my laptop. I will update this comment and the post. DONE, here’s the sample project : http://cid-fbcb1aad564465cb.office.live.com/self.aspx/Public/SampleTheme.zip
Is there a way to override the system theme? My app is all light and looks really dumb when a dark keyboard pops up. How do I let the app know I want a light keyboard?
Any help is appreciated.
Thanks,
Sean.
Sean, I don’t think you can change the background color of the keyboard, the only API I know of for the keyboard are the inputscopes. I know that the built-in Mail app can do that but it’s not available to third-party developers 😦
Theme resource are licensed for “premium shared source license”. Can we copy this into our application?
Hello Balaji, Yes it’s provided for this reason: to be able to follow the guideline of the Metro UI.