Styling the period part

[Jean]

Hi,

I want to modify the height of the period zone and change the font size. (see screenshot).

How can I increase or decrease the size of this part only?

Jean

 

[Martin Ivanov]

Hello  Jean,

In order to achieve your requirement you can use the timeline's PeriodHeaderStyle property.

<telerik:RadTimeline.PeriodHeaderStyle>
    <Style TargetType="Border">
        <Setter Property="VerticalAlignment" Value="Top"/>
        <Setter Property="Height" Value="50" />
    </Style>
</telerik:RadTimeline.PeriodHeaderStyle>

The default height of the header is 23px.

Keep in mind that when you change the height of the period header you might also need to update the padding of the TimelineItemGroupsPanel element.

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

I hope this information helps.

Regards,
Martin
Telerik by Progress

[Jacqueline]

How about changing the padding in the period header so as to fully utilize the horizontal space on the flanks example below, the numbers begin to disappear even where there is still space horizontally.

[Martin Ivanov]

You can use the PeriodHeaderStyle in order to set the Padding property of the Border element. For example:

<telerik:RadTimeline.PeriodHeaderStyle>
	<Style TargetType="Border">
		<Setter Property="VerticalAlignment" Value="Top" />
		<Setter Property="Padding" Value="15 0 15 0"/>
	</Style>
</telerik:RadTimeline.PeriodHeaderStyle>