xmlns:ig="http://schemas.infragistics.com/xaml"
このトピックは、XamFinancialChart コントロールにデータをバインドする方法を示します。各セクションの最後にサンプルの全コードを提供します。
以下の手順は、XamFinancialChart コントロールをライブ データにバインドする方法を示します。 XamFinancialChart は、IEnumerable インターフェイスを実装する任意のオブジェクトにバインドすることができます。ICollection および IEnumerable を実装するネスト コレクションがサポートされます。
以下は、XamFinancialChart コントロールを追加するための一般要件です。
以下の NuGet パッケージ参照をアプリケーションに追加します。
Infragistics.WPF.FinancialChart
NuGet フィードのセットアップと NuGet パッケージの追加の詳細については、NuGet フィード ドキュメントを参照してください。
XAML の場合:
xmlns:ig="http://schemas.infragistics.com/xaml"C# の場合:
using Infragistics.Controls.Charts;VB の場合:
Imports Infragistics.Controls.Chartsサンプル データにバインドした XamFinancialChart コントロール:
データ モデルの定義
XamFinancialChart コントロールのインスタンスの追加
(オプション) 結果の検証
データの定義
データをモデル化するためのクラスを作成します。
ItemsSource が INotifyCollectionChanged を実装する場合、チャートは CollectionChanged イベントに応答します。
ItemsSource のオブジェクトが INotifyPropertyChanged を実装場合、チャートは PropertyChanged イベントに応答します。
C# の場合:
public class Price : ObservableModel
{
private DateTime _time;
private double _open;
private double _high;
private double _low;
private double _close;
private double _volume;
public DateTime Time
{
get { return _time; }
set
{
if (_time != value)
{
_time = value;
OnPropertyChanged();
}
}
}
public double Open
{
get { return _open; }
set
{
if (_open != value)
{
_open = value;
OnPropertyChanged();
}
}
}
public double High
{
get { return _high; }
set
{
if (_high != value)
{
_high = value;
OnPropertyChanged();
}
}
}
public double Low
{
get { return _low; }
set
{
if (_low != value)
{
_low = value;
OnPropertyChanged();
}
}
}
public double Close
{
get { return _close; }
set
{
if (_close != value)
{
_close = value;
OnPropertyChanged();
}
}
}
public double Volume
{
get { return _volume; }
set
{
if (_volume != value)
{
_volume = value;
OnPropertyChanged();
}
}
}
public string Label { get { return this.Time.ToShortDateString(); } }
}
public class ObservableModel : INotifyPropertyChanged
{
public event PropertyChangedEventHandler PropertyChanged;
public void OnPropertyChanged([CallerMemberName] String propertyName = "")
{
if (PropertyChanged != null)
{
PropertyChanged(this, new PropertyChangedEventArgs(propertyName));
}
}
}Visual Basic の場合:
Public Class Price
Inherits ObservableModel
Private _time As DateTime
Private _open As Double
Private _high As Double
Private _low As Double
Private _close As Double
Private _volume As Double
Public Property Time As DateTime
Get
Return Me._time
End Get
Set
If (Me._time <> value) Then
Me._time = value
OnPropertyChanged
End If
End Set
End Property
Public Property Open As Double
Get
Return Me._open
End Get
Set
If (Me._open <> value) Then
Me._open = value
OnPropertyChanged
End If
End Set
End Property
Public Property High As Double
Get
Return Me._high
End Get
Set
If (Me._high <> value) Then
Me._high = value
OnPropertyChanged
End If
End Set
End Property
Public Property Low As Double
Get
Return Me._low
End Get
Set
If (Me._low <> value) Then
Me._low = value
OnPropertyChanged
End If
End Set
End Property
Public Property Close As Double
Get
Return Me._close
End Get
Set
If (Me._close <> value) Then
Me._close = value
OnPropertyChanged
End If
End Set
End Property
Public Property Volume As Double
Get
Return Me._volume
End Get
Set
If (Me._volume <> value) Then
Me._volume = value
OnPropertyChanged
End If
End Set
End Property
Public ReadOnly Property Label As String
Get
Return Me.Time.ToShortDateString
End Get
End Property
End Class
Public Class ObservableModel
Implements INotifyPropertyChanged
Public Event PropertyChanged As PropertyChangedEventHandler
Public Sub OnPropertyChanged(Optional ByVal propertyName As String = "")
If (Not (PropertyChanged) Is Nothing) Then
PropertyChanged(Me, New PropertyChangedEventArgs(propertyName))
End If
End Sub
End ClassXamFinancialChart コントロールのインスタンスの追加
XamFinancialChart インスタンスを追加し、データにバインドします。
XAML の場合:
<Window.DataContext>
<local:Data />
</Window.DataContext>
<Grid>
<ig:XamFinancialChart ItemsSource="{Binding}" />
</Grid>最後に、サービスから取得される新しいデータとデータ ソースを更新します。
結果の確認 (オプション)
結果を検証するために、アプリケーションを実行します。XamFinancialChart コントロールのデータ コレクションへのバインドが成功すれば、結果のチャートは上記のようになります。
このトピックの追加情報については、以下のトピックも合わせてご参照ください。