Valorem Consulting

| Tags: John Zolezzi, Mobile, Windows Phone 7

Update: find sample code here:

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=""




<local:StaticResourceDictionary Kind="theme" />



StaticResourceDictionary code:

public class StaticResourceDictionary : ResourceDictionary


string _kind;

public string Kind


get { return _kind; }



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));






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
2018 IdentityMine, Inc. Privacy Policy