Adding a Control Header

Many of the Toolkit controls allow you to customize the title text displayed above the control using a Header property. In addition, the HeaderTemplate property allows you to customize how the Header content is displayed. The following example provides a custom header template for a TimePicker:

Click here to view code image

<toolkit:TimePicker Value="{Binding Time, Mode=TwoWay}"
        Header="time">
    <toolkit:TimePicker.HeaderTemplate>
        <DataTemplate>
            <Border BorderThickness="2" BorderBrush="Yellow" Padding="10">
                <TextBlock Text="{Binding}" />
            </Border>
        </DataTemplate>
    </toolkit:TimePicker.HeaderTemplate>
</toolkit:TimePicker>

The DataTemplate places the Header text in a TextBlock, which is wrapped in a yellow border (see Figure 9.17).

FIGURE 9.17 TimePicker with a custom HeaderTemplate.