Tooltips
RadTimeline supports tooltips for its items. You can specify a tooltip template and display the details of the item itself. The purpose of this topic is to show you how this can be achieved.
The tooltip is triggered by setting the ToolTipTemplate property and is used to visualize arbitrary information per data point. The user has full control over the visualization of the tooltip itself and over the information that the tooltip will display.
For the purpose we'll need a timeline, which is bound to a collection of custom objects. The objects in the data source will be used directly as values for the Timeline items as well as content for our tooltips. You can learn how to bind the Timeline from our DataBinding topic as well as the MVVM support topic.
We create a sample class with two properties - Duration of TimeSpan type and Date of DateTime type. Then set values for the properties and create a method that returns a collection of business objects. This way the Timeline will be able to display information about the currently hovered data point via the ToolTipTemplate.
public class Product
{
public TimeSpan Duration { get; set; }
public DateTime Date { get; set; }
public static ObservableCollection<Product> GetData(int count)
{
var startDate = new DateTime(2010, 1, 1);
var endDate = new DateTime(2012, 2, 1);
Random r = new Random();
ObservableCollection<Product> result = new ObservableCollection<Product>();
for (DateTime i = startDate; i < endDate; i = i.AddMonths(1))
{
result.Add(new Product() { Date = i, Duration = TimeSpan.FromDays(r.Next(50, 100)) });
}
for (int i = 0; i < 15; i++)
{
result.Add(new Product()
{
Date = startDate.AddMonths(r.Next(0, 25)).AddDays(15)
});
}
return result;
}
}
Public Class Product
Public Property Duration() As TimeSpan
Public Property Date As Date
Public Shared Function GetData(ByVal count As Integer) As ObservableCollection(Of Product)
Dim startDate = New Date(2010, 1, 1)
Dim endDate = New Date(2012, 2, 1)
Dim r As New Random()
Dim result As New ObservableCollection(Of Product)()
Dim i As Date = startDate
Do While i < endDate
result.Add(New Product() With {.Date = i, .Duration = TimeSpan.FromDays(r.Next(50, 100))})
i = i.AddMonths(1)
Loop
For i As Integer = 0 To 14
result.Add(New Product() With {.Date = startDate.AddMonths(r.Next(0, 25)).AddDays(15)})
Next i
Return result
End Function
End Class
Our ViewModel class consists of a single property - the collection of business objects that will be used as itemssource for the Timeline. In the constructor of the class call the GetData method we previously created in our Product class with as many items as you want to generate for your Timeline.
public class ExampleViewModel : ViewModelBase
{
private ObservableCollection<Product> _data;
public ObservableCollection<Product> Data
{
get
{
return this._data;
}
set
{
if (this._data != value)
{
this._data = value;
this.OnPropertyChanged("Data");
}
}
}
public ExampleViewModel()
{
this.Data = Product.GetData(15);
}
}
Public Class ExampleViewModel
Inherits ViewModelBase
Private _data As ObservableCollection(Of Product)
Public Property Data() As ObservableCollection(Of Product)
Get
Return Me._data
End Get
Set(ByVal value As ObservableCollection(Of Product))
If Me._data IsNot value Then
Me._data = value
Me.OnPropertyChanged("Data")
End If
End Set
End Property
Public Sub New()
Me.Data = Product.GetData(15)
End Sub
End Class
Now we need to define our tooltip behavior and set its tooltip template. It will display the value of the hovered Timeline item.
<UserControl.DataContext>
<local:ExampleViewModel/>
</UserControl.DataContext>
<UserControl.Resources>
<local:DurationToBrushConverter x:Key="DurationToBrushConverter"/>
<DataTemplate x:Key="ToolTipTemplate">
<Grid>
<Rectangle Margin="0" RadiusY="2" RadiusX="2" Fill="Wheat" Opacity="0.7"/>
<StackPanel Orientation="Horizontal" Margin="8,8,8,12">
<TextBlock FontFamily="Segoe UI" Text="Duration in days: "/>
<TextBlock FontFamily="Segoe UI" Text="{Binding Duration, StringFormat={0:%d}}"
Foreground="{Binding Duration, Converter={StaticResource DurationToBrushConverter}}"/>
<TextBlock FontFamily="Segoe UI" Text=" and Start Date: "/>
<TextBlock FontFamily="Segoe UI" Text="{Binding Date, StringFormat='d/MM/yyyy'}"/>
</StackPanel>
</Grid>
</DataTemplate>
</UserControl.Resources>
<Grid x:Name="LayoutRoot" Background="White" Height="300" Width="750">
<telerik:RadTimeline Height="250" x:Name="RadTimeline1"
VerticalAlignment="Top"
Margin="6"
PeriodStart="2011/01/01" PeriodEnd="2011/06/01"
StartPath="Date"
DurationPath="Duration"
ToolTipTemplate="{StaticResource ToolTipTemplate}"
ItemsSource="{Binding Data}">
<telerik:RadTimeline.Intervals>
<telerik:YearInterval />
<telerik:MonthInterval />
<telerik:WeekInterval />
<telerik:DayInterval />
</telerik:RadTimeline.Intervals>
</telerik:RadTimeline>
</Grid>
Aside from binding the Timeline, we added a binding converter. Its purpose is to show you how you may set custom foreground for the tooltip information based on condition. You may find the DurationToBrushConverter implementations in the code snippet below:
public class DurationToBrushConverter : IValueConverter
{
public object Convert(object value, Type targetType, object parameter, System.Globalization.CultureInfo culture)
{
TimeSpan durationDifference = (TimeSpan)value;
if (durationDifference.Days == 0)
{
return new SolidColorBrush(Colors.Red);
}
if (durationDifference.Days > 70)
{
return new SolidColorBrush(Colors.Green);
}
return new SolidColorBrush(Colors.Black);
}
public object ConvertBack(object value, Type targetType, object parameter, System.Globalization.CultureInfo culture)
{
throw new NotImplementedException();
}
}
Public Class DurationToBrushConverter
Implements IValueConverter
Public Function Convert(ByVal value As Object, ByVal targetType As Type, ByVal parameter As Object, ByVal culture As System.Globalization.CultureInfo) As Object
Dim durationDifference As TimeSpan = CType(value, TimeSpan)
If durationDifference.Days = 0 Then
Return New SolidColorBrush(Colors.Red)
End If
If durationDifference.Days > 70 Then
Return New SolidColorBrush(Colors.Green)
End If
Return New SolidColorBrush(Colors.Black)
End Function
Public Function ConvertBack(ByVal value As Object, ByVal targetType As Type, ByVal parameter As Object, ByVal culture As System.Globalization.CultureInfo) As Object
Throw New NotImplementedException()
End Function
End Class
A sample tooltip can be seen below:
