Theme resources for Windows Phone
[ This article is for Windows Phone 8 developers. If you’re developing for Windows 10, see the latest documentation. ]
Windows Phone uses a resource dictionary for theme resources, a keyed dictionary of objects that can be used both in XAML and in code. This section provides information about the theme-specific properties that are available in the Windows Phone resource dictionary. Your application can access the properties that are disclosed here and bind them to controls using XAML code. At run time, these resources are added to the application.
Note
The particular values that are assigned to theme resources may depend on the accent and background colors that the end user has chosen for their device. For information about where these values are specified and what happens when another theme is selected, see Themes for Windows Phone.
Theme resources
The following tables list and define the theme properties that are available in Windows Phone. 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 information about how to bind these resources to controls, see How to apply theme resources for Windows Phone.
This topic covers the following theme properties:
Brush Resources
Color Resources
Font Names
Thickness
Font Sizes
Text Styles
Theme Visibility and Opacity
Brush resources
This table lists and describes the various brushes that can be applied.
Name |
Type |
Description |
|---|---|---|
PhoneAccentBrush |
SolidColorBrush |
Foreground color to single-out items of interest |
PhoneForegroundBrush |
SolidColorBrush |
Default foreground and border color |
PhoneBackgroundBrush |
SolidColorBrush |
Default background for pages and other controls |
PhoneContrastBackgroundBrush |
SolidColorBrush |
Background for contrasting elements |
PhoneContrastForegroundBrush |
SolidColorBrush |
Foreground for contrasting elements |
PhoneDisabledBrush |
SolidColorBrush |
Disabled foreground and color |
PhoneSubtleBrush |
SolidColorBrush |
Subtle foreground and border |
TransparentBrush |
SolidColorBrush |
100% transparent brush used for background and touch targets |
PhoneSemitransparentBrush |
SolidColorBrush |
Partially transparent background brush used to provide contrast against image backgrounds |
PhoneChromeBrush |
SolidColorBrush |
Used to match the application bar color |
TextBox Brushes
Name |
Type |
Description |
|---|---|---|
PhoneTextBoxBrush |
SolidColorBrush |
Brush for the TextBox control |
PhoneTextCaretBrush |
SolidColorBrush |
Brush for the caret in the TextBox |
PhoneTextBoxForegroundBrush |
SolidColorBrush |
Brush for the TextBox control foreground |
PhoneTextBoxEditBackgroundBrush |
SolidColorBrush |
Brush for the TextBox control edit background |
PhoneTextBoxEditBorderBrush |
SolidColorBrush |
Brush for the TextBox control edit border |
PhoneTextBoxReadOnlyBrush |
SolidColorBrush |
Brush for the TextBox control read-only state. |
PhoneTextBoxSelectionForegroundBrush |
SolidColorBrush |
Brush for the TextBox control selection foreground |
RadioButton and CheckBox Brushes
Name |
Type |
Description |
|---|---|---|
PhoneRadioCheckBoxBrush |
SolidColorBrush |
Brush for the RadioButton and CheckBox |
PhoneRadioCheckBoxDisabledBrush |
SolidColorBrush |
Brush for disabled RadioButton and CheckBox state |
PhoneRadioCheckBoxCheckBrush |
SolidColorBrush |
Brush for the CheckBox check |
PhoneRadioCheckBoxCheckDisabledBrush |
SolidColorBrush |
Brush for the disabled CheckBox check |
PhoneRadioCheckBoxPressedBrush |
SolidColorBrush |
Brush for the RadioButton and CheckBox pressed state |
PhoneRadioCheckBoxPressedBorderBrush |
SolidColorBrush |
Brush for the RadioButton and CheckBox pressed state |
Color Resources
This table lists and describes the various colors that can be applied through the brush resources.
Note
You should try to use the brush resources instead of using or modifying colors directly. The reason is that you can modify brush values but not colors in your application.
Name |
Type |
Description |
|---|---|---|
PhoneBackgroundColor |
Color |
Default background for pages and other controls |
PhoneForegroundColor |
Color |
Default foreground and border color |
PhoneDisabledColor |
Color |
Disabled foreground and color |
PhoneSubtleColor |
Color |
Subtle foreground and border |
PhoneAccentColor |
Color |
Foreground color to single-out items of interest |
PhoneContrastBackgroundColor |
Color |
Background for contrasting elements |
PhoneContrastForegroundColor |
Color |
Foreground for contrasting elements |
PhoneChromeColor |
Color |
Color of the status bar and application bar |
PhoneSemitransparentColor |
Color |
Partially transparent color used to provide contrast against image backgrounds |
TextBox Colors
Name |
Type |
Description |
|---|---|---|
PhoneTextBoxColor |
Color |
Color for the TextBox control |
PhoneTextCaretColor |
Color |
Color for the caret in the TextBox |
PhoneTextBoxForegroundColor |
Color |
Color for the TextBox control foreground |
PhoneTextBoxEditBackgroundColor |
Color |
Color for the TextBox control edit background |
PhoneTextBoxEditBorderColor |
Color |
Color for the TextBox control edit border |
PhoneTextBoxReadOnlyColor |
Color |
Color for the TextBox control read-only state. |
PhoneTextBoxSelectionForegroundColor |
Color |
Color for the TextBox control selection foreground |
RadioButton and CheckBox Colors
Name |
Type |
Description |
|---|---|---|
PhoneRadioCheckBoxColor |
Color |
Color for the RadioButton and CheckBox |
PhoneRadioCheckBoxDisabledColor |
Color |
Color for disabled RadioButton and CheckBox state |
PhoneRadioCheckBoxCheckColor |
Color |
Color for the CheckBox check |
PhoneRadioCheckBoxCheckDisabledColor |
Color |
Color for the disabled CheckBox check |
PhoneRadioCheckBoxPressedColor |
Color |
Color for the RadioButton and CheckBox pressed state |
PhoneRadioCheckBoxPressedBorderColor |
Color |
Color for the RadioButton and CheckBox pressed state |
Font Names
This table lists and describes the various font names that can be applied. Attribute = FontFamily
Name |
Type |
Value |
|---|---|---|
PhoneFontFamilyNormal |
Font Family |
Segoe WP |
PhoneFontFamilyLight |
Font Family |
Segoe WP Light |
PhoneFontFamilySemiLight |
Font Family |
Segoe WP Semilight |
PhoneFontFamilySemiBold |
Font Family |
Segoe WP Semibold |
Thickness
This table lists and describes the thickness that can be applied to UI elements. Attribute = BorderThickness, Margin, Padding
Name |
Type |
Value |
|---|---|---|
PhoneHorizontalMargin |
BorderThickness, Margin, Padding |
12, 0 |
PhoneVerticalMargin |
BorderThickness, Margin, Padding |
0, 12 |
PhoneMargin |
BorderThickness, Margin, Padding |
12 |
PhoneTouchTargetOverhang |
BorderThickness, Margin, Padding |
12 |
PhoneTouchTargetLargeOverhang |
BorderThickness, Margin, Padding |
12, 20 |
PhoneTextBoxInnerMargin |
BorderThickness, Margin, Padding |
1,2 |
PhonePasswordBoxInnerMargin |
BorderThickness, Margin, Padding |
3,2 |
PhoneBorderThickness |
BorderThickness, Margin, Padding |
3 |
PhoneStrokeThickness |
BorderThickness, Margin, Padding |
3 |
Font sizes
This table lists and describes the various font sizes that can be applied. Attribute = FontSize
Name |
Type |
Description |
|---|---|---|
PhoneFontSizeSmall |
Double |
18.667 |
PhoneFontSizeNormal |
Double |
20 |
PhoneFontSizeMedium |
Double |
22.667 |
PhoneFontSizeMediumLarge |
Double |
25.333 |
PhoneFontSizeLarge |
Double |
32 |
PhoneFontSizeExtraLarge |
Double |
42.667 |
PhoneFontSizeExtraExtraLarge |
Double |
72 |
PhoneFontSizeHuge |
Double |
186.667 |
Text styles
The following table offers a selection of text styles that you can apply to a TextBlock control. Attribute = Style.
Tip
You can use Blend for Visual Studio to preview text styles before applying them to an object. For more information, see Blend for Visual Studio 2012.
Name |
Applies to: |
Type |
Description |
|---|---|---|---|
PhoneTextBlockBase |
TextBlock |
Style |
FontFamily: PhoneFontFamilyNormal FontSize: PhoneFontSizeNormal Foreground: PhoneForegroundBrush Margin: PhoneHorizontalMargin |
PhoneTextNormalStyle |
TextBlock |
Style |
BasedOn: PhoneTextBlockBase |
PhoneTextSubtleStyle |
TextBlock |
Style |
BasedOn: PhoneTextBlockBase Foreground: PhoneSubtleBrush |
PhoneTextTitle1Style |
TextBlock |
Style |
BasedOn: PhoneTextBlockBase FontFamily: PhoneFontFamilySemiLight FontSize: PhoneFontSizeExtraExtraLarge |
PhoneTextTitle2Style |
TextBlock |
Style |
BasedOn: PhoneTextBlockBase FontFamily:PhoneFontFamilySemiLight FontSize: PhoneFontSizeLarge |
PhoneTextTitle3Style |
TextBlock |
Style |
BasedOn: PhoneTextBlockBase FontFamily: PhoneFontFamilySemiLight FontSize: PhoneFontSizeMedium |
PhoneTextSmallStyle |
TextBlock |
Style |
BasedOn: PhoneTextBlockBase FontSize: PhoneFontSizeSmall Foreground: PhoneSubtleBrush |
PhoneTextLargeStyle |
TextBlock |
Style |
BasedOn: PhoneTextBlockBase FontFamily: PhoneFontFamilySemiLight FontSize: PhoneFontSizeLarge |
PhoneTextExtraLargeStyle |
TextBlock |
Style |
BasedOn: PhoneTextBlockBase FontFamily: PhoneFontFamilySemiLight FontSize: PhoneFontSizeExtraLarge |
PhoneTextGroupHeaderStyle |
TextBlock |
Style |
BasedOn: PhoneTextBlockBase FontFamily: PhoneFontFamilySemiLight FontSize: PhoneFontSizeLarge Foreground: PhoneSubtleBrush |
PhoneTextContrastStyle |
TextBlock |
Style |
BasedOn: PhoneTextBlockBase FontFamily: PhoneFontFamilySemiBold Foreground: PhoneContrastForegroundBrush |
PhoneTextAccentStyle |
TextBlock |
Style |
BasedOn: PhoneTextBlockBase FontFamily: PhoneFontFamilySemiBold Foreground: PhoneAccentBrush |
PhoneTextHugeStyle |
TextBlock |
Style |
BasedOn: PhoneTextBlockBase FontFamily: PhoneFontFamilyLight FontSize: PhoneFontSizeHuge |
Theme visibility and opacity
There are also resources available to adjust the visibility and opacity of the dark and light theme backgrounds:
Visibility
Name |
Type |
Description |
|---|---|---|
PhoneDarkThemeVisibility |
Visibility |
Visible in dark theme and collapsed in the light theme |
PhoneLightThemeVisibility |
Visibility |
Visible in light theme and collapsed in the dark theme |
Opacity
Name |
Type |
Description |
|---|---|---|
PhoneDarkThemeOpacity |
Double |
1 in the dark theme, 0 in the light theme |
PhoneLightThemeOpacity |
Double |
0 in the dark theme, 1 in the light theme |