Edit this page

Header Template

In RadTimePicker it is possible to customize the built-in text and template of the Header and HeaderTemplate.

The next example will demonstrate the necessary steps in order to customize the Header and HeaderTemplate of the RadTimePicker control.

  1. First you will need to declare a Style that targets RadClock:

    XAML

    <Style x:Key="RadClockStyle" TargetType="telerik:RadClock" >
    
    </Style>
    
  2. Next you will need to set the Header property of the newly declared Style:

    XAML

    <Style x:Key="RadClockStyle1" TargetType="telerik:RadClock" >
        <Setter Property="Header" Value="Custom Header and HeaderTemplate"/>
    </Style>
    
  3. After that you will need to set the HeaderTemplate:

    XAML

    <Style x:Key="RadClockStyle2" TargetType="telerik:RadClock" >
        <Setter Property="Header" Value="Custom Header and HeaderTemplate"/>
        <Setter Property="HeaderTemplate">
            <Setter.Value>
                <DataTemplate>
                    <Border BorderBrush="White" BorderThickness="1" Margin="3">
                        <TextBlock Text="{Binding}" Margin="5"/>
                    </Border>
                </DataTemplate>
            </Setter.Value>
        </Setter>
    </Style>
    
  4. Finally all you need to do is set the newly created Style to the ClockStyle of the control:

    XAML

    <telerik:RadTimePicker ClockStyle="{StaticResource RadClockStyle}"/>
    

The next screenshot shows the final result:

radtimepicker-header-template-1