![xamDiagram Binding to Nodes and Connections Data with References 1.png](images/xamDiagram_Binding_to_Nodes_and_Connections_Data_with_References_1.png)
以下の手順では、各接続オブジェクトが開始ノードと終了ノードを表す 2 つのノード オブジェクトへの参照を持つ、ノードおよび接続を表すデータ オブジェクトに xamDiagram をバインドする方法を説明します。
以下のスクリーンショットは結果のプレビューです。
この手順を実行するには、以下が必要です。
ページに追加される空の xamDiagram を持つ WPF アプリケーション
ForceDirectedGraphDiagramLayout のインスタンスに設定される xamDiagram の Layout プロパティ
以下はプロセスの概要です。
ItemsSource と ConnectionSource の設定
以下の手順では、参照を持つ階層ノード データに xamDiagram をバインドする方法を説明します。
サンプル ノードのデータ クラスを追加します。
以下の WikipediaArticle
クラスをコード ビハインドに追加します。WikipediaArticle
はノード オブジェクトを表し、Title
という単一の文字列プロパティを持ちます。
C# の場合:
public class WikipediaArticle : INotifyPropertyChanged
{
public WikipediaArticle(string title)
{
Title = title;
}
private string _title;
public string Title
{
get { return _title; }
set
{
_title = value;
OnPropertyChanged();
}
}
public event PropertyChangedEventHandler PropertyChanged;
protected void OnPropertyChanged([CallerMemberName] string propertyName = "")
{
if (PropertyChanged != null)
PropertyChanged(this, new PropertyChangedEventArgs(propertyName));
}
}
Public Class WikipediaArticle Implements INotifyPropertyChanged
Public Sub New(title As String)
Title = title
End Sub
Private _title As String
Public Property Title() As String
Get
Return _title
End Get
Set(value As String)
_title = value
OnPropertyChanged()
End Set
End Property
Public Event PropertyChanged As PropertyChangedEventHandler Implements INotifyPropertyChanged.PropertyChanged
Protected Sub OnPropertyChanged(Optional propertyName As String = "")
RaiseEvent PropertyChanged(Me, New PropertyChangedEventArgs(propertyName))
End Sub
End Class
2.サンプルの接続クラスを追加します。
以下の WikipediaLink
クラスをコード ビハインドに追加します。WikipediaLink
クラスは、2 つの WikipediaArticle
インスタンスの間の指示された接続を表します。
C# の場合:
public class WikipediaLink : INotifyPropertyChanged
{
public WikipediaLink(WikipediaArticle fromArticle, WikipediaArticle toArticle)
{
FromArticle = fromArticle;
ToArticle = toArticle;
}
private WikipediaArticle _from;
public WikipediaArticle FromArticle
{
get { return _from; }
set
{
_from = value;
OnPropertyChanged();
}
}
private WikipediaArticle _to;
public WikipediaArticle ToArticle
{
get { return _to; }
set
{
_to = value;
OnPropertyChanged();
}
}
public override string ToString()
{
return string.Empty;
}
public event PropertyChangedEventHandler PropertyChanged;
protected void OnPropertyChanged([CallerMemberName] string propertyName = "")
{
if (PropertyChanged != null)
PropertyChanged(this, new PropertyChangedEventArgs(propertyName));
}
}
*VB.NET の場合:*
Public Class WikipediaLink
Implements INotifyPropertyChanged
Public Sub New(fromArticle As WikipediaArticle, toArticle As WikipediaArticle)
FromArticle = fromArticle
ToArticle = toArticle
End Sub
Private _from As WikipediaArticle
Public Property FromArticle() As WikipediaArticle
Get
Return _from
End Get
Set
_from = value
OnPropertyChanged()
End Set
End Property
Private _to As WikipediaArticle
Public Property ToArticle() As WikipediaArticle
Get
Return _to
End Get
Set
_to = value
OnPropertyChanged()
End Set
End Property
Public Overrides Function ToString() As String
Return String.Empty
End Function
Public Event PropertyChanged As PropertyChangedEventHandler
Protected Sub OnPropertyChanged( Optional propertyName As String = "")
RaiseEvent PropertyChanged(Me, New PropertyChangedEventArgs(propertyName))
End Sub
End Class
データ項目を追加します。
以下の LinkChainViewModel
クラスを追加すると、ノードおよび接続のための 2 つの リスト プロパティが表示され、サンプル データが自動的に事前設定されます。
public class LinkChainViewModel : INotifyPropertyChanged
{
public LinkChainViewModel()
{
var travolta = new WikipediaArticle("John Travolta");
var hubbard = new WikipediaArticle("L.Ron Hubbard");
var astoria = new WikipediaArticle("Astoria, Oregon");
var goonies = new WikipediaArticle("The Goonies");
var feldman = new WikipediaArticle("Corey Feldman");
var jackson = new WikipediaArticle("Michael Jackson");
var year2001 = new WikipediaArticle("2001");
var year2001music = new WikipediaArticle("2001 in music");
Articles = new ObservableCollection<WikipediaArticle>()
{
travolta,
hubbard,
astoria,
goonies,
feldman,
jackson,
year2001,
year2001music
};
Links = new ObservableCollection<WikipediaLink>()
{
new WikipediaLink(travolta, hubbard),
new WikipediaLink(hubbard, astoria),
new WikipediaLink(astoria, goonies),
new WikipediaLink(goonies, feldman),
new WikipediaLink(feldman, jackson),
new WikipediaLink(travolta, year2001),
new WikipediaLink(year2001, year2001music),
new WikipediaLink(year2001music, jackson)
};
}
private IList<WikipediaArticle> _articles;
public IList<WikipediaArticle> Articles
{
get { return _articles; }
set
{
_articles = value;
OnPropertyChanged();
}
}
private IList<WikipediaLink> _links;
public IList<WikipediaLink> Links
{
get { return _links; }
set
{
_links = value;
OnPropertyChanged();
}
}
public event PropertyChangedEventHandler PropertyChanged;
protected void OnPropertyChanged([CallerMemberName] string propertyName = "")
{
if (PropertyChanged != null)
PropertyChanged(this, new PropertyChangedEventArgs(propertyName));
}
}
VB.NET の場合:
Public Class LinkChainViewModel
Implements INotifyPropertyChanged
Public Sub New()
Dim travolta = New WikipediaArticle("John Travolta")
Dim hubbard = New WikipediaArticle("L.Ron Hubbard")
Dim astoria = New WikipediaArticle("Astoria, Oregon")
Dim goonies = New WikipediaArticle("The Goonies")
Dim feldman = New WikipediaArticle("Corey Feldman")
Dim jackson = New WikipediaArticle("Michael Jackson")
Dim year2001 = New WikipediaArticle("2001")
Dim year2001music = New WikipediaArticle("2001 in music")
Articles = New ObservableCollection(Of WikipediaArticle)() From { _
travolta, _
hubbard, _
astoria, _
goonies, _
feldman, _
jackson, _
year2001, _
year2001music _
}
Links = New ObservableCollection(Of WikipediaLink)() From { _
New WikipediaLink(travolta, hubbard), _
New WikipediaLink(hubbard, astoria), _
New WikipediaLink(astoria, goonies), _
New WikipediaLink(goonies, feldman), _
New WikipediaLink(feldman, jackson), _
New WikipediaLink(travolta, year2001), _
New WikipediaLink(year2001, year2001music), _
New WikipediaLink(year2001music, jackson) _
}
End Sub
Private _articles As IList(Of WikipediaArticle)
Public Property Articles() As IList(Of WikipediaArticle)
Get
Return _articles
End Get
Set(value As IList(Of WikipediaArticle))
_articles = value
OnPropertyChanged()
End Set
End Property
Private _links As IList(Of WikipediaLink)
Public Property Links() As IList(Of WikipediaLink)
Get
Return _links
End Get
Set(value As IList(Of WikipediaLink))
_links = value
OnPropertyChanged()
End Set
End Property
Public Event PropertyChanged As PropertyChangedEventHandler Implements INotifyPropertyChanged.PropertyChanged
Protected Sub OnPropertyChanged(Optional propertyName As String = "")
RaiseEvent PropertyChanged(Me, New PropertyChangedEventArgs(propertyName))
End Sub
End Class
XamDiagram の DataContext を設定します。
ダイアグラムの DataContext
プロパティを LinkChainViewModel
クラスのインスタンスに設定します。
XAML の場合:
<ig:XamDiagram>
<ig:XamDiagram.DataContext>
<local:LinkChainViewModel/>
</ig:XamDiagram.DataContext>
</ig:XamDiagram>
ItemsSource プロパティを設定します。
ItemsSource を LinkChainViewModel
のデータ コンテキストの Articles
プロパティにバインドします。
XAML の場合:
ItemsSource="{Binding Articles}"
ConnectionsSource プロパティを設定します。
ConnectionsSource を LinkChainViewModel
のデータ コンテキストの Links
プロパティにバインドします。
XAML の場合:
ConnectionsSource="{Binding Links}"
通常、 ItemsSource および NodeDefinition の各データ タイプが xamDiagram に追加されます。1 つ以上のタイプに継承関係がある場合、最初に、最も具体的なタイプを指定します。 xamDiagram は、各データ項目のタイプをノード定義の TargetType に一致させようとします。その TargetType が IsAssignableFrom
への呼び出しから true を返す、最初のノード定義が選択されます。これは、ノード定義の TargetType が完全に一致する場合、またはデータ項目のタイプの親タイプである場合に該当し、そうでない場合はノード定義が選択されます。
Manager クラスの NodeDefinition を作成します。
NodeDefinition の TargetType を WikipediaArticle
型に設定します。
DisplayMemberPath を Title に設定します。DisplayMemberPath を定義しないで、カスタム DisplayTemplate via the NodeStyle を設定しないと ToString
メソッドはノードのコンテンツとして表示されます。
(オプション) NodeStyle を設定します。
NodeStyle プロパティを使用して、ノード定義に一致するすべての DiagramNode
オブジェクトのスタイルを設定します。これにより、特定のデータ タイプに対して作成されたノードのカスタマイズが容易になります。
XAML の場合:
<ig:XamDiagram.NodeDefinitions>
<ig:NodeDefinition
TargetType="local:WikipediaArticle"
DisplayMemberPath="Title"/>
</ig:XamDiagram.NodeDefinitions>
個別の接続データ オブジェクトを指定する場合は、ダイアグラムの ConnectionDefinitions の ConnectionSourceDefinition のインスタンスを使用します。このタイプの接続定義では、定義の TargetType に一致する各データ項目に対して作成する接続を記述します。このような接続に StartNode プロパティと EndNode プロパティを正しく事前設定するには、接続定義の StartNodeMemberPath プロパティおよび EndNodeMemberPath プロパティを、開始 / 終了ノードのデータ オブジェクトの参照を保持するプロパティ名に設定することが必要です。
ConnectionSourceDefinition を作成して、ConnectionDefinitions コレクションに追加します。
TargetType を WikipediaLink
型に設定します。
StartNodeMemberPath を "FromArticle」 _ に設定します。EndNodeMemberPath を _"ToArticle" に設定します。
(オプション) ConnectionStyle を設定します。
DiagramConnection を対象とするスタイルに ConnectionStyle プロパティを設定すると、特定のデータ タイプに対して作成される接続をカスタマイズできます。 DisplayTemplate プロパティの設定を指定し、データ オブジェクトを DataContext
として設定するテンプレートを適用できます。
XAML の場合:
<ig:XamDiagram.ConnectionDefinitions>
<ig:ConnectionSourceDefinition
TargetType="local:WikipediaLink"
StartNodeMemberPath="FromArticle"
EndNodeMemberPath="ToArticle"/>
</ig:XamDiagram.ConnectionDefinitions>
以下は、この手順の完全なコードです。
XAML の場合:
<UserControl x:Class="DiagramDocumentationSamples.NodesConnectionsReferencesData"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:ig="http://schemas.infragistics.com/xaml"
xmlns:local="clr-namespace:DiagramDocumentationSamples"
mc:Ignorable="d"
d:DesignHeight="300" d:DesignWidth="300">
<ig:XamDiagram
x:Name="FlatDataDiagram"
ItemsSource="{Binding Articles}"
ConnectionsSource="{Binding Links}">
<ig:XamDiagram.DataContext>
<local:LinkChainViewModel/>
</ig:XamDiagram.DataContext>
<ig:XamDiagram.NodeDefinitions>
<ig:NodeDefinition
TargetType="local:WikipediaArticle"
DisplayMemberPath="Title"/>
</ig:XamDiagram.NodeDefinitions>
<ig:XamDiagram.ConnectionDefinitions>
<ig:ConnectionSourceDefinition
TargetType="local:WikipediaLink"
StartNodeMemberPath="FromArticle"
EndNodeMemberPath="ToArticle"/>
</ig:XamDiagram.ConnectionDefinitions>
<ig:XamDiagram.Layout>
<ig:ForceDirectedGraphDiagramLayout/>
</ig:XamDiagram.Layout>
</ig:XamDiagram>
</UserControl>
C# の場合:
using System.Collections.Generic;
using System.Collections.ObjectModel;
using System.ComponentModel;
using System.Runtime.CompilerServices;
using System.Windows.Controls;
namespace DiagramDocumentationSamples
{
public partial class NodesConnectionsReferencesData : UserControl
{
public NodesConnectionsReferencesData()
{
InitializeComponent();
}
}
public class WikipediaArticle : INotifyPropertyChanged
{
public WikipediaArticle(string title)
{
Title = title;
}
private string _title;
public string Title
{
get { return _title; }
set
{
_title = value;
OnPropertyChanged();
}
}
public event PropertyChangedEventHandler PropertyChanged;
protected void OnPropertyChanged([CallerMemberName] string propertyName = "")
{
if (PropertyChanged != null)
PropertyChanged(this, new PropertyChangedEventArgs(propertyName));
}
}
public class WikipediaLink : INotifyPropertyChanged
{
public WikipediaLink(WikipediaArticle fromArticle, WikipediaArticle toArticle)
{
FromArticle = fromArticle;
ToArticle = toArticle;
}
private WikipediaArticle _from;
public WikipediaArticle FromArticle
{
get { return _from; }
set
{
_from = value;
OnPropertyChanged();
}
}
private WikipediaArticle _to;
public WikipediaArticle ToArticle
{
get { return _to; }
set
{
_to = value;
OnPropertyChanged();
}
}
public override string ToString()
{
return string.Empty;
}
public event PropertyChangedEventHandler PropertyChanged;
protected void OnPropertyChanged([CallerMemberName] string propertyName = "")
{
if (PropertyChanged != null)
PropertyChanged(this, new PropertyChangedEventArgs(propertyName));
}
}
public class LinkChainViewModel : INotifyPropertyChanged
{
public LinkChainViewModel()
{
var travolta = new WikipediaArticle("John Travolta");
var hubbard = new WikipediaArticle("L.Ron Hubbard");
var astoria = new WikipediaArticle("Astoria, Oregon");
var goonies = new WikipediaArticle("The Goonies");
var feldman = new WikipediaArticle("Corey Feldman");
var jackson = new WikipediaArticle("Michael Jackson");
var year2001 = new WikipediaArticle("2001");
var year2001music = new WikipediaArticle("2001 in music");
Articles = new ObservableCollection<WikipediaArticle>()
{
travolta,
hubbard,
astoria,
goonies,
feldman,
jackson,
year2001,
year2001music
};
Links = new ObservableCollection<WikipediaLink>()
{
new WikipediaLink(travolta, hubbard),
new WikipediaLink(hubbard, astoria),
new WikipediaLink(astoria, goonies),
new WikipediaLink(goonies, feldman),
new WikipediaLink(feldman, jackson),
new WikipediaLink(travolta, year2001),
new WikipediaLink(year2001, year2001music),
new WikipediaLink(year2001music, jackson)
};
}
private IList<WikipediaArticle> _articles;
public IList<WikipediaArticle> Articles
{
get { return _articles; }
set
{
_articles = value;
OnPropertyChanged();
}
}
private IList<WikipediaLink> _links;
public IList<WikipediaLink> Links
{
get { return _links; }
set
{
_links = value;
OnPropertyChanged();
}
}
public event PropertyChangedEventHandler PropertyChanged;
protected void OnPropertyChanged([CallerMemberName] string propertyName = "")
{
if (PropertyChanged != null)
PropertyChanged(this, new PropertyChangedEventArgs(propertyName));
}
}
}
VB の場合:
Imports System.Collections.Generic
Imports System.Collections.ObjectModel
Imports System.ComponentModel
Imports System.Runtime.CompilerServices
Imports System.Windows.Controls
Namespace DiagramDocumentationSamples
Public Partial Class NodesConnectionsReferencesData
Inherits UserControl
Public Sub New()
InitializeComponent()
End Sub
End Class
Public Class WikipediaArticle
Implements INotifyPropertyChanged
Public Sub New(title As String)
Title = title
End Sub
Private _title As String
Public Property Title() As String
Get
Return _title
End Get
Set(value As String)
_title = value
OnPropertyChanged()
End Set
End Property
Public Event PropertyChanged As PropertyChangedEventHandler Implements INotifyPropertyChanged.PropertyChanged
Protected Sub OnPropertyChanged(Optional propertyName As String = "")
RaiseEvent PropertyChanged(Me, New PropertyChangedEventArgs(propertyName))
End Sub
End Class
Public Class WikipediaLink
Implements INotifyPropertyChanged
Public Sub New(fromArticle As WikipediaArticle, toArticle As WikipediaArticle)
FromArticle = fromArticle
ToArticle = toArticle
End Sub
Private _from As WikipediaArticle
Public Property FromArticle() As WikipediaArticle
Get
Return _from
End Get
Set(value As WikipediaArticle)
_from = value
OnPropertyChanged()
End Set
End Property
Private _to As WikipediaArticle
Public Property ToArticle() As WikipediaArticle
Get
Return _to
End Get
Set(value As WikipediaArticle)
_to = value
OnPropertyChanged()
End Set
End Property
Public Overrides Function ToString() As String
Return String.Empty
End Function
Public Event PropertyChanged As PropertyChangedEventHandler Implements INotifyPropertyChanged.PropertyChanged
Protected Sub OnPropertyChanged(Optional propertyName As String = "")
RaiseEvent PropertyChanged(Me, New PropertyChangedEventArgs(propertyName))
End Sub
End Class
Public Class LinkChainViewModel
Implements INotifyPropertyChanged
Public Sub New()
Dim travolta = New WikipediaArticle("John Travolta")
Dim hubbard = New WikipediaArticle("L.Ron Hubbard")
Dim astoria = New WikipediaArticle("Astoria, Oregon")
Dim goonies = New WikipediaArticle("The Goonies")
Dim feldman = New WikipediaArticle("Corey Feldman")
Dim jackson = New WikipediaArticle("Michael Jackson")
Dim year2001 = New WikipediaArticle("2001")
Dim year2001music = New WikipediaArticle("2001 in music")
Articles = New ObservableCollection(Of WikipediaArticle)() From { _
travolta, _
hubbard, _
astoria, _
goonies, _
feldman, _
jackson, _
year2001, _
year2001music _
}
Links = New ObservableCollection(Of WikipediaLink)() From { _
New WikipediaLink(travolta, hubbard), _
New WikipediaLink(hubbard, astoria), _
New WikipediaLink(astoria, goonies), _
New WikipediaLink(goonies, feldman), _
New WikipediaLink(feldman, jackson), _
New WikipediaLink(travolta, year2001), _
New WikipediaLink(year2001, year2001music), _
New WikipediaLink(year2001music, jackson) _
}
End Sub
Private _articles As IList(Of WikipediaArticle)
Public Property Articles() As IList(Of WikipediaArticle)
Get
Return _articles
End Get
Set(value As IList(Of WikipediaArticle))
_articles = value
OnPropertyChanged()
End Set
End Property
Private _links As IList(Of WikipediaLink)
Public Property Links() As IList(Of WikipediaLink)
Get
Return _links
End Get
Set(value As IList(Of WikipediaLink))
_links = value
OnPropertyChanged()
End Set
End Property
Public Event PropertyChanged As PropertyChangedEventHandler Implements INotifyPropertyChanged.PropertyChanged
Protected Sub OnPropertyChanged(Optional propertyName As String = "")
RaiseEvent PropertyChanged(Me, New PropertyChangedEventArgs(propertyName))
End Sub
End Class
End Namespace
このトピックの追加情報については、以下のトピックも合わせてご参照ください。