Mango Sample: Resources Part 1: Themes

This is part 3 in the Resource series.

1. Part 1: Themes
2. Part 2: Colors
3. Part 3: Sizes
4. Part 4: Styles

Themes

Windows Phone provides a series of resources to delivers. They include Brushes, Colors, Sizes, and Styles. Although a developer could create their own, it is the best practice is to use the Phone Resources.

The reason for this is simple. Phone users can change the theme from Light to Dark. Phone resources update dynamically based on the current theme. Where hard coded colors may render invisible, phone resources are always correct.

In the image above, the hard coded black on the bottom is lost when the theme is Dark. The hard coded white in the middle is lost when the theme is Light. The top text switches colors to adjust to the theme by using the native Phone Resources.

Note: An advantage of using themes on Windows Phone device is consistency and compatibility. A developer can use the default control set without adjusting common properties such as colors, knowing that these styles will be modified at run time. When an application is run on a Windows Phone, the theming system modifies the visuals of the application accordingly. Also, a developer can override the theme at the application level. For example, a company that is building an application with a strong brand color may want to maintain a given color. Developers can provide their own resources and override any themed properties. However, they cannot turn off theming.

Applying Resources

XAML developers use resources all the time – just like web developers use CSS. However, unlike web developers, XAML resources can be variables, sizes, colors, brushes, styles, even templates, controls, and animations. XAML resources allow for considerable reuse and simplified maintenance.

First, let’s consider how we can use in-line styles:

Now, let’s do the same thing with a reusable resource:

In the code above, see MyColor? That is a Solid Color Brush I created within the scope of the Stack Panel. Every control can use and re-use that resource. I could have created at the page level. I even could have created it at the application level.

Phone System Resources, the topic of this article, are at the application scope. In a way, they are at the Phone scope – but that is meaningless within your application sandbox. These resources are injected by the phone’s operating system into your application. And they are a reliable resource for your application to use.

Previewing the Theme

The Windows Phone SDK automatically installs Expression Blend for Windows Phone Development. This powerful tool is often overlooked by developers. It provides so may features. But I want to focus on its ability to preview the change in themes. Watch this:

Note: As a reminder, you do not need Blend to test themes. You can just run it in the emulator and change the theme manually.

Determining the Theme

It might happen that you need to know what the current theme is. Here’s a nice snippet to help you with that:

There are many reasons you might need this. One such reason is switching in-line images. I discuss it far more here.

Next: Part 2 – Colors