Styling the period part

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

    Posted 20 Oct 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
    Admin
    Martin avatar
    1101 posts

    Posted 24 Oct 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!
  3. UI for WPF is Visual Studio 2017 Ready
Back to Top