Applying Styles
Let's say that you have multiple TextBox controls in your application that have a common set of property values, which often will specify the formatting applied to the control, like so:
<TextBox Background="LemonChiffon" Foreground="Brown" FontWeight="Bold" />
Instead of applying these same common property values on each control individually, ideally you would define the property values once in a group, as a resource, and then point the controls that you want to use those values to that resource.
Note If you've worked on some web-based projects previously, you might like to think of styles as a type of CSS for XAML.
The difference between the resource value method discussed earlier (where you could define a property value as a resource and reuse it) and styles is that the value stored as a resource was only a single value, whereas styles allow you to group a common set of property values and apply them all to a control in one hit. A disadvantage of styles, though, is that the value stored as a resource can be applied to any property of any control, whereas a style must specify what control it applies to and can be applied only to that control.
By removing the need to set property values on each control as they are used, styles enable you to simplify your XAML, make your XAML more maintainable by allowing you to make changes in one place (on the style), have those changes automatically flow through to all the controls that reference that style, and enable you to maintain consistency across the look of all you controls.
Let's now look at how you define and use styles.
Defining a Style Resource
Styles are defined as resources. To use a style, you must define it as a resource on a control somewhere higher up in the object hierarchy. Let's say the values of the Background, Foreground, and FontWeight properties on the TextBox in our previous example are used by multiple text boxes in our application. We can define these property values in a style, like so:
<UserControl.Resources>
<Style TargetType="TextBox" x:Key="TextBoxStyle">
<Setter Property="Background" Value="LemonChiffon" />
<Setter Property="Foreground" Value="Brown" />
<Setter Property="FontWeight" Value="Bold" />
</Style>
</UserControl.Resources>
This style has been defined on the Resource property of the UserControl, using property element syntax, as discussed earlier in this chapter. Note that the type of control that the style can be applied to is specified using the TargetType property of the style (this is mandatory). We also assign the style resource a key using x:Key—the controls we want to apply it to can reference it by this key. Then, it's a case of creating a Setter element for each property you want to define a value for, providing it the name of the property and its corresponding value.
Applying the Style to a Control
You can then apply this style to each control that should use it using the StaticResource markup extension and the resource key assigned to the style:
<TextBox Style="{StaticResource TextBoxStyle}" />
This example explicitly applies the style to the control by assigning the style resource to its Style property, but Silverlight 4 introduced the ability to implicitly apply a style to controls instead. Implicit styling enables you to create a style and have it automatically applied to all controls matching the style's TargetType. Using an implicit style makes adding a theme to your application a lot easier and reduces the verbosity of your XAML. The downside is that implicit styling doesn't allow you to selectively apply the style to given controls matching the TargetType. Implicit styles are identical to explicit styles, except you omit the resource key when defining the style resource. This style will then be automatically used by all controls matching the style's TargetType (those lower in the object hierarchy than the style resource definition), without their Style properties needing to be set.
Note Explicit and implicit styles will be discussed in detail in Chapter 9.