This walkthrough demonstrates how to bind the xamTimeline™ control to a custom data collection. You will learn to define a data model, add the xamTimeline control to your application, instantiate a data collection, and bind that data to the control.
By the end of the walkthrough, your application will look like this:
To begin, add an instance of the xamTimeline control to your application. This begins by adding the corresponding NuGet package to your application:
Infragistics.WPF.Timeline
For more information on setting up the NuGet feed and adding NuGet packages, you can take a look at the following documentation: NuGet Feeds.
Next, insert the following XAML namespace reference:
In XAML:
xmlns:ig="http://schemas.infragistics.com/xaml"
Then, add an instance of the control to your layout root.
In XAML:
<Grid x:Name="LayoutRoot" Background="White"> <ig:XamTimeline x:Name="xamTimeline" /> </Grid>
Next, create a class to model the data in the collection. The following code creates a type representing timeline data:
In C#:
public class TimelineData { public TimelineData() { } public TimelineData(int newTime, int newDuration, string newTitle, string newDetails) { Time = newTime; Duration = newDuration; Title = newTitle; Details = newDetails; } public int Time { get; set; } public int Duration { get; set; } public string Title { get; set; } public string Details { get; set; } }
In Visual Basic:
Public Class TimelineData Public Sub New() End Sub Public Sub New(newTime As Integer, newDuration As Integer, newTitle As String, newDetails As String) Time = newTime Duration = newDuration Title = newTitle Details = newDetails End Sub Public Property Time() As Integer Get Return m_Time End Get Set m_Time = Value End Set End Property Private m_Time As Integer Public Property Duration() As Integer Get Return m_Duration End Get Set m_Duration = Value End Set End Property Private m_Duration As Integer Public Property Title() As String Get Return m_Title End Get Set m_Title = Value End Set End Property Private m_Title As String Public Property Details() As String Get Return m_Details End Get Set m_Details = Value End Set End Property Private m_Details As String End Class
In this step, you must instantiate a data collection and bind it to the xamTimeline control instance. In the code-behind, add the appropriate namespace directives:
In C#:
using System.Collections.ObjectModel; using Infragistics.Controls.Timelines;
In Visual Basic:
Imports System.Collections.ObjectModel Imports Infragistics.Controls.Timelines
Then, inside the MainPage constructor, instantiate the collection as follows.
In C#:
var collection = new ObservableCollection<TimelineData>(); for (int i = 1; i < 10; i++) { var dataEntry = new TimelineData() { Time = i * 100, Duration = 10, Title = "Data Title " + i, Details = "Data Description " + i }; collection.Add(dataEntry); }
In Visual Basic:
Dim collection As New ObservableCollection(Of TimelineData)() For i As Integer = 1 To 9 Dim dataEntry As New TimelineData() With { _ Key .Time = i * 100, _ Key .Duration = 10, _ Key .Title = "Data Title " & i, _ Key .Details = "Data Description " & i _ } collection.Add(dataEntry) Next
Now, instantiate a NumericTimeSeries object and bind it to this collection.
In C#:
var series = new NumericTimeSeries(); series.Title = "Series With Data Binding"; series.DataSource = collection;
In Visual Basic:
Dim series As New NumericTimeSeries() series.Title = "Series With Data Binding" series.DataSource = collection
Finally, you must define the DataMapping and add the series to the xamTimeline control’s Series collection. The DataMapping string allows you to define the mapping between data source members and the characteristics of each timeline entry. In this case, the string consists of four statements that map the Time, Duration, Title, and Details of each timeline entry to identically-named members of the data source.
In C#:
series.DataMapping = "Time=Time;Duration=Duration;Title=Title;Details=Details"; this.xamTimeline.Series.Add(series);
In Visual Basic:
series.DataMapping = "Time=Time;Duration=Duration;Title=Title;Details=Details" Me.xamTimeline.Series.Add(series)
At this point, you’ve successfully bound the xamTimeline control to a custom data collection. Your application should now display as shown.
The following code listings show you the full example implemented in context.
In XAML:
<UserControl x:Class="Application1.MainPage" xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" xmlns:d="http://schemas.microsoft.com/expression/blend/2008" xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" xmlns:ig="http://schemas.infragistics.com/xaml" mc:Ignorable="d" d:DesignHeight="300" d:DesignWidth="400"> <Grid x:Name="LayoutRoot" Background="White"> <ig:XamTimeline x:Name="xamTimeline" /> </Grid> </UserControl>
In C#:
using System.Windows.Controls; using System.Collections.ObjectModel; using Infragistics.Controls.Timelines; namespace Application1 { public partial class MainPage : UserControl { public MainPage() { InitializeComponent(); var collection = new ObservableCollection<TimelineData>(); for (int i = 1; i < 10; i++) { var dataEntry = new TimelineData() { Time = i * 100, Duration = 10, Title = "Data Title " + i, Details = "Data Description " + i }; collection.Add(dataEntry); } var series = new NumericTimeSeries(); series.Title = "Series With Data Binding"; series.DataSource = collection; series.DataMapping = "Time=Time;Duration=Duration;Title=Title;Details=Details"; this.xamTimeline.Series.Add(series); } } public class TimelineData { public TimelineData() { } public TimelineData(int newTime, int newDuration, string newTitle, string newDetails) { Time = newTime; Duration = newDuration; Title = newTitle; Details = newDetails; } public int Time { get; set; } public int Duration { get; set; } public string Title { get; set; } public string Details { get; set; } } }
In Visual Basic:
Imports System.Windows.Controls Imports System.Collections.ObjectModel Imports Infragistics.Controls.Timelines Namespace Application1 Public Partial Class MainPage Inherits UserControl Public Sub New() InitializeComponent() Dim collection As New ObservableCollection(Of TimelineData)() For i As Integer = 1 To 9 Dim dataEntry As New TimelineData() With { _ Key .Time = i * 100, _ Key .Duration = 10, _ Key .Title = "Data Title " & i, _ Key .Details = "Data Description " & i _ } collection.Add(dataEntry) Next Dim series As New NumericTimeSeries() series.Title = "Series With Data Binding" series.DataSource = collection series.DataMapping = "Time=Time;Duration=Duration;Title=Title;Details=Details" Me.xamTimeline.Series.Add(series) End Sub End Class Public Class TimelineData Public Sub New() End Sub Public Sub New(newTime As Integer, newDuration As Integer, newTitle As String, newDetails As String) Time = newTime Duration = newDuration Title = newTitle Details = newDetails End Sub Public Property Time() As Integer Get Return m_Time End Get Set m_Time = Value End Set End Property Private m_Time As Integer Public Property Duration() As Integer Get Return m_Duration End Get Set m_Duration = Value End Set End Property Private m_Duration As Integer Public Property Title() As String Get Return m_Title End Get Set m_Title = Value End Set End Property Private m_Title As String Public Property Details() As String Get Return m_Details End Get Set m_Details = Value End Set End Property Private m_Details As String End Class End Namespace