Jerry Nixon @Work: Mango Sample: Resources Part 4: Styles

Jerry Nixon on Windows

Monday, December 19, 2011

Mango Sample: Resources Part 4: Styles

imageThis is part 4 in the Resource series.

  1. Part 1: Themes
  2. Part 2: Colors
  3. Part 3: Sizes
  4. Part 4: Styles

Can I override the Theme?

No, but read on – this is important. You are the developer of your application. As a result, you are in control. The reason you implement Phone Resources and respond to the current theme is so your application looks like it fits into the phone. Remember we are working against the UNINSTALL button.

Having said that, some applications have no use for Phone Resources. What I mean is, the application you are developing might have very specific UI requirements that trump the introduction or use of Phone Resources. You get to choose.

What Styles are there?

Styles are handy. They incorporate many different styling settings – there’s hardly a limit to what they can include. In many cases, using a style is better than a color or size because:

  1. Styles are simpler to use because there is less to use
  2. Styles often include styling you might otherwise forget
  3. Styles often are based on other styles are are rich/complex

 

The list of styles is below. In them you should see a lot of “BasedOn” syntax. Any XAML element can only have a single style – so BasedOn is used like OOP inheritance to compound styles; but, remember, styles are specific to control types so you can’t mix them up crazy-like.  I discuss BasedOn more here.

So, check out the styles you can use (and note the specific control is part of the name):

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

Here’s how you use Styles:

The Style syntax is just like using any other resource. You just apply it to the Style attribute:

image

Conclusion

As a Windows Phone application developer, the Operating System gives you a lot out of the box. Using the native resources allows you to develop an application that looks like it belongs on the user’s phone. It also helps you to deal with changes in theme and accent colors dynamically and automatically. However, as the developer you always have the power to override any theme. This allows you to meet specific needs, but requires a little more coding in order to adjust to the phone correctly.

The final take-away is to look into Expression Blend. It is included in the SDK. It is a powerful tool in the right hands. And, after you break the initial learning curve – you will be considerably faster, better, and stronger.

Best of luck!