Theme Resources for Windows Phone
http://msdn.microsoft.com/en-us/library/ff769552(v=vs.92).aspx
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 |
|
PhoneBorderBrush |
SolidColorBrush |
Border and background of the TextBox, CheckBox, PasswordBox, and RadioButton controls |
|
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 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 |
|
PhoneBorderColor |
Color |
Color used for the border and background of the TextBox, CheckBox, PasswordBox, and RadioButton controls |
|
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 UI |
|
PhoneFontFamilyLight |
Font Family |
Segoe UI Light |
|
PhoneFontFamilySemiLight |
Font Family |
Segoe UI Semilight |
|
PhoneFontFamilySemiBold |
Font Family |
Segoe UI 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 |
|
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 = FontSizes
|
Name |
Type |
Description |
|---|---|---|
|
PhoneFontSizeSmall |
Double |
14 pt |
|
PhoneFontSizeNormal |
Double |
15 pt |
|
PhoneFontSizeMedium |
Double |
17 pt |
|
PhoneFontSizeMediumLarge |
Double |
19 pt |
|
PhoneFontSizeLarge |
Double |
24 pt |
|
PhoneFontSizeExtraLarge |
Double |
32 pt |
|
PhoneFontSizeExtraExtraLarge |
Double |
54 pt |
|
PhoneFontSizeHuge |
Double |
140 pt |
Text Styles
The following table offers a selection of text styles that you can apply to a TextBlock control. Attribute = Style.
|
Name |
Applies to: |
Type |
Description |
|---|---|---|---|
|
PhoneTextBlockBase |
TextBlock |
Style |
FontFamily: PhoneFontFamilyNormal FontSize: PhoneFontSizeSmall Foreground: PhoneTextBoxBrush Margin: PhoneHorizontalMargin |
|
PhoneTextNormalStyle |
TextBlock |
Style |
FontFamily: PhoneFontFamilyNormal FontSize: PhoneFontSizeNormal Foreground: PhoneForegroundBrush |
|
PhoneTextTitle1Style |
TextBlock |
Style |
FontFamily: PhoneFontFamilySemiLight FontSize: PhoneFontSizeExtraExtraLarge Foreground: PhoneForegroundBrush |
|
PhoneTextTitle2Style |
TextBlock |
Style |
FontFamily: PhoneFontFamilySemiLight FontSize: PhoneFontSizeLarge Foreground: PhoneForegroundBrush |
|
PhoneTextTitle3Style |
TextBlock |
Style |
FontFamily: PhoneFontFamilySemiLight FontSize: PhoneFontSizeMedium Foreground: PhoneForegroundBrush |
|
PhoneTextLargeStyle |
TextBlock |
Style |
FontFamily: PhoneFontFamilySemiLight FontSize: PhoneFontSizeLarge Foreground: PhoneForegroundBrush |
|
PhoneTextExtraLargeStyle |
TextBlock |
Style |
FontFamily: PhoneFontFamilySemiLight FontSize: PhoneFontSizeExtraLarge Foreground: PhoneForegroundBrush |
|
PhoneTextGroupHeaderStyle |
TextBlock |
Style |
FontFamily: PhoneFontFamilySemiLight FontSize: PhoneFontSizeLarge Foreground: PhoneSubtleBrush |
|
PhoneTextSmallStyle |
TextBlock |
Style |
FontFamily: PhoneFontFamilyNormal FontSize: PhoneFontSizeSmall Foreground: PhoneSubtleBrush |
|
PhoneTextContrastStyle |
TextBlock |
Style |
FontFamily: PhoneFontFamilySemiBold FontSize: PhoneFontSizeNormal Foreground: PhoneContrastForegroundBrush |
|
PhoneTextAccentStyle |
TextBlock |
Style |
FontFamily: PhoneFontFamilySemiBold FontSize: PhoneFontSizeNormal Foreground: PhoneAccentBrush |
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 |
Visibility in dark theme and collapsed in the light theme |
|
PhoneLightThemeVisibility |
Visibility |
Visibility 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 |