This is a migrated thread and some comments may be shown as answers.

Styling the period part

1 Answer 68 Views
TimeLine
This is a migrated thread and some comments may be shown as answers.
Jean
Top achievements
Rank 1
Jean asked on 20 Oct 2016, 04:08 PM

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

 

1 Answer, 1 is accepted

Sort by
0
Martin Ivanov
Telerik team
answered on 24 Oct 2016, 10:20 AM
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
Do you need help with upgrading your WPF project? Try the Telerik API Analyzer and share your thoughts!
Jacqueline
Top achievements
Rank 1
commented on 01 Apr 2022, 04:40 PM

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
Telerik team
commented on 04 Apr 2022, 07:20 AM

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>

Tags
TimeLine
Asked by
Jean
Top achievements
Rank 1
Answers by
Martin Ivanov
Telerik team
Share this question
or