How to port your WP7 custom application Theme to Windows Phone Mango

published on: 8/17/2011 | Views: N/A | Tags: Mango Resources Styling UI

by WindowsPhoneGeek

In this post I am going to talk about how to port your existing custom application theme from Windows Phone 7 to Windows Phone 7.1 Mango.

In our previous post we described what is new in Windows Phone Mango regarding theming (most importantly Implicit Styles) and also explained step by step how to create a custom application theme in Mango. You can take a look at the article for reference: Windows Phone Mango Custom application Theme Step by Step

Porting a WP7 custom application theme to Windows Phone Mango

Before we begin let me first mention that I will use as a basis the sample Windows Phone 7 theme that we have created in our previous posts:

• Creating WP7 Custom Theme - Basic Theme Implementation

Step1. Open the Visual Studio project with your custom application Windows Phone 7 theme.

NOTE: If you do not have one, you can download the sample project attached at the end of this article : Creating WP7 Custom Theme - Basic Theme Implementation. Here is how the theme looks like:

Step2. Change the target of your project from Windows Phone 7 to Windows Phone 7.1 as described in the following post: Switching between Windows Phone 7.1 Mango and 7.0 RTW developer tools and vice versa

1.Right click the target project file in VisualStudio and select "Properties":

2.Go to "Target Windows Phone Version" combo and select the "Windows Phone 7.1" option.

3.Read carefully the warning and press the "Yes" button. Note that this will upgrade the whole project to the new 7.1 version!

Step3. If you build and run the project you will notice that the custom colors are not applied in Windows Phone Mango:

Step4. To handle this go to App.xaml and remove the ResourceDictionary from the application resources:

Step5. Go to App.xaml.cs and add the following method:

private void MergeCustomColors()
{
    var dictionaries = new ResourceDictionary();
    string source = String.Format("/WP7CustomApplicationTheme;component/CustomTheme/ThemeResources.xaml");
    var themeStyles = new ResourceDictionary { Source = new Uri(source, UriKind.Relative) };
    dictionaries.MergedDictionaries.Add(themeStyles);


    ResourceDictionary appResources = App.Current.Resources;
    foreach (DictionaryEntry entry in dictionaries.MergedDictionaries[0])
    {
        SolidColorBrush colorBrush = entry.Value as SolidColorBrush;
        SolidColorBrush existingBrush = appResources[entry.Key] as SolidColorBrush;
        if (existingBrush != null && colorBrush != null)
        {
            existingBrush.Color = colorBrush.Color;
        }
    }
}

Step6. Call the MergeCustomColors() method somewhere in the App.xaml.cs constructor:

public App()
{
    // Global handler for uncaught exceptions. 
    UnhandledException += Application_UnhandledException;

    // Show graphics profiling information while debugging.
    if (System.Diagnostics.Debugger.IsAttached)
    {
        // Display the current frame rate counters.
        Application.Current.Host.Settings.EnableFrameRateCounter = true;

        // Show the areas of the app that are being redrawn in each frame.
        //Application.Current.Host.Settings.EnableRedrawRegions = true;

        // Enable non-production analysis visualization mode, 
        // which shows areas of a page that are being GPU accelerated with a colored overlay.
        //Application.Current.Host.Settings.EnableCacheVisualization = true;
    }

    // Standard Silverlight initialization
    InitializeComponent();
    
    MergeCustomColors();

    // Phone-specific initialization
    InitializePhoneApplication();
}

Step7. Build and run the project. Now the custom colors are applied correctly. Here is the result:

NOTE: Previously in Windows Phone 7 it was quite easy to override the default theme colors just by copying ThemeResource.xaml  and changing some colors (here is an example).  However in Windows Phone Mango this approach is not working any more. Here is what Peter Torr wrote about that :

"The bug was in 7.0 and has been "fixed" in Mango such that it won't work for new projects. There are a couple of work-arounds for new Mango apps:

    Use implicit styles, now supported in Mango because it is based on Silverlight 4
    Update the built-in styles at runtime (rather than replace them) in order to match the colours you need"

So alternatively if you prefer you can override the default colors programmatically via code:

(App.Current.Resources["PhoneAccentBrush"] as SolidColorBrush).Color = Color.FromArgb(12,12,54,145);
(App.Current.Resources["PhoneForegroundBrush"] as SolidColorBrush).Color = Colors.Green;
(App.Current.Resources["PhoneBackgroundBrush"] as SolidColorBrush).Color = Colors.Purple;

Step8. If you have a complex custom theme with changed control Styles then read the following:

In Windows Phone Mango we do not have to set any x:Key or x:Name attribute to the Style. What is more, the Style will be applied to all controls of a particular TargetType implicitly without the need of setting it explicitly!

Example: Let`s say that System.Windows.xaml is the file where we have defined all our custom Styles and ControlTemplates(Note: Not  our theme Colors!). So here is how they are applied:

1. Here is how a sample style should look like:

<Style TargetType="Button">
    <Setter Property="Template">
        <Setter.Value>
            <ControlTemplate TargetType="Button">
                ...
            </ControlTemplate>
        </Setter.Value>
    </Setter>
</Style>

NOTE: Remove any "x:Key" or "x:Name'" attributes because they are no longer needed when creating a global app theme in Mango. Only the TargetType is important.

2. Merge the file in App.xaml(the same way as in WP7)

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

3. Just create an instance of the desired control and the Style is automatically applied:

<Button Content="Button"/>

NOTE: In Windows Phone 7.1 Mango you no longer need to reference the desired global custom Style via StaticResource: ex: Style="{StaticResource CustomCheckBox}". It is now automatically applied!

You may find the following articles helpful:

• Windows Phone 7 Mango Implicit Styles
• Windows Phone Mango Custom application Theme Step by Step
• Switching between Windows Phone 7.1 Mango and 7.0 RTW developer tools and vice versa

That was all about how to port your existing WP7 custom theme to Windows Phone Mango. Here is the source code:

I hope that the article was helpful.

You can also follow us on Twitter @winphonegeek

Comments

Add comment to 'How to port your WP7 custom application Theme to Windows Phone Mango'

Title Your Name

Comment