Annotations

A TimelineAnnotation instance, specifies a single annotation that is positioned in the timeline control according to its StartDate and Duration values.

Adding Annotations

There are two ways to add annotations to a timeline. The first is to manually add them to the Annotations collection and the second one is to use the AnnotationsSource property.

Annotations Collection

Every timeline contains an Annotations collection which holds all the TimelineAnnotation-s plotted against the timeline.

The following example demonstrates how you can add a couple of annotations to the Annotations collection of a RadTimeline control:

<telerik:RadTimeline PeriodStart="2011-01-01" 
                        PeriodEnd="2012-01-01" 
                        VisiblePeriodStart="2011-01-01" 
                        VisiblePeriodEnd="2011-02-01" 
                        StartPath="StartDate" 
                        DurationPath="Duration" 
                        ItemsSource="{Binding TimelineItems}"> 
 
    <telerik:RadTimeline.Resources> 
        <DataTemplate x:Key="TimelineAnnotationTemplate"> 
            <Border Background="#FF25A0DA"> 
                <TextBlock Text="{Binding}" VerticalAlignment="Bottom" HorizontalAlignment="Center" Margin="5" /> 
            </Border> 
        </DataTemplate> 
    </telerik:RadTimeline.Resources> 
 
    <telerik:RadTimeline.Intervals> 
        <telerik:YearInterval /> 
        <telerik:MonthInterval /> 
        <telerik:WeekInterval /> 
        <telerik:DayInterval /> 
    </telerik:RadTimeline.Intervals> 
    <telerik:RadTimeline.Annotations> 
        <telerik:TimelineAnnotation StartDate="2011-01-05" 
                                    Duration="5.00:00:00" 
                                    Content="Annotation 1" 
                                    ContentTemplate="{StaticResource TimelineAnnotationTemplate}" /> 
        <telerik:TimelineAnnotation StartDate="2011-01-15" 
                                    Duration="5.00:00:00" 
                                    Content="Annotation 2" 
                                    ContentTemplate="{StaticResource TimelineAnnotationTemplate}" /> 
        <telerik:TimelineAnnotation StartDate="2011-01-25" 
                                    Duration="5.00:00:00" 
                                    Content="Annotation 3" 
                                    ContentTemplate="{StaticResource TimelineAnnotationTemplate}" /> 
    </telerik:RadTimeline.Annotations> 
</telerik:RadTimeline> 

Rad Timeline-features-annotations-Annotations Collection

АnnotationsSource

The AnnotationsSource property specifies a collection, used to generate the annotations of the RadTimeline instance. When AnnotationsSource property is set, the Annotations collection is read-only.

  • AnnotationStartPath property - The path to the StartDate source property.
  • AnnotationDurationPath property - The path to the Duration source property.
  • AnnotationZIndexPath property property - The path to the ZIndex source property.
  • AnnotationContentPath property - The path to the Content source property.
  • AnnotationContentTemplate property - A DataTemplate that defines the visualization of the content of the generated timeline annotations. The default is null.

The following example demonstrates how you can bind the AnnotationsSource of a RadTimeline control:

<Grid.Resources> 
    <DataTemplate x:Key="TimelineAnnotationTemplate"> 
        <Border Background="#FF25A0DA"> 
            <TextBlock Text="{Binding}" VerticalAlignment="Bottom" HorizontalAlignment="Center" Margin="5" /> 
        </Border> 
    </DataTemplate> 
</Grid.Resources> 
 
<telerik:RadTimeline PeriodStart="2011-01-01" 
                        PeriodEnd="2012-01-01" 
                        VisiblePeriodStart="2011-01-01" 
                        VisiblePeriodEnd="2011-02-01" 
                        StartPath="StartDate" 
                        DurationPath="Duration" 
                        ItemsSource="{Binding TimelineItems}" 
                        AnnotationStartPath="StartDate" 
                        AnnotationDurationPath="Duration" 
                        AnnotationContentPath="Content" 
                        AnnotationZIndexPath="ZIndex" 
                        AnnotationContentTemplate="{StaticResource TimelineAnnotationTemplate}" 
                        AnnotationsSource="{Binding TimelineAnnotationItems}"> 
 
    <telerik:RadTimeline.Intervals> 
        <telerik:YearInterval /> 
        <telerik:MonthInterval /> 
        <telerik:WeekInterval /> 
        <telerik:DayInterval /> 
    </telerik:RadTimeline.Intervals> 
