Be careful with Theme Resources for Windows Phone

As a developer you of course know that end users can select different themes on a Windows Phone 7. You most likely also know that you can access theme settings through Theme Resources from inside your Windows Phone 7 application. However, what you should realize is that the Theme Resources are used throughout your entire application, and that you can change the appearance of theme aware controls by modifying the Theme Resources inside your application. This is something I recently found out while working on a little application that utilizes the PhoneAccentBrush. My first attempt to use a copy of the PhoneAccentBrush looked like this:

  1. normalBrush = (SolidColorBrush)Application.Current.Resources["PhoneAccentBrush"];
  2. normalBrush.Opacity = 0.3;

After executing this code somewhere in my application, it turned out that some of the controls inside my application looked wrong, for instance the currently selected item in a ListPicker and the checked ToggleSwitch:

ThemeAwareControls(1)

Instead of the selected item showing up in green, which was my selected theme color, the selected item looked really pale. At the same time, the checked ToggleSwitch looked really dark. It took me a few seconds to realize what was going on here. Especially since the same screen showed up nicely some times and ‘wrong’ at other times. What really happened here was the following. Each time I executed the above shown code snippet before displaying the settings screen, the ListPicker showed up pale. However, displaying the settings screen without executing the code snippet made the ListPicker appear crisp and colorful. Of course my mistake was a real beginner’s mistake. I thought I created a copy of the PhoneAccentBrush, but that was not the case. Instead I just assigned a brush variable to the PhoneAccentBrush and I modified the PhoneAccentBrush through the brush variable, thus influencing all UI controls that make use of the PhoneAccentBrush inside my application. By doing the proper thing, creating a new brush, based on the PhoneAccentBrush, my problems were history. This is how I created a copy of the PhoneAccentBrush for local use inside my application:

  1. SolidColorBrush b = (SolidColorBrush)Application.Current.Resources["PhoneAccentBrush"];
  2.  
  3. normalBrush = new SolidColorBrush(b.Color);
  4. normalBrush.Opacity = 0.3;

Changing the Opacity on a copy of the PhoneAccentBrush did not influence the appearance of theme aware UI controls any longer. This is what the ListPicker looked like after solving my problem:

ThemeAwareControls(2)

In this way I could create a User Interface for a little application that is theme aware, but modified the accent color slightly for exclusive use inside my own application. This is an example of a very simple problem that can take you some time to solve. The solution for this problem was easy, but understanding what you are really doing can prevent mistakes like this one. Each time I run into one of these issues I will definitely blog about them.

2 thoughts on “Be careful with Theme Resources for Windows Phone”

  1. It’s probably a better idea to use PhoneAccentColor instead of PhoneAccentBrush. Since Color is a struct (value type) you wouldn’t have run into similar issues.

    1. That is of course by far the better idea. However, the main purpose of this blog entry was to make readers aware of unexpected side effects like the one described here.

Comments are closed.