Styling the period part

2 posts, 0 answers
  1. Jean
    Jean avatar
    3 posts
    Member since:
    Sep 2016

    Posted 20 Oct 2016 Link to this post

    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

     

  2. Martin Ivanov
    Admin
    Martin Ivanov avatar
    1406 posts

    Posted 24 Oct 2016 Link to this post

    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!
Back to Top