</telerik:RadTimeline> 

public class RadTimelineAnnotationsViewModel 
{ 
    public RadTimelineAnnotationsViewModel() 
    { 
        this.PeriodStart = new DateTime(2011, 1, 1); 
        this.PeriodEnd = new DateTime(2012, 1, 1); 
 
        this.GenerateTimelineData(); 
        this.GenerateTimelineAnnotationsData(); 
    } 
 
    public DateTime PeriodStart { get; set; } 
 
    public DateTime PeriodEnd { get; set; } 
 
    public List<RadTimelineDataItem> TimelineItems { get; set; } 
 
    public List<RadTimelineAnnotationDataItem> TimelineAnnotationItems { get; set; } 
 
    private void GenerateTimelineData() 
    { 
        Random r = new Random(); 
        List<RadTimelineDataItem> items = new List<RadTimelineDataItem>(); 
 
        for (DateTime date = this.PeriodStart; date < this.PeriodEnd; date = date.AddDays(1)) 
        { 
            items.Add(new RadTimelineDataItem() { StartDate = date, Duration = TimeSpan.FromDays(r.Next(5, 10)) }); 
        } 
 
        this.TimelineItems = items; 
    } 
 
    private void GenerateTimelineAnnotationsData() 
    { 
        Random r = new Random(); 
        List<RadTimelineAnnotationDataItem> items = new List<RadTimelineAnnotationDataItem>(); 
 
        for (DateTime date = this.PeriodStart; date < this.PeriodEnd; date = date.AddDays(7)) 
        { 
            items.Add(new RadTimelineAnnotationDataItem(){ 
                StartDate = date, 
                Duration = TimeSpan.FromDays(r.Next(2, 5)), 
                Content = date.ToShortDateString(), 
                ZIndex = r.Next(0, 300) 
            }); 
        } 
 
        this.TimelineAnnotationItems = items; 
    } 
} 
 
public class RadTimelineDataItem 
{ 
    public DateTime StartDate { get; set; } 
 
    public TimeSpan Duration { get; set; } 
} 
 
public class RadTimelineAnnotationDataItem 
{ 
    public DateTime StartDate { get; set; } 
 
    public TimeSpan Duration { get; set; } 
 
    public string Content { get; set; } 
 
