Theme Overview for Windows Phone
March 23, 2012
A theme is a set of resources used to personalize the visual elements on a Windows Phone. You can create applications that preserve the look and feel of the native device user interface (UI) from a stylistic standpoint. These style properties include background colors and accent colors. A theme ensures that the controls and UI elements appear consistently across Windows Phone devices.
This feature enables developers to:
-
Build applications and access the themed properties directly in their code.
-
Explicitly change the value of any themed property to match its own branding requirements.
Note:
|
|---|
|
Windows Phone themes are completely unrelated to themes in Silverlight or in Windows Presentation Foundation (WPF). Windows Phone themes are device themes and not application themes. |
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.
Important Note:
|
|---|
|
When developing your application, it is important to consider Windows Phone Marketplace technical certification requirements. For requirements related to themes, see section 5.5 in Technical Certification Requirements. |
Supported Themes
A Windows Phone theme is a combination of a background and an accent color. The background color is the color of the background, and the accent color is the color that is applied to controls and other visual elements. There are two options for background, Dark and Light, and a total of 10 standard accent colors that can be applied to your application.
The following table lists the 10 standard accent colors and their corresponding color values in red, green, blue (RGB) and hexadecimal (Hex).
|
Accent Color |
RGB |
Hex |
Example |
|---|---|---|---|
|
blue |
27,161,226 |
#FF1BA1E2 |
|
|
brown |
160,80,0 |
#FFA05000 |
|
|
green |
51,153,51 |
#FF339933 |
|
|
lime |
162,193,57 |
#FFA2C139 |
|
|
magenta |
216,0,115 |
#FFD80073 |
|
|
mango (orange) |
240,150,9 |
#FFF09609 |
|
|
pink |
230,113,184 |
#FFE671B8 |
|
|
purple |
162,0,255 |
#FFA200FF |
|
|
red |
229,20,0 |
#FFE51400 |
|
|
teal (viridian) |
0,171,169 |
#FF00ABA9 |
|
|
Note:
|
|---|
|
The values for the Lime and Magenta accent colors changed in Windows Phone OS 7.1. In Windows Phone OS 7.0, the accent colors for Lime and Magenta were #FF8CBF26 and #FFFF0097, respectively. In Windows Phone OS 7.1, the accent colors for Lime and Magenta are #FFA2C139 and #FFD80073, respectively. |
There is also an eleventh accent color that the mobile operator or hardware manufacturer can add to the phone. Your application should be aware of this extra color and not make assumptions on just the 10 system-wide colors. For example, do not have code that checks for the standard 10 accent colors and then performs a specific operation. If an eleventh color is present, it can break your code.
When Another Theme is Selected
Themes are specified in the Settings app by tapping Theme. When a user enables a theme, the changes are applied system-wide as well as for applications. When another theme is selected, only the theme-related colors in an application change. Other elements such as fonts or control sizing will not change dynamically. However, you can use other Windows Phone theme resources to change properties such as fonts and font sizes.
|
Note:
|
|---|
|
If your application is dormant when another theme is selected, your application will not adapt to the new theme until the next time it is started. |
The following image illustrates an application that has an assortment of different themes applied.
In this image, a single application is highlighted with the background switching between the Dark and Light options. Also, accent colors of Brown, Blue, and Purple are enabled, respectively.
Theme Resource Files
Depending on the accent and background color chosen by the end user, theme resources will display different control colors, brushes, and styles. These differences are specified in the theme resource file, named ThemeResources.xaml. There is a different resource file for each combination of accent and background. For a listing of the various resources affected by themes, see Theme Resources for Windows Phone.
Theme resource files are found in the following paths:
-
64-bit Operating Systems: C:\Program Files (x86)\Microsoft SDKs\Windows Phone\v7.1\Design
-
32-bit Operating Systems: C:\Program Files\Microsoft SDKs\Windows Phone\v7.1\Design
|
Note:
|
|---|
|
These paths assume a default installation of Visual Studio. If you installed it in a different location, find the theme resource files in the corresponding location. |
Implementation
For your application, theming is implemented using resources and resource dictionaries. These resources are injected into the runtime at application startup. They can be applied in the designer using the control properties, or through XAML using the {StaticResource} markup extension. The latter provides a value for any XAML property attribute by evaluating a reference to an already defined resource. For more information about the different Windows Phone theme resources and how to configure them in your application, see the following topics:
