Skip to content

Create a Theme for your Windows Phone 7 Application

September 19, 2010
tags: , ,

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 :

default 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.

same screen with the new theme

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

About these ads
11 Comments leave one →
  1. September 26, 2010 11:57 am

    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?

  2. September 26, 2010 8:35 pm

    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}”

  3. Bill Mans permalink
    October 4, 2010 12:48 pm

    Thank you for posting this. I had problems getting this to work as well. Could you please post your sample project?

    Thanks!

  4. Sean Neumann permalink
    April 8, 2011 8:06 pm

    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.

    • April 9, 2011 12:01 pm

      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 :(

  5. Balaji Murugesan permalink
    June 2, 2011 2:42 am

    Theme resource are licensed for “premium shared source license”. Can we copy this into our application?

    • June 2, 2011 8:48 am

      Hello Balaji, Yes it’s provided for this reason: to be able to follow the guideline of the Metro UI.

Trackbacks

  1. 超快递 beta版 » Windows Phone 7 资源汇总(超全)
  2. Overriding theme resources in Windows Phone Mango | Johan Laanstra's blog
  3. Publishing My First Windows Phone App to the Marketplace | MSDN Blogs

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

Follow

Get every new post delivered to your Inbox.

%d bloggers like this: