You’ve seen that building an application
that works well on the phone requires you to understand the nature of
how applications are used on phones. Driving this change in how you
design the interaction with your applications doesn’t have to be that
difficult. The Windows Phone platform can help you with built-in
resources for many of the user interface elements. These resources are
called system resources (also known as theme resources)
The system resources can change to accommodate different-sized
screens and themes on the phone. For example, a newly created Windows
Phone application contains use of these system resources by default:
<phone:PhoneApplicationPage ...
FontFamily="{StaticResource PhoneFontFamilyNormal}"
FontSize="{StaticResource PhoneFontSizeNormal}"
Foreground="{StaticResource PhoneForegroundBrush}"
...>
<Grid x:Name="LayoutRoot"
Background="Transparent">
<Grid.RowDefinitions>
<RowDefinition Height="Auto" />
<RowDefinition Height="*" />
</Grid.RowDefinitions>
<StackPanel x:Name="TitlePanel"
Grid.Row="0"
Margin="12,17,0,28">
<TextBlock Text="MY APPLICATION"
Style="{StaticResource PhoneTextNormalStyle}"
Margin="12,0" />
<TextBlock Text="page name"
Margin="9,-7,0,0"
Style="{StaticResource PhoneTextTitle1Style}" />
</StackPanel>
<!--ContentPanel - place additional content here-->
<Grid x:Name="ContentPanel"
Grid.Row="1"
Margin="12,0,12,0">
</Grid>
</Grid>
</phone:PhoneApplicationPage>
The system resources are part of the core framework and are not
contained as code you would include in your project directly. These
system resources actually change as the user picks the theme on his
phone. For example, the PhoneBackgroundColor resource is a
dark grey color (almost black) on a typical phone application. But if
the user changes to the light theme (black text on white background),
the PhoneBackgroundColor becomes white.
There are system resources of various kinds, including the following:
• Colors (for example, PhoneBackgroundColor)
• Brushes (for example, PhoneForegroundBrush)
• Font Faces (for example, PhoneFontFamilyNormal)
• Font Sizes (for example, PhoneFontSizeLarge)
• Thickness (for example, PhoneMargin)
• Text Styles (for example, PhoneTextNormalStyle)
• Theme Visibility (for example, PhoneDarkThemeVisibility)
You can find a complete list of the system resources in the documentation:
http://shawnw.me/wptheming
To use the system resources, you can use either Blend or Visual
Studio. In both cases you can simply select the resource instead of
using fixed values (see Figure 1).
Figure 1. Using Theme Resources (for example, System Resources)
By clicking the small square next to a value, an option for System
Resource displays that will show you the valid system resources that
match the data-type you have selected. In Figure 1, the margin was selected and therefore the system resources available are all in the “thickness” category.
One system resource you should get comfortable working with is the PhoneAccentBrush.
This particular system resource replaces the brush with the selected
accent brush the user has chosen for the phone. In general, you should
defer to use the PhoneAccentBrush anywhere you want to show a selection (instead of relying on bolding or a custom color).
In general, you should always use a
system resource when one is available. By using the system resource for
resource types such as thickness and font sizing, you can be sure that
your application will adhere to the Windows Phone style guide. You can
certainly use your own judgement when using the system resources or not,
but by deviating, you’ll have to handle the different themes and phone
sizes manually.
