このチュートリアルでは、 xamTimeline をカスタム データ コレクションにバインドする方法を紹介します。データ モデルの定義、xamTimeline コントロールのアプリケーションへの追加、データ コレクションのインスタンスを作成、コントロールにデータをバインドする方法を学びます。
このチュートリアルでは、以下のようなアプリケーションを作成します。
始めに、アプリケーションに xamTimeline コントロールのインスタンスを追加します。対応する NuGet パッケージをアプリケーションに追加します。
Infragistics.WPF.Timeline
NuGet フィードのセットアップと NuGet パッケージの追加の詳細については、NuGet フィード ドキュメントを参照してください。
次に、XAML 名前空間参照を追加します。
XAML の場合:
xmlns:ig="http://schemas.infragistics.com/xaml"
レイアウト ルートにコントロールのインスタンスを追加します。
XAML の場合:
<Grid x:Name="LayoutRoot" Background="White">
<ig:XamTimeline x:Name="xamTimeline" />
</Grid>
コレクションのモデル データにクラスを作成します。以下のコードは、タイムライン データを表す型を作成します。
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; }
}
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
データ コレクションを初期化して xamTimeline コントロール インスタンスにバインドします。コードビハインドに適切な名前空間宣言を追加します:
C# の場合:
using System.Collections.ObjectModel; using Infragistics.Controls.Timelines;
Visual Basic の場合:
Imports System.Collections.ObjectModel Imports Infragistics.Controls.Timelines
MainPage コンストラクター内に以下のようにコレクションのインスタンスを作成します。
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);
}
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
NumericTimeSeries オブジェクトのインスタンスを作成し、このコレクションにバインドします。
C# の場合:
var series = new NumericTimeSeries(); series.Title = "Series With Data Binding"; series.DataSource = collection;
Visual Basic の場合:
Dim series As New NumericTimeSeries() series.Title = "Series With Data Binding" series.DataSource = collection
最後に、DataMapping を定義し xamTimeline コントロールの Series コレクションにシリーズを追加する必要があります。DataMapping 文字列によって、データ ソース メンバーと各タイムライン エントリの特性間のマッピングを定義することができます。この場合、4 ステートメントから構成される文字列は各タイムライン エントリである Time、Duration、Title および Details をデータ ソースの同じ名前のメンバーへマップします。
C# の場合:
series.DataMapping = "Time=Time;Duration=Duration;Title=Title;Details=Details"; this.xamTimeline.Series.Add(series);
Visual Basic の場合:
series.DataMapping = "Time=Time;Duration=Duration;Title=Title;Details=Details" Me.xamTimeline.Series.Add(series)
ここまでで、xamTimeline コントロールをカスタムデータコレクションへバインドしました。アプリケーションは以下のようになります。
以下は完全なコードです。
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>
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; }
}
}
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