Control Templates

A Style can set just about any property of an element. The examples in the Style section show rather prosaic properties affecting fonts and such. However, a Style for a ListBox could set the ItemTemplate property to a particular DataTemplate, which has more dramatic effects.

For controls, a Style can also set a very important property named Template. That property points to a control template, which determines the visualization of the control.

“Lookless” Controls

In XAML, the behavior of a control, that is, how it responds to user actions in code, is completely separate from the way the control is rendered. In fact, the code for a control normally doesn't contain any information about how the control is rendered at all. The control's rendering is specified by a control template.

Control authors include a default control template in controls. That way, when the control is placed in a XAML page, a default rendering is in place, and the control can be seen and used.

However, that rendering is just the default. The control template can be changed. The new template can make the control look radically different, using any of the visual elements available in XAML.

Reskinning a CheckBox

Suppose you want a CheckBox to control whether a microphone is turned on or off. You could just drag over a CheckBox and be done with it, and from a functional perspective, that would work. However, usability would be significantly enhanced if you could make the CheckBox indicate its function visually.

You can do that with a control template. Let's create a CheckBox with a control template that will make the CheckBox look like a microphone. Figure 12.18 shows our reskinned CheckBox, in both unchecked and checked states. On the left is the unchecked state. On the right is the checked state. The top of the microphone is maroon in the checked state. The rendering is the same on Windows 8 and WPF if the background is the same.

Figure 12.18 A CheckBox reskinned with a control template to look like a microphone

Here is the XAML for the CheckBox (code file: MicrophoneCheckBox.xaml):

<CheckBox IsChecked="True" Height="120" Width="40">
    <CheckBox.Template>
        <ControlTemplate TargetType="CheckBox">
            <Grid>
                <Grid.RowDefinitions>
                    <RowDefinition />
                    <RowDefinition />
                    <RowDefinition />
                </Grid.RowDefinitions>
                <Grid >
                    <Grid.RowDefinitions>
                        <RowDefinition />
                        <RowDefinition />
                    </Grid.RowDefinitions>
                    <Ellipse Grid.RowSpan="2" Fill="Gray" />
                    <Ellipse Grid.RowSpan="2" Fill="Maroon"
                             Visibility="{Binding RelativeSource={RelativeSource
                             TemplatedParent}, Path=IsChecked, 
                             Converter={StaticResource B2VConverter}}" />
                                
                    <Rectangle Grid.Row="1" Fill="Gray" />
                    
                </Grid>
                <Rectangle Grid.Row="1" Fill="Black" />
                <Grid Grid.Row="2" >
                    <Grid.RowDefinitions>
                        <RowDefinition />
                        <RowDefinition />
                    </Grid.RowDefinitions>
                    <Grid.ColumnDefinitions >
                        <ColumnDefinition />
                        <ColumnDefinition />
                        <ColumnDefinition />
                    </Grid.ColumnDefinitions>
                    <Rectangle Grid.Column="1" Fill="Black" />
                    <Rectangle Grid.Row="1" Grid.ColumnSpan="3" Fill="Black" />
                </Grid>
            </Grid>
        </ControlTemplate>
    </CheckBox.Template>
</CheckBox>

This XAML may look a bit complex at first, but you have seen all the techniques it uses in this chapter. The root of the control template is a Grid with three rows. In the first row, another Grid contains two circles and a rectangle.

One of the circles is Maroon, and its visibility is tied to the control's IsChecked property by a data binding. That binding requires a converter for changing a Boolean to a Visibility value, and you saw such a converter in the section on data templates. When the CheckBox is clicked, the IsSelected property changes, and the binding ties that change to a change in the visibility of the Maroon circle.

In the second row, another rectangle extends the “microphone” down a bit further. Then, in the third row, a Grid with some Rectangle elements draw a “base” for the “microphone.”

This control template works equally well in Windows 8, and it can be resized. The interior elements will change size proportionally, because the control template is based on Grid elements with proportional rows.

Creating Control Templates

It is beyond the scope of this chapter to get into several other concepts and techniques commonly used for control templates. The main area that's being left out is the use of visual states to change the control's appearance under various circumstances. XAML contains a VisualStateManager for that capability. The preferred tool for working with the VisualStateManager is Expression Blend.