Did you know? DZone has great portals for Python, Cloud, NoSQL, and HTML5!
Windows Phone Zone is brought to you in partnership with:

Den works on awesome stuff. He is a sophomore in college, a Microsoft MVP, a Microsoft Student Insider, a technical writer for DZone and a contributing author for Coding4Fun on Channel9. He is maintaining a number of open-source projects on CodePlex and GitHub. Den is a DZone Zone Leader and has posted 388 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
Email
Views: 12062
  • submit to reddit
It's so easy to get up and running with your first Windows Phone app!  Just pick up the FREE toolkit from Microsoft, register at AppHub, and start checking out some fundamental tutorials.

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.

(Note: Opinions expressed in this article and its replies are the opinions of their respective authors and not those of DZone, Inc.)

The Windows Phone Microzone, which is supported by Microsoft, is your one-stop-shop for news, tutorials, perspectives, and research on the mobile platform that is making waves in smartphone ecosystem.