Mobile Zone is brought to you in partnership with:

Den is a DZone Zone Leader and has posted 460 posts at DZone. You can read more from them at their website. View Full User Profile

Pre-defined system styles and resources in Windows Phone 7

11.01.2010
| 45365 views |
  • submit to reddit

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



Key:
PhoneFontSizeLarge
Double value: 32
Point value: 24pt



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



Key:
PhoneFontSizeExtraExtraLarge
Double value: 72
Point value: 54pt

TextBlock Styles

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



Key: PhoneTextTitle1Style
FontFamily:
PhoneFontFamilySemiLight
FontSize:
PhoneFontSizeExtraExtraLarge
Foreground:
PhoneForegroundBrush



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.