Change the size of the timelines' period header

This help topic will demonstrate how to change the size of the RadTimeline' period header.

The period header zone can be customized by using PeriodHeaderStyle property of the RadTimeline. This accept a Style targeting a native Border element that is used for drawing the period header.

You can use a custom Style to customize the period header. The following example demonstrates this approach. First we are going to declare our RadTimeline control.

Example 1: Declare RadTimeline control

<telerik:RadTimeline PeriodStart="2019-2-24" PeriodEnd="2020-2-24" Height="200"> 
    <telerik:RadTimeline.Intervals> 
        <telerik:YearInterval /> 
        <telerik:QuarterInterval /> 
        <telerik:MonthInterval /> 
        <telerik:WeekInterval /> 
        <telerik:DayInterval /> 
    </telerik:RadTimeline.Intervals> 
</telerik:RadTimeline> 

Now to increase the size of the period header, we can create custom style targeting Border element and set its Height property to custom value.

Example 2: Customize the Period Header

<telerik:RadTimeline PeriodStart="2019-2-24" 
                    PeriodEnd="2020-2-24"  
                    Height="200"> 
    <telerik:RadTimeline.PeriodHeaderStyle> 
        <Style TargetType="Border"> 
            <Setter Property="VerticalAlignment" Value="Top"/> 
            <Setter Property="BorderBrush" Value="Bisque" /> 
            <Setter Property="BorderThickness" Value="2" /> 
            <Setter Property="Height" Value="50" /> 
        </Style> 
    </telerik:RadTimeline.PeriodHeaderStyle> 
    <telerik:RadTimeline.Intervals> 
        <telerik:YearInterval /> 
        <telerik:QuarterInterval /> 
        <telerik:MonthInterval /> 
        <telerik:WeekInterval /> 
        <telerik:DayInterval /> 
    </telerik:RadTimeline.Intervals> 
</telerik:RadTimeline> 

In a scenario when you have applied grouping, you have to keep in mind that when you change the height of the period header, you will also need to update the padding of the TimelineItemGroupsPanel element. Otherwise, the first group will be overlapped by the period header Border element.

To update the padding of the TimelineItemGroupsPanel element, we can create a custom implicit style. Example 2 demonstrates this:

Example 3: Update Padding of the TimelineItemGroupsPanel

<Window.Resources> 
    <Style TargetType="telerik:TimelineItemContainer" > 
        <Setter Property="ItemsPanel"> 
            <Setter.Value> 
                <ItemsPanelTemplate> 
                    <telerik:TimelineItemGroupsPanel Padding="0 70 0 5" /> 
                </ItemsPanelTemplate> 
            </Setter.Value> 
        </Setter> 
    </Style> 
</Window.Resources> 

See Also

• Overview
• Properties
• DataBinding
• SDK Examples