IdentityMine Blog

| Tags: John Zolezzi, Mobile, Windows Phone 7

Update: find sample code here: http://www.identitymine.com/assets/ThemingSample.zip

Adding themes to your mobile application can give the user more control over the UI beyond the default OS themes.  Here are some tips we learned when adding theme support.

No Binding for Theme Support

Since we are running on a phone, we didn’t use binding for our theme resources for performance reasons.  Binding was limited to data and view model sources only.  We used standard way to assign resources with StaticResource.  Resources are merged at startup time to apply the theme that the user picked.  The drawback is that the user must restart the application to apply the new theme.

Merge Resources at the Right Time

Our first approach was to override the default theme by merging in the new theme resources.  We had our default theme (light) merged in XAML and then, at runtime, merged the user chosen theme (like dark) after InitializeComponent in App.xaml.cs.  Here we are attempting to override the default theme resources.  This worked for most cases but failed for resources used inside ControlTemplates.  Controls were still using the default and incorrect resources.

To work around this issue, I figured out how to merge our resources even earlier in the UI creation process.  Instead of merging resources after the XAML is parsed and elements are created (after InitializeComponent), I merged during XAML object creation.  This was easy to do with StaticResourceDictionary, a class I created which is derived from ResourceDictionary.  Inside StaticResourceDictionary I created a property that will get assigned when the object is created (during XAML parsing and object creation).  Inside that property I simply load and merge in the correct resource dictionary.

Merged Resources xaml:

<ResourceDictionary xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"

xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"

xmlns:local="clr-namespace:ThemingSample">

<ResourceDictionary.MergedDictionaries>

<local:StaticResourceDictionary Kind="theme" />

</ResourceDictionary.MergedDictionaries>

</ResourceDictionary>

StaticResourceDictionary code:

public class StaticResourceDictionary : ResourceDictionary

{

string _kind;

public string Kind

{

get { return _kind; }

set

{

if (_kind != value)

{

_kind = value;

...

string theme;

if (IsolatedStorageSettings.ApplicationSettings.TryGetValue<string>("Theme", out theme) == false)

{

theme = "Light";

}

ResourceDictionary res = LoadXaml<ResourceDictionary>(new Uri(string.Format("ThemingSample;component/Themes/{0}.xaml",

theme), UriKind.RelativeOrAbsolute));

MergedDictionaries.Add(res);

...

}

}

}

Click here for an example using this class.

Test on both OS themes

Since we changed the default application style, add some testing time to test each of your application themes on the OS dark and light themes.

OS dark OS light
Application theme 1 X X
Application theme 2 X X
Application theme N X X
Tweet about this on TwitterShare on FacebookShare on Google+Share on LinkedInPin on PinterestShare on RedditShare on TumblrEmail this to someoneDigg thisFlattr the authorShare on StumbleUpon

8 Responses to “Theming Tips for Windows Phone 7 #WP7”

  1. Andrew Baioura

    Same question: I would greatly appreciate if you could share a smaple using this approach to override theme.

    Thanks a lot!

    Andrew

    Reply
  2. Marc

    The attached download doesn’t have anything to do with this article, it must be a sample for something else (twitter data serialization tests). Anyway, do you have a link for the one for this article?

    Reply

Trackbacks/Pingbacks

  1.  Easy theming with Windows Phone | IT Bytes

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>