How to set the ZIndex of the items within the RadTimeLine


Product RadTimeline for WPF


How to manipulate the ZIndex of items that are shown in the same row in a RadTimeLine.


Set the Panel.ZIndex attached property of the ContentPresenter elements that hold the TimelineItemControl and TimelineInstantItemControl. To demonstrate this we are going to define a class that will hold sample data.

Example 1: Defining a model

public class TimelineData 
    public DateTime Date { get; set; } 
    public TimeSpan Time { get; set; } 
    public Brush Background { get; set; } 
    public int ZIndex { get; set; } 
We will also define a custom RowIndexGenerator to show all items in the same row.

Example 2: Defining a RowIndexGenerator

public class RowIndexGenerator : IItemRowIndexGenerator 
    public void GenerateRowIndexes(List<TimelineRowItem> dataItems) 
        foreach (var item in dataItems) 
            item.RowIndex = 0; 
The custom logic for setting the Panel.ZIndex to the ZIndex property of the model will be in a separate class.

Example 3: Defining a RowIndexGenerator

public class TimelineUtilities 
    public static int GetTimelineItemZIndex(DependencyObject obj) 
        return (int)obj.GetValue(TimelineItemZIndexProperty); 
    public static void SetTimelineItemZIndex(DependencyObject obj, int value) 
        obj.SetValue(TimelineItemZIndexProperty, value); 
    public static readonly DependencyProperty TimelineItemZIndexProperty = 
            new PropertyMetadata(0, OnTimelineItemZIndexChanged)); 
    private static void OnTimelineItemZIndexChanged(DependencyObject d, DependencyPropertyChangedEventArgs e) 
        var item = (TimelineItemControlBase)d; 
        var presenter = item.ParentOfType<ContentPresenter>(); 
        if (presenter != null) 
            Panel.SetZIndex(presenter, (int)e.NewValue); 
What is left to setup up the code behind and xaml of our MainWindow.

Example 4: Creating a collection of TimelineData objects and setting their ZIndex

public MainWindow() 
    var source = new List<TimelineData>() 
        new TimelineData() { Date = new DateTime(2020, 1, 20), ZIndex =  2}, 
        new TimelineData() { Date = new DateTime(2020, 1, 1), Time = TimeSpan.FromDays(40), ZIndex = 1, Background = Brushes.Yellow }, 
        new TimelineData() { Date = new DateTime(2020, 1, 20), Time = TimeSpan.FromDays(40), Background = Brushes.Blue, 
    this.DataContext = source; 
The attached behavior will be added to the items through styles targeting the TimelineItemControl and TimelineInstantItemControl.

Example 5: Defining the RadTimeLine

<telerik:RadTimeline PeriodStart="2020-01-01" 
        <Style TargetType="telerik:TimelineItemControl"> 
            <Setter Property="example:TimelineUtilities.TimelineItemZIndex" Value="{Binding DataItem.ZIndex}" /> 
            <Setter Property="Background" Value="{Binding DataItem.Background}" /> 
        <Style TargetType="telerik:TimelineInstantItemControl"> 
            <Setter Property="example:TimelineUtilities.TimelineItemZIndex" Value="{Binding DataItem.ZIndex}" /> 
        <example:RowIndexGenerator /> 
        <telerik:DayInterval /> 
        <telerik:WeekInterval /> 
        <telerik:MonthInterval /> 
        <telerik:YearInterval /> 

Figure 1: Result from Example 5

RadTimeLine items with customized ZIndex

See Also

In this article
Not finding the help you need? Improve this article