Creating WP7 Custom Theme – Sample Theme Implementation

by WindowsPhoneGeek

I am starting a series of 3 articles: "Creating WP7 CustomTheme" in which I will explain everything you need to know about theming in Silverlight for Windows Phone 7. I will begin with a simple  theme implementation based on color changes, next I will demonstrate how to implement a complex theme including some custom ControlTemplates and other custom logic. Finally I will share some best practices you need to consider when implementing custom theme.

• Creating WP7 Custom Theme - Basic Theme Implementation
• Creating WP7 Custom Theme - Complex Theme
• Creating WP7 Custom Theme - Best Practices

This is the first article so I am going to talk about how to implement a simple custom application theme in Silverlight for Windows Phone 7.

      When you build a composite WP7 application with lots of controls it is essential that the whole UI will remain consistent in all themes. This is also an important part of the Windows Phone 7 Application Certification Requirements (Here's a direct link to the PDF file):

You have several options:

1.Create a custom application theme

      Creating a custom application theme is a good solution when you want your application to look like in the same way in all theme i.e. to be theme independent. Another benefit is the fact that in this case you are sure that all your controls will look like consistent and in the same color variation regardless the phone theme.

NOTE: Adding a custom theme to your app override the default one!

2.Use the default theme resources: your app will look like different depending on the current phone theme

In this case if you use some of the default controls provided by the SDK like: Button, ListBox, Panorama, Pivot, etc  you do not need to do anything and your app should remain consistent but it will look like in a different way depending on the current phone theme. By default Windows Phone uses a resource dictionary for theme resources, a keyed dictionary of objects that can be used both in XAML and in code.  You can check this post for more info: WP7 Theme Resources Tips

Getting Started

Now lets begin creating a custom theme. The first thing to mention is that all Windows Phone 7 theme resources are places in the following folder:

C:\Program Files (x86)\Microsoft SDKs\Windows Phone\v7.0\Design

Here is how the Design folder with all resources should look like:

Basically the most important files that you will need to modify are:

ThemeResource.xaml

This file contains all  SolidColorBrushes, Colors and TextBlock resources.

Here you can find a list of all available resources: Theme Resources for Windows Phone

System.Windows.xaml

This is a more complex file. It contains all Styles/ControlTemplates of the default controls from the SDK like: TextBox, ListBox, Button, etc.

NOTE: Whatever changes you make to the control styles make sure that the final result fits in the Metro Design UI. It is probably a bad idea to change the appearance of the ToggleButton or ScrollViewer for example because your users will expect to see such controls in a WP7 Merto Like Style. However you are free to change the colors, sixes, etc

PortableUserInterface.Metro.CompositeFont

This file contains important information related to the Metro UI FontFamily, FontSize, etc. I would suggest that you should be careful with this file. It if possible try to not modify it!

Creating s Simple Custom Application Theme

The steps you have to follow in order to create a custom simple application theme are as follows:

1.) Create a sample Windows Phone 7 application and add  a new CustomTheme  into it.

2.) Copy the ThemeResource.xaml to your WP7 application and change the resources as you prefer. It is not so important whether you will create a separate folder like for example CustomTheme folder or you will just paste the file in the main root. However we would recommend to create a separate folder for your  theme. In this example we will  create  CustomTheme  folder and will paste the file there.

NOTE: The name of the file is not important. What is essential however is not to forget to copy all the content of this file! If you prefer you can change the name of the ThemeResource.xaml  to something like CustomStyle.xaml or another.

NOTE: You can modify only some of the resources or all of them.

NOTE: Do not change the "x:Key" and "x:Name" values!

3.) Modify the resources: change some colors, brushes etc. to form a custom look. in our case we will change the following colors:
PhoneBackgroundColor - the base color of the PhoneBackgroundBrush
PhoneForegroundColor - the base color of the PhoneBackgroundBrush

PhoneAccentColor -  the base color of the PhoneBackgroundBrush

NOTE: Here you can find a list of all available resources: Theme Resources for Windows Phone

We can use either VisualStudio or Expression Blend to make a custom theme.

• Using VisualStudiio

You can either do this on your own using VisualStudio by simply write for example:

<!-- Pink -->
<Color x:Key="PhoneAccentColor">#FFF50C98</Color>

<!-- Modified Color -->
<Color x:Key="PhoneForegroundColor">#FF84F4F9</Color>

<!-- Modified Color -->
<Color x:Key="PhoneBackgroundColor">#FF39264E</Color>

• Using Expression Blend

Another option is to use ExpressionBlend which enables you to easily customize the appearance of every control using the Visual Designer. You can also modify all kind of resources and edit ControlTemplate ina n easy way. It is preferable to use Blend when creating themes in Windows Phone 7 because you can see the effect imediately in the designer. Here are some suggestions:

3.1. Go to VisualStudio right press the mouse and select "Open in Expression Blend":

3.2. You will see a popup with some security message, press YES:

3.3.Go to the Resources tab in ExpressionBlend and select ThemeResources.xaml (this is the name of your custom resource file):

3.4. Modify the desired colors by simply selecting the corresponding color picker:

The final generated code should be something like:

<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">
...
<!-- Another resourced here!-->
...

<!-- Pink -->
<Color x:Key="PhoneAccentColor">#FFF50C98</Color>

<!-- Modified Color -->
<Color x:Key="PhoneForegroundColor">#FF84F4F9</Color>

</ResourceDictionary>

<!-- Modified Color -->
<Color x:Key="PhoneBackgroundColor">#FF39264E</Color>

</ResourceDictionary>

3.5. Save the changes and go back to VisualStudio. You will again see a message box that asks you to save the changes you have made in Blend. Click Yes to All:

4.) Go to App.xaml and add the following code:

<Application.Resources>
    <ResourceDictionary>
        <ResourceDictionary.MergedDictionaries>
            <ResourceDictionary Source="CustomTheme/ThemeResources.xaml"/>
        </ResourceDictionary.MergedDictionaries>
    </ResourceDictionary>
</Application.Resources>

NOTE: This code will override the default styles!

NOTE: Make sure that the Path to the file is correct and the Build Action as well. For more info about ResourceDictionary  check this post: All about ResourceDictionary in WP7

5.) That`s it now you have successfully overridden styles.

Here is how our new theme looks like for some of the default SDK controls and the Silverlight for WP7 toolkit controls as well:

That was all about how to create a simple custom application theme in Silverlight for Windows Phone 7. You can find the full source code here:

I hope that the article was helpful. Stay tuned with the rest of the articles in this series.

You can also follow us on Twitter @winphonegeek

Comments

public App()
{
   ...

    // Standard Silverlight initialization
    InitializeComponent();

    // Phone-specific initialization
    InitializePhoneApplication();
    LoadDictionary();     
}

private void LoadDictionary()
{
    var dictionaries = Resources.MergedDictionaries;
    dictionaries.Clear();
    string source = String.Format("/WP7SampleProject23;component/TestStyles.xaml");
    var themeStyles = new ResourceDictionary { Source = new Uri(source, UriKind.Relative) };
    dictionaries.Add(themeStyles);
}