Mobile Corner

Style Your Application with Windows Phone 7 System Resources

Nick Randolph walks through how to leverage the built-in system resources to style your application in line with the Windows Phone 7 Metro design language

• By Nick Randolph
• 06/17/2011

In a previous column (Build Consistent WP7 User Interfaces Using Resources) you saw how you can create and use resources within your application to create a consistent look and feel. One of the things that set aside great applications is that they adhere to, and are styled in keeping with, the underlying platform. This means that a great Windows Phone application typically inherits some of the look and feel of the first party applications.

A large number of applications have already taken advantage of the Panorama and Pivot controls that Microsoft ship in order to behave much like the primary hub experiences such as the People, Music + Video and the Pictures hubs. However, you need to apply that same consistency to the way that you arrange and flow the content within those controls.

Rather than having to guess at font sizes, spacing, colors and thicknesses of the visual elements that make up the first party applications, Windows Phone 7 ships with a set of resources that are available to every application. What's more is that these styles have been incorporated into both Visual Studio and Expression Blend so that they are available to you as you build your application.

Let's start with a brand new application created from the Windows Phone Application. If you examine the XAML created for the MainPage you'll notice that there are a number of attributes that use the "{StaticResource ResourceKey}" syntax to reference a resource where ResourceKey refers to the x:Key attribute assigned to the resource (this was discussed in the previous article on Resources). For example:

FontFamily="{StaticResource PhoneFontFamilyNormal}"
FontSize="{StaticResource PhoneFontSizeNormal}"
Foreground="{StaticResource PhoneForegroundBrush}"
Style="{StaticResource PhoneTextNormalStyle}"

What's interesting about these resources is that if you search throughout the project you will not see them explicitly defined anywhere. This is because these resources are global Windows Phone resources. This means that they are accessible and consistent across any Windows Phone application. If you want to discover the full list of global resources that are available, or drill down and see what each of the resources defines, you can do this by opening ThemeResources.xaml which can be located in the Design sub-folder of the SDK (C:\Program Files (x86)\Microsoft SDKs\Windows Phone\v7.0\Design or C:\Program Files\Microsoft SDKs\Windows Phone\v7.0\Design depending on platform).

In most cases you won't need to remember what the list of global resources is because they are exposed from within Expression Blend. Open the project in Expression Blend and right-click on the first TextBlock which has the text "MY APPLICATION." Select Edit Style  Apply Resource and you'll see the list of available styles that you can set for this TextBlock. Each style defines font family, size and weight for the TextBlock, as well as properties such as Margin.

[Click on image for larger view.]

Figure 1.

The global resources are also exposed via the Properties window within Expression Blend. Again with the first TextBlock selected go to the Properties window. Under Brushes select Foreground and then click the fifth and last tab. This will show you a list of all available brush resources that you can apply as the Foreground color for the TextBlock. The System Brush Resources shown in Figure 2 are all the global Brush resources.

[Click on image for larger view.]

Figure 2.

One of the System Brush Resources that is of particular interest is the PhoneAccentBrush, which in the Figure 2 is Blue. This resource is somewhat unique in that it varies depending on what accent color the user has selected for their device.

Select the PhoneAccentBrush as the Foreground color for the TextBlock. Then locate the Devices window (this Window may not be already open so you may have to select it from the Window menu). You'll see a dropdown that allows you to select a color; this allows you to simulate at design time the different Accent colors that the user may select on their Windows Phone device. Figure 3 illustrates changing the Accent color to Magenta. You'll notice that it changes the color of the TextBlock that you set to use the PhoneAccentBrush.

[Click on image for larger view.]

Figure 3.

One of the other unique features of Windows Phone is that it supports both a light and a dark theme. In the Devices window you'll also see a toggle next to the color selector that allows you to change between the Dark and Light Themes. This again allows you to simulate at design time what the application would look like when the user has selected either of these themes.

A common mistake is to hard code the color of text within the application to White. Unfortunately in this case if the user selects the Light theme (ie a white background) this text will not display. Instead, the best practice is to use one of the System Brush Resources, for example PhoneForegroundBrush. These brushes automatically switch depending on which theme is selected. The PhoneForegroundBrush is white for the Dark theme, and black for the Light theme.

When designing your application there may be times when you want to show or hide elements depending on whether the user is in the light or the dark theme. You can do this by setting the Visibility property to either the PhoneDarkThemeVisibility or the PhoneLightThemeVisibility. These resources will return Visible or Collapsed depending on whether the Dark or Light theme has been selected.

To use these resources simply locate the Visibility property, click the square next to the dropdown and select the appropriate resource from the System Resource menu item, as shown in Figure 4.

[Click on image for larger view.]

Figure 4.

In this post you've seen some of the global resources that are available to your Windows Phone application. To ensure consistency between your application and other core and third party applications it is good practice to try to use the global resources where possible. Using the color resources will help reduce any issues where your application doesn't render correctly under certain theme conditions (note that failing to render correctly under both Light and Dark themes is one of the reasons applications can fail Marketplace certification)