Change font color, font size etc. of the interval headings

[Gerhard]

Hello, I am using the WPF-RadTimeLine control and would like to change the color and font size of the interval headings.

Hello, I am using the WPF-RadTimeLine control and would like to change the color and font size of the interval headings.

What is the procedure here?

[Stenly]

Hello Gerhard,

For the grouping part of the question, to achieve this requirement, add a new Style in the Resources collection of RadTimeline that targets the TimelineGroupPeriodControl element and set its FontSize and Foreground properties:

<telerik:RadTimeline.Resources>
    <Style TargetType="telerik:TimelineGroupPeriodControl">
        <Setter Property="FontSize" Value="18" />
        <Setter Property="Foreground" Value="Red"/>
    </Style>
</telerik:RadTimeline.Resources>

For the hours part of the question, add a new Style that targets the TimelinePeriodControl and sets the same properties as in the above code snippet:

<telerik:RadTimeline.Resources>
    <Style TargetType="telerik:TimelineGroupPeriodControl">
        <Setter Property="FontSize" Value="18" />
        <Setter Property="Foreground" Value="Red"/>
    </Style>
    <Style TargetType="telerik:TimelinePeriodControl">
        <Setter Property="FontSize" Value="12"/>
        <Setter Property="Foreground" Value="Orange"/>
    </Style>
</telerik:RadTimeline.Resources>

The produced result is as follows:

With this being said, I hope the provided information will be of help to you.

Regards,
Stenly
Progress Telerik

[Gerhard]

Thank you for the information. I have implemented your suggestion.
But it only worked for me after I used BasedOn for the styles. (BasedOn=“{StaticResource TimelineGroupPeriodControlStyle}” or BasedOn=“{StaticResource TimelinePeriodControlStyle}”).
I have adjusted the height according to the documentation. (https://docs.telerik.com/devtools/wpf/controls/radtimeline/how-to/howto-change-size-periodheader).
Unfortunately, the annotations and the TimeLineItems are now not moved down.

Is there a solution for this?

Translated with DeepL.com (free version)

[Gerhard]

Hello Stenly,

 

Thank you for the information. I have implemented your suggestion.
But it only worked for me after I used BasedOn for the styles. (BasedOn=“{StaticResource TimelineGroupPeriodControlStyle}” or BasedOn=“{StaticResource TimelinePeriodControlStyle}”).
I have adjusted the height according to the documentation. (https://docs.telerik.com/devtools/wpf/controls/radtimeline/how-to/howto-change-size-periodheader).
Unfortunately, the annotations and the TimeLineItems are now not moved down.

Is there a solution for this?

Translated with DeepL.com (free version)

[Stenly]

I tried reproducing this behavior by following the approach from the article that you provided, however, I was unsuccessful. On my end, the following result is present:

I attached the sample project that I used for testing, so, would it be possible to give it a try?

[Gerhard]

Thank you for the test project. This works for me exactly as described. However, if I set the font size of 'TimelineGroupPeriodControl' even larger, the font is cut off. I wanted to prevent this and have inserted the following:
<telerik:RadTimeline.GroupPeriodHeaderStyle>
     <Style TargetType=“Border”>
         <Setter Property=“Height” Value=“36” />
     </Style>
 </telerik:RadTimeline.GroupPeriodHeaderStyle>

This makes the field inc. font larger but causes the described shift. If I define a height in the 'TimelineGroupPeriodControl', the font is still cut off.

[Stenly]

Hello Gerhard,

To prevent this behavior from appearing, you could keep the custom Style for the GroupPeriodHeaderStyle property and specify values for the Margin property of the TimeLineItemGroupsPanel instance for the ItemsPanel property of the TimelineItemContainer.

The following code snippet shows what I have in mind:

<!--Your custom Style-->
<telerik:RadTimeline.GroupPeriodHeaderStyle>
    <Style TargetType="Border">
        <Setter Property="Height" Value="36" />
    </Style>
</telerik:RadTimeline.GroupPeriodHeaderStyle>
<telerik:RadTimeline.Resources>
    <Style TargetType="telerik:TimelineGroupPeriodControl">
        <!--Increased font size-->
        <Setter Property="FontSize" Value="28" />
        <Setter Property="Foreground" Value="Red"/>
    </Style>
    <Style TargetType="telerik:TimelinePeriodControl">
        <Setter Property="FontSize" Value="12"/>
        <Setter Property="Foreground" Value="Orange"/>
    </Style>
    <Style TargetType="telerik:TimelineItemContainer" >
        <Setter Property="ItemsPanel">
            <Setter.Value>
                <ItemsPanelTemplate>
                    <!--Specified Margin-->
                    <telerik:TimelineItemGroupsPanel Margin="0 15 0 0" Padding="0 70 0 5" />
                </ItemsPanelTemplate>
            </Setter.Value>
        </Setter>
    </Style>
</telerik:RadTimeline.Resources>

The produced result is as follows:

With this being said, could you give this suggestion a try?

[Gerhard]

Hi, thank you.
Works great!

[Stenly]

I am happy to hear it. Please let me know if any additional assistance about this scenario is required.