    public int ZIndex { get; set; } 
} 
Public Class RadTimelineAnnotationsViewModel 
    Public Sub New() 
        Me.PeriodStart = New DateTime(2011, 1, 1) 
        Me.PeriodEnd = New DateTime(2012, 1, 1) 
 
        Me.GenerateTimelineData() 
        Me.GenerateTimelineAnnotationsData() 
    End Sub 
 
    Public Property PeriodStart() As DateTime 
        Get 
            Return m_PeriodStart 
        End Get 
        Set 
            m_PeriodStart = Value 
        End Set 
    End Property 
    Private m_PeriodStart As DateTime 
 
    Public Property PeriodEnd() As DateTime 
        Get 
            Return m_PeriodEnd 
        End Get 
        Set 
            m_PeriodEnd = Value 
        End Set 
    End Property 
    Private m_PeriodEnd As DateTime 
 
    Public Property TimelineItems() As List(Of RadTimelineDataItem) 
        Get 
            Return m_TimelineItems 
        End Get 
        Set 
            m_TimelineItems = Value 
        End Set 
    End Property 
    Private m_TimelineItems As List(Of RadTimelineDataItem) 
 
    Public Property TimelineAnnotationItems() As List(Of RadTimelineAnnotationDataItem) 
        Get 
            Return m_TimelineAnnotationItems 
        End Get 
        Set 
            m_TimelineAnnotationItems = Value 
        End Set 
    End Property 
    Private m_TimelineAnnotationItems As List(Of RadTimelineAnnotationDataItem) 
 
    Private Sub GenerateTimelineData() 
        Dim r As New Random() 
        Dim items As New List(Of RadTimelineDataItem)() 
 
        Dim [date] As DateTime = Me.PeriodStart 
        While [date] < Me.PeriodEnd 
            items.Add(New RadTimelineDataItem() With { _ 
                .StartDate = [date], _ 
                .Duration = TimeSpan.FromDays(r.Next) _ 
            }) 
            [date] = [date].AddDays(1) 
        End While 
 
        Me.TimelineItems = items 
    End Sub 
 
    Private Sub GenerateTimelineAnnotationsData() 
        Dim r As New Random() 
        Dim items As New List(Of RadTimelineAnnotationDataItem)() 
 
        Dim [date] As DateTime = Me.PeriodStart 
        While [date] < Me.PeriodEnd 
            items.Add(New RadTimelineAnnotationDataItem() With { _ 
                .StartDate = [date], _ 
                .Duration = TimeSpan.FromDays(r.Next), _ 
                .Content = [date].ToShortDateString(), _ 
                .ZIndex = r.Next _ 
            }) 
            [date] = [date].AddDays(7) 
        End While 
 
        Me.TimelineAnnotationItems = items 
    End Sub 
End Class 
 
Public Class RadTimelineDataItem 
    Public Property StartDate() As DateTime 
        Get 
            Return m_StartDate 
        End Get 
        Set 
            m_StartDate = Value 
        End Set 
    End Property 
    Private m_StartDate As DateTime 
 
    Public Property Duration() As TimeSpan 
        Get 
            Return m_Duration 
        End Get 
        Set 
            m_Duration = Value 
        End Set 
    End Property 
    Private m_Duration As TimeSpan 
End Class 
 
Public Class RadTimelineAnnotationDataItem 
    Public Property StartDate() As DateTime 
        Get 
            Return m_StartDate 
        End Get 
        Set 
            m_StartDate = Value 
        End Set 
    End Property 
    Private m_StartDate As DateTime 
 
    Public Property Duration() As TimeSpan 
        Get 
            Return m_Duration 
        End Get 
        Set 
            m_Duration = Value 
        End Set 
    End Property 
    Private m_Duration As TimeSpan 
 
    Public Property Content() As String 
        Get 
            Return m_Content 
        End Get 
        Set 
            m_Content = Value 
        End Set 
    End Property 
    Private m_Content As String 
 
    Public Property ZIndex() As Integer 
        Get 
            Return m_ZIndex 
        End Get 
        Set 
            m_ZIndex = Value 
        End Set 
    End Property 
    Private m_ZIndex As Integer 
End Class 

Rad Timeline-features-annotations-Annotations Source

Properties

  • StartDate property - A DateTime value that defines the position of the annotation on the timeline axis. The default value is DateTime.MinValue.
  • Duration property - A TimeSpan value that defines the duration of the annotation on the timeline axis and thus its width, according to the current zoom level. The default value is TimeSpan.Zero. In case no duration is specified, the width of the annotation can be specified using the Width property and the width does not depend on the current zoom level.
  • Content property - The data used to generate the child elements. The default is null.
  • ContentTemplate property - A DataTemplate that defines the visualization of the content. The default is null.
  • Changing the default annotation ZIndex - The default ZIndex of a timeline annotation instance is 300. That is, by default, a timeline annotation appears on top of the timeline items (default ZIndex=200) and the period items (default ZIndex=100). You can change the ZIndex of an annotation instance using the attached Canvas.ZIndex property. The following example demonstrates how you can change the default annotation ZIndex value:

