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:

  1. Brush Resources

  2. Color Resources

  3. Font Names

  4. Thickness

  5. Font Sizes

  6. Text Styles

  7. 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