Using Different Resources for Windows Phone 7 Themes

Posted: August 19, 2010 in Development, Technology, Windows Phone 7

As you know, Windows Phone 7 devices support theming: they allow you to pick Dark or Light backgrounds and choose an accent color. It’s really easy to configure your application to use predefined styles like “Disabled” or “Active” – they react to theme changing and you always get a well-colored UI. The real question is how to use different images for each theme. There is no standard way of detecting a theme and distinguishing resources based on it. I’ve surfed the web and found a solution proposed by Derik Whittaker – it detects theme by checking the color of the background. But what to do with obtained theme? The variants I’ve found at MSDN forums was not nice enough so I had to write something myself. My solution is resources-based and allows you to distinguish UIs for each theme just by adding two dictionary entries with same key. So let’s start.

Here we define ApplicationTheme enum that will distinguish our themes:

Enum

Then we implement a solution by Derik Whittaker:

Whittaker

It’s rather simple: it takes current PhoneForegroundColor property from application resources and determines theme based on it.

Now we’re going to organize an access to theme-specific resources via the ThemeResources class:

ThemeResources

Right after first call to ThemeResources they will initialize ResourceManager based on ApplicationTheme. Files used for resource storage should be it the same namespace with ThemeResources file:
Files

These .resx files should be named appropriately for each valid ApplicationTheme enumeration value: Dark or Light.

That’s it! All is left is using our ThemeResources class. Let’s define a property with some text and then bind to it:

Property

Binding

This code will automatically determine what theme is enabled and will pick appropriate application title:

DarkLight

You can easily store not only application titles but also for image URLs (what this solution was really intended for). You may need to show a white image in Dark theme and black image in Light theme – use this solution to achieve this cleanly and easily.

Download sources from our Deviation Alliance Codeplex project.

Source: Deviation Alliance

Advertisements

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