Styles and Control Templates

One of the major uses for Resources is for styles . A style is a set of property/value pairs to be applied to one or more elements. For example, recall the two TextBlock controls from our Nickname sample, each of which was set to the same VerticalAlignment (see Example 1-35).

Example 1-35. Multiple TextBlock controls with the same settings

<!-- Window1.xaml -->
<Window ...>
  <DockPanel ...>
    <StackPanel ...>
      <TextBlock VerticalAlignment="Center">Name: </TextBlock>

      <TextBox Text="{Binding Path=Name}" />
      <TextBlock VerticalAlignment="Center">Nick: </TextBlock>
      <TextBox Text="{Binding Path=Nick}" />
    </StackPanel>
    ...
  </DockPanel>

</Window>

If we wanted to bundle the VerticalAlignment setting into a style, we could do this with a Style element in a Resources block, as shown in Example 1-36.

Example 1-36. An example TextBlock style

<Window ...>
  <Window.Resources>
    <Style x:Key="myStyle" TargetType="{x:Type TextBlock}">
      <Setter Property="VerticalAlignment" Value="Center" />
      <Setter Property="FontWeight" Value="Bold" />

      <Setter Property="FontStyle" Value="Italic" />
    </Style>
  </Window.Resources>
  <DockPanel ...>
    <StackPanel ...>
      <TextBlock Style="{StaticResource myStyle}">Name: </TextBlock>

      <TextBox Text="{Binding Path=Name}" />
      <TextBlock Style="{StaticResource myStyle}">Nick: </TextBlock>
      <TextBox Text="{Binding Path=Nick}" />
    </StackPanel>
    ...
  </DockPanel>

</Window>

The style element is really just a named collection of Setter elements for a specific class (specified with the Type markup extension). The TextBlock myStyle style centers the vertical alignment property and, just for fun, sets the text to bold italic as well. With the style in place, it can be used to set the Style property of any TextBlock that references the style resource. Applying this style as in Example 1-36 yields Figure 1-18.

Figure 1-18. Named style in action on two TextBlock controls

Notice that only two of the TextBlock controls we used in this example use our style, because we only applied it to two TextBlock controls. If we want to take the next step and apply this style to all TextBlock controls defined in the scope of the style definition, we can do so by specifying the target type without specifying a key, as in Example 1-37.

Example 1-37. Styles assigned based on type

<Window ...>
  <Window.Resources>
    <Style TargetType="{x:Type TextBlock}">
      <Setter Property="VerticalAlignment" Value="Center" />
      <Setter Property="FontWeight" Value="Bold" />

      <Setter Property="FontStyle" Value="Italic" />
    </Style>
  </Window.Resources>
  <DockPanel ...>
    <StackPanel ...>
      <TextBlock>Name: </TextBlock>

      <TextBox Text="{Binding Path=Name}" />
      <TextBlock>Nick: </TextBlock>
      <TextBox Text="{Binding Path=Nick}" />
    </StackPanel>
    ...
  </DockPanel>

</Window>

In Example 1-37, we've dropped the x:Key attribute while leaving the TargetType property set. The use of just TargetType applies the style to all elements of that type, which means that we can also drop any mention of style on the individual TextBlock elements. Figure 1-19 shows the results.

Figure 1-19. A type-based style applied to TextBlock controls

In addition to setting styles on controls, you can set them on arbitrary types (like the Nickname object we defined earlier) or replace a control's entire look, both of which you can read about in Chapter 5.

Further, if you'd like to apply property changes over time, you can do so with styles that include animation information, which is discussed in Chapter 8 (although Figure 1-20 is a small taste of what WPF animations can produce).

Figure 1-20. Buttons with animated glow (Color Plate 1)