Programming WPF, 2nd Edition

Control Templates

In addition to changing a control's look by manipulating properties, you can replace it with something completely different by setting a control's Template property.

In Example 1-35, we've decided that our Add button is a yellow ellipse, as shown in Figure 1-19.

Example 1-35. Replacing a control's look completely with a control template

<Button DockPanel.Dock="Bottom" x:Name="addButton" Content="Add">
  <Button.Template>
    <ControlTemplate TargetType="{x:Type Button}">
      <Grid>
        <Ellipse Width="128" Height="32" Fill="Yellow" Stroke="Black" />
        <ContentPresenter
          VerticalAlignment="Center" HorizontalAlignment="Center" />
      </Grid>
     </ControlTemplate>
  </Button.Template>
</Button>

Figure 1-19. A yellow ellipse button

The template of a control in WPF is what defines the look, whereas the code defines the behavior. The default template comes from the system-scope resources (as described in Chapter 12), but if you don't like that one, you can replace it with whatever you like, using a content presenter to drop in the content provided by the developer using your control. However, the behavior remains the same (e.g., if you click on the ellipse-shaped button in Figure 1-19, a Click event is still fired). We explore in detail the power of replacing the look of a control in Chapter 9.