Mango Sample: Resources Part 4: Styles

This 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:

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!