Themes on Windows Phone 7 Devices (part 2) - Changing the Theme & Detecting the Currently Selected Theme

2. Changing the Theme

In this part of the walkthrough, you will change the emulator's theme to observe the effect it has on the Theming application.

1. Press the Windows button on the emulator to bring up the Start screen. Then press the => key and select Settings => Themes to bring up the Themes dialog.

2. Change the background to Light, and change the accent color to Red (note that you may have to scroll to locate the red accent color).

3. Press the Windows button again to go back to the Start screen. Note that your application is no longer running (it stopped when you pressed the Windows button), so go back to Visual Studio 2010 Express and press F5 to re-launch your application.

4. Notice how you can see the same controls as before, except the ellipse that you drew from code is nowhere to be found. Figure 2 shows two versions of the same application side by side, each with a different theme:

   Figure 2. Two themes applied to the same theming application example

   

By now, you have probably guessed that the reason the ellipse is not visible is that the application paints it white and then displays it on a white background. But how did the other controls manage to show up on the white background, when they originally were white themselves? And how can we make the ellipse behave the same way?

The answer to both of these questions lies in a Windows Phone 7 concept known as theme awareness. By default, Windows Phone 7 controls are theme-aware and adjust their appearance based on the theme selected on the device. Problems arise when the color values are hard-coded in the control, as you have done for the ellipse and the rectangle border. In the next few steps, we correct the issue of hard-coded colors, first with a designer and the second in code:

5. If it's still running, stop the application. Open MainPage.xaml in the design view, and select the rectangular shape. Press F4 to bring up the Properties window, and then click the diamond symbol to the right of the Stroke property.

6. From the pop-up dialog that comes up, click Apply Resource. From the next dialog, double-click the PhoneAccentBrush setting to use the currently selected accent color to draw a rectangle.

7. Now, you will adjust the color of the ellipse to the currently selected accent color. Since you drew the ellipse from code, open the MainPage.xaml.cs file and change the following line of code.

   Color backgroundColor = Color.FromArgb(255, 255, 255, 255);

   
   

   to

   Color backgroundColor = (Color)Application.Current.Resources["PhoneAccentColor"];
   
   					  

Press F5 to run your application. You should see both the rectangle and ellipse appear in red (or the currently selected accent color).

NOTE

Avoid using hard-coded values for color if at all possible. It is hard to predict what combination of themes a user will choose, and your visual elements may not show up as desired. Instead, use one of the predefined theme resources (a full list of resources is available at http://msdn.microsoft.com/en-us/library/ff769552(v=VS.92).aspx) to ensure that your application is fully theme-aware, in accordance with Metro design principles.

Now that you know how to ensure your application is theme-aware, in the next section you will learn how approach cases where you absolutely must customize your application based on the currently selected theme.

3. Detecting the Currently Selected Theme

Sooner or later, you're likely to encounter cases where you'll want to customize your application depending on whether a dark or a light theme is currently active. For example, you may have a beautiful custom graphic within your application that simply does not render well when the background theme colors are changed; instead you would like to show a different graphic depending on the currently active theme. The following walkthrough shows you how to accomplish just that—it detects the currently selected theme and adjusts the message based on whether the current theme has a light or a dark background.

1. Launch Visual Studio 2010 Express and select the Windows Phone Application template. Change the Project Name to "DetectTheme," select OK, and Visual Studio will set up a new project.

2. Open MainPage.xaml in design mode, and add a TextBlock to the page. For this walkthrough, you will simply modify the message within this TextBlock; for real-world applications, you will probably choose to do something a bit more exotic than this, such as showing different images.

3. Open MainPage.xaml.cs (right-click MainPage.xaml in Solution Explorer and choose View Code) and add the following code to the MainPage() constructor, right below the InitializeComponent() method:

   Visibility v = (Visibility)Resources["PhoneLightThemeVisibility"];
   if (v == System.Windows.Visibility.Visible)
   {
          textBlock1.Text = "Let there be light!";
   }
   else
   {
          textBlock1.Text = "It's dark!";
   }

   
   

Notice how you are using the Visibility property to determine whether the light theme is visible, and to then take action accordingly.

Press F5 to run the application. If you still have a light background selected from the previous walkthrough, you will see a "Let there be light!" message. Otherwise, a "It's dark!" message will be displayed.

We touched on the basics of theming and took a look at how to make your application theme-aware and how to customize its behavior based on the theme selected. Now, you will look at the controls provided as part of Windows Phone 7 Developer tools, since it's those controls that really complete the Metro experience.