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>
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>