<telerik:RadTimeline PeriodStart="2011-01-01" 
                        PeriodEnd="2012-01-01" 
                        VisiblePeriodStart="2011-01-01" 
                        VisiblePeriodEnd="2011-02-01" 
                        StartPath="StartDate" 
                        DurationPath="Duration" 
                        ItemsSource="{Binding TimelineItems}"> 
 
    <telerik:RadTimeline.Resources> 
        <DataTemplate x:Key="TimelineAnnotationTemplate"> 
            <Border Background="#FF25A0DA"> 
                <TextBlock Text="{Binding}" VerticalAlignment="Bottom" HorizontalAlignment="Center" Margin="5" /> 
            </Border> 
        </DataTemplate> 
    </telerik:RadTimeline.Resources> 
 
    <telerik:RadTimeline.Intervals> 
        <telerik:YearInterval /> 
        <telerik:MonthInterval /> 
        <telerik:WeekInterval /> 
        <telerik:DayInterval /> 
    </telerik:RadTimeline.Intervals> 
    <telerik:RadTimeline.Annotations> 
        <telerik:TimelineAnnotation StartDate="2011-01-05" 
                                    Duration="5.00:00:00" 
                                    ContentTemplate="{StaticResource TimelineAnnotationTemplate}" /> 
        <telerik:TimelineAnnotation StartDate="2011-01-15" 
                                    Duration="5.00:00:00" 
                                    Canvas.ZIndex="150" 
                                    ContentTemplate="{StaticResource TimelineAnnotationTemplate}" /> 
        <telerik:TimelineAnnotation StartDate="2011-01-25" 
                                    Duration="5.00:00:00" 
                                    Canvas.ZIndex="50" 
                                    ContentTemplate="{StaticResource TimelineAnnotationTemplate}" /> 
    </telerik:RadTimeline.Annotations> 
</telerik:RadTimeline> 

Rad Timeline-features-annotations-ZIndex

  • Changing the default annotation top margin - The default top margin of a timeline annotation instance equals the height of the period items, positioned on top of the timeline line. You can change the default top margin value of an annotation instance using the Margin property. The following example demonstrates how you can change the default annotation top margin value:

<telerik:RadTimeline PeriodStart="2011-01-01" 
                        PeriodEnd="2012-01-01" 
                        VisiblePeriodStart="2011-01-01" 
                        VisiblePeriodEnd="2011-02-01" 
                        StartPath="StartDate" 
                        DurationPath="Duration" 
                        ItemsSource="{Binding TimelineItems}"> 
 
    <telerik:RadTimeline.Resources> 
        <DataTemplate x:Key="TimelineAnnotationTemplate"> 
            <Border Background="#FF25A0DA"> 
                <TextBlock Text="{Binding}" VerticalAlignment="Bottom" HorizontalAlignment="Center" Margin="5" /> 
            </Border> 
        </DataTemplate> 
    </telerik:RadTimeline.Resources> 
 
    <telerik:RadTimeline.Intervals> 
        <telerik:YearInterval /> 
        <telerik:MonthInterval /> 
        <telerik:WeekInterval /> 
        <telerik:DayInterval /> 
    </telerik:RadTimeline.Intervals> 
    <telerik:RadTimeline.Annotations> 
        <telerik:TimelineAnnotation StartDate="2011-01-05" 
                                    Duration="5.00:00:00" 
                                    Margin="0,48,0,0" 
                                    ContentTemplate="{StaticResource TimelineAnnotationTemplate}" /> 
        <telerik:TimelineAnnotation StartDate="2011-01-15" 
                                    Duration="5.00:00:00" 
                                    Margin="0,-15,0,0" 
                                    Canvas.ZIndex="150" 
                                    ContentTemplate="{StaticResource TimelineAnnotationTemplate}" /> 
        <telerik:TimelineAnnotation StartDate="2011-01-25" 
                                    Duration="5.00:00:00" 
                                    Margin="0" 
                                    Canvas.ZIndex="50" 
                                    ContentTemplate="{StaticResource TimelineAnnotationTemplate}" /> 
    </telerik:RadTimeline.Annotations> 
</telerik:RadTimeline> 

Rad Timeline-features-annotations-Margin

In this article