5.4. Element-Typed Styles

Named styles are useful when you've got a set of properties to be applied to specific elements. However, if you'd like to apply a style uniformly to all instances of a certain type of element, set the TargetType without a Key, as in Example 5-16.

Example 5-16. Element-typed styles

...
<!-- no Key -->
<Style TargetType="{x:Type Button}">

  <Setter Property="FontSize" Value="32" />
  <Setter Property="FontWeight" Value="Bold" />
</Style>
<!-- no Key -->
<Style TargetType="{x:Type TextBlock}">
  <Setter Property="FontSize" Value="32" />
  <Setter Property="FontWeight" Value="Thin" />

  <Setter Property="Foreground" Value="White" />
  <Setter Property="HorizontalAlignment" Value="Center" />
</Style>
...
<Button Grid.Row="0" Grid.Column="0" x:ID="cell00" />
...
<TextBlock Grid.Row="5" Grid.ColumnSpan="5" x:ID="statusTextBlock" />
...

In Example 5-16, we've got two styles, one with a TargetType of Button and no Key and another with a TargetType of TextBlock and no Key. Both work in the same way; when an instance of Button or TextBlock is created without an explicit Style attribute setting, it uses the style that matches the target type of the style to the type of the control. Our element-typed styles return our game to looking like Figure 5-4 again.

Element-typed styles are handy whenever you'd like all instances of a certain element to share a look, depending on the scope. For example, we've scoped the styles in our sample thus far at the top-level Window in Example 5-17.

Example 5-17. Styles scoped to the Window

<!-- Window1.xaml -->
<Window ...>
  <!-- every Button or TextBlock in the Window is affected -->
  <Window.Resources>

    <Style TargetType="{x:Type Button}">...</Style>
    <Style TargetType="{x:Type TextBlock}">...</Style>
  </Window.Resources>
  ...
</Window>

However, you may want to reduce the scope of an element-typed style. In our sample, it would work just as well to scope the styles inside the grid so that only buttons and text blocks in the grid are affected, as in Example 5-18.

Example 5-18. Styles scoped below the Window

<!-- Window1.xaml -->
<Window ...>
  <Grid ...>

    <!-- only Buttons or TextBlocks in the Grid are affected -->
    <Grid.Resources>
      <Style TargetType="{x:Type Button}">...</Style>
      <Style TargetType="{x:Type TextBlock}">...</Style>
    </Grid.Resources>

    ...
  </Grid>
  <!-- Buttons and TextBlocks outside the Grid are unaffected -->
  ...
</Window>

Or, if you want to make your styles have greater reach in your project, you can put them into the application scope, as in Example 5-19.

Example 5-19. Styles scoped to the application

<!-- MyApp.xaml -->
<Application ...>
  <!-- every Button or TextBlock in the Application is affected -->
  <Application.Resources>
    <Style TargetType="{x:Type Button}">...</Style>

    <Style TargetType="{x:Type TextBlock}">...</Style>
  </Application.Resources>
</Application>

In general it's useful to understand the scoping rules of element-typed styles so you can judge their effect on the various pieces of your WPF object model. Chapter 6 discusses resource scoping of all kinds, including styles, in more detail.

Named versus element-typed styles When choosing between styles set by style name or by element type, one of our reviewers said that in his experience, once you get beyond 10 styles based on element type, it was too hard to keep track of where a particular control was getting its style from. This is one reason that I'm a big fan of named styles. To me, a style is a semantic tag that will be applied to content in one place and awarded a visual representation in another. As simple as our tic-tac-toe sample is, we've already got two styles, one for the status text and one for the move cell; before we're done, we're going to have more. The major differentiating factor is going to be the kind of data we'll be showing in these elements, not the type of the element holding the data. In fact, we'll have several styles assigned to TextBox controls, which negates the use of type-based styles anyway, even for this simple application.