Theme Resources for Windows Phone
March 23, 2012
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 Theme Overview for Windows Phone. |
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
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 Expression Blend for Windows Phone to preview text styles before applying it to an object. For more information, see Expression Blend for Windows Phone Overview. |
|
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 |
