{{ !articles[0].partner.isSponsoringArticle ? "Platinum" : "Portal" }} Partner

Pre-defined system styles and resources in Windows Phone 7

Windows Phone 7 is based on the Metro UI and if you develop for this platform, then you probably want your application to be as consistent as possible with the main UI. To achieve this, many developers try guessing font styles and colors. The problem comes when the end-user decides to change some settings, like, for example, the accent color. If the color itself is hard-coded in the application, then chances are that it won’t look nothing like the main UI. So what is the solution? Using pre-defined styles and resources that come bundled with the system is the way to go.

Here is a complete list of what those are, and you can use this article as a cheat-sheet when developing Windows Phone 7 applications.

Color Styles

Key: PhoneBackgroundColor
Default actual value: #FF1F1F1F

Key: PhoneContrastForegroundColor
Default actual value: Black

Key: PhoneForegroundColor
Default actual value: White

Key: PhoneInactiveColor
Default actual value: #FF666666

Key: PhoneDisabledColor
Default actual value: #FF808080

Key: PhoneSubtleColor
Default actual value: #FF999999

Key: PhoneContrastBackgroundColor
Default actual value: #FFFFFFFF

Key: PhoneTextBoxColor
Default actual value: #FFBFBFBF

Key: PhoneBorderColor
Default actual value: #FFCCCCCC

Key: PhoneTextSelectionColor
Default actual value: Black

Key: PhoneAccentColor
Default actual value: #FF1BA1E2

Brush Styles

Key: PhoneAccentBrush
Color:  PhoneAccentColor

Key: PhoneBackgroundBrush
Color:  PhoneBackgroundColor

Key: PhoneContrastForegroundBrush
Color:  PhoneContrastForegroundColor

Key: PhoneForegroundBrush
Color:  PhoneForegroundColor

Key: PhoneInactiveBrush
Color:  PhoneInactiveColor

Key: PhoneDisabledBrush
Color:  PhoneDisabledColor

Key: PhoneSubtleBrush
Color:  PhoneSubtleColor

Key: PhoneContrastBackgroundBrush
Color:  PhoneContrastBackgroundColor

Key: PhoneTextBoxBrush
Color:  PhoneTextBoxColor

Key: PhoneBorderBrush
Color:  PhoneBorderColor

Key: PhoneTextSelectionBrush
Color:  PhoneTextSelectionColor

Key: TransparentBrush
Color: Transparent

Font Families

Key: PhoneFontFamilyNormal
Actual font: Segoe WP

Key: PhoneFontFamilyLight
Actual font: Segoe WP Light

Key: PhoneFontFamilySemiLight
Actual font: Segoe WP Semilight

Key: PhoneFontFamilySemiBold
Actual font: Segoe WP Semibold

Font Sizes

Key: PhoneFontSizeSmall
Double value: 18.667
Point value: 14pt

Key: PhoneFontSizeNormal
Double value: 20
Point value: 15pt

Key: PhoneFontSizeMedium
Double value: 22.667
Point value: 17pt

Key: PhoneFontSizeMediumLarge
Double value: 25.333
Point value: 19pt

Double value: 32
Point value: 24pt

Key: PhoneFontSizeExtraLarge
Double value: 42.667
Point value: 32pt

Double value: 72
Point value: 54pt

TextBlock Styles

Key: PhoneTextNormalStyle
FontFamily: PhoneFontFamilyNormal
FontSize: PhoneFontSizeNormal
Foreground: PhoneForegroundBrush

Key: PhoneTextTitle1Style

Key: PhoneTextSubtleStyle
FontFamily: PhoneFontFamilyNormal
FontSize: StaticResource PhoneFontSizeNormal
Foreground: PhoneSubtleBrush

Key: PhoneTextTitle2Style
FontFamily: PhoneFontFamilySemiLight
FontSize: PhoneFontSizeLarge
Foreground: PhoneForegroundBrush

Key: PhoneTextTitle3Style
FontFamily: StaticResource PhoneFontFamilySemiLight
FontSize: PhoneFontSizeMedium
Foreground: PhoneForegroundBrush

Key: PhoneTextExtraLargeStyle
FontFamily: PhoneFontFamilySemiLight
FontSize: PhoneFontSizeExtraLarge
Foreground: PhoneForegroundBrush

Key: PhoneTextGroupHeaderStyle
FontFamily: PhoneFontFamilySemiLight
FontSize: PhoneFontSizeLarge
Foreground: PhoneSubtleBrush

Key: PhoneTextLargeStyle
FontFamily: PhoneFontFamilySemiLight
FontSize: PhoneFontSizeLarge
Foreground: PhoneForegroundBrush

Key: PhoneTextSmallStyle
FontFamily: PhoneFontFamilyNormal
FontSize: PhoneFontSizeSmall
Foreground: PhoneSubtleBrush

Key: PhoneTextContrastStyle
FontFamily: PhoneFontFamilySemiBold
FontSize: PhoneFontSizeNormal
Foreground: PhoneContrastForegroundBrush

Key: PhoneTextAccentStyle
FontFamily: PhoneFontFamilySemiBold
FontSize: PhoneFontSizeNormal
Foreground: PhoneAccentBrush

You can download the PDF here.

{{ tag }}, {{tag}},

{{ parent.title || parent.header.title}}

{{ parent.tldr }}

{{ parent.urlSource.name }}
{{ parent.authors[0].realName || parent.author}}

{{ parent.authors[0].tagline || parent.tagline }}

{{ parent.views }} ViewsClicks