Metro Nuggets

Bitesized Windows Phone 7, Windows Phone 8 and Windows 8 tidbits

Set Custom Themes in Windows Phone

When Windows Phone first came out, setting custom themes was easy. Take a copy of ThemeResources from ‘c:\Program Files (x86)\Microsoft SDKs\Windows Phone\v7.1\Design\’ and swap the colours out with the theme colours you wanted. This changed when the 7.1 SDK came out that meant the default colours weren’t overridden. So what then? Retemplate all the controls to use the colours you want? No.

The Solution

Jeff Wilcox has a great tool called ThemeManager that lets you, with one line of code, set either a light or dark theme. It also lets you change the accent colour used by your app, however, it doesn’t support custom themes. Sorry, didn’t support custom themes. I’ve now forked Jeff’s code and extended the ThemeManager to allow for them.

Usage

Download the ThemeManager.cs from GitHub and add it to your project. Add the ThemeResource.xaml with your custom theme changes and add it with Build type Resource. Now, here’s the cool thing, add that xaml as a MergedDictionary in your App.xaml and you can see all those theme changes within Blend, although you don’t have to do this.

Now, to actually set the custom theme, in your App.xaml.cs, in the App constructor, just set ThemeManager.SetCustomTheme(..). This method has two usages, either pass it the URI of the ResourceDictionary or pass it a ResourceDictionary object.

This would be my recommended usage (having put the ResourceDictionary as a MergedDictionary):

// Get the custom theme
var rd = App.Current.Resources.MergedDictionaries[0];
            
// Set custom Theme
ThemeManager.SetCustomTheme(rd, Theme.Light);

So you simply pass the ResourceDictionary and a Theme type (Light or Dark). The Light or Dark theme type is there in case you still want particular aspects of the Light or Dark theme (for example, you might still want the AppBar to use the Light/Dark theme). Speaking of the AppBar, want to change that, too? No problem, just make sure your theme xaml contains a PhoneChromeColor resource.

NOTE: If you take the approach I’ve outlined (putting the ResourceDictionary in the MergedDictionary), the last thing the SetCustomTheme method does is remove it from the MergedDictionary list. The reason for this is that keeping it in there means not all Colors stay set (like the PhoneForegroundColor). I’m not overly sure why this is, but removing it as a MergedDictionary does the job. To this end, don’t include anything in that Dictionary that you might later rely upon, put it in a different one.

Thanks

Thanks go to Jeff Wilcox for his wonderful ThemeManager and making it open source so it can be tinkered with.

SL

About these ads

One response to “Set Custom Themes in Windows Phone

  1. Pingback: Set Custom Themes in Windows Phone

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: