このサイトで JavaScript が必要です。

バージョン

Is this content useful?

Thank you for your feedback!

Thank you for your feedback! You have rated this topic in the last 30 days.

参照を持つノードおよび接続データへのバインド (xamDiagram)

トピックの概要

目的

このトピックでは、入力データオブジェクトがノードおよび接続を表し、各接続オブジェクトが開始ノードと終了ノードを表す 2 つのノードオブジェクトへの参照を持つデータに、 xamDiagram™ コントロールをバインドする方法の手順を説明します。

前提条件

このトピックを理解するために、以下のトピックを参照することをお勧めします。

トピック	目的
データへの xamDiagram のバインド	このトピックでは、 xamDiagram コントロールがサポートするデータバインディングシナリオの概要を説明します。

参照を持つノードおよび接続データへのバインド

概要

以下の手順では、各接続オブジェクトが開始ノードと終了ノードを表す 2 つのノードオブジェクトへの参照を持つ、ノードおよび接続を表すデータオブジェクトに xamDiagram をバインドする方法を説明します。

プレビュー

以下のスクリーンショットは結果のプレビューです。

xamDiagram Binding to Nodes and Connections Data with References 1.png

前提条件

この手順を実行するには、以下が必要です。

ページに追加される空の xamDiagram を持つ WPF アプリケーション
ForceDirectedGraphDiagramLayout のインスタンスに設定される xamDiagram の Layout プロパティ

概要

以下はプロセスの概要です。

ItemsSource と ConnectionSource の設定

手順

接続定義の作成

以下の手順では、参照を持つ階層ノードデータに xamDiagram をバインドする方法を説明します。

1.ItemsSource と ConnectionSource の設定

サンプルノードのデータクラスを追加します。

以下の 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));
    }
}

VB.NET の場合:

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 つのリストプロパティが表示され、サンプルデータが自動的に事前設定されます。

C# の場合:

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}"

2.ノード定義の作成

通常、 ItemsSource および NodeDefinition の各データタイプが xamDiagram に追加されます。1 つ以上のタイプに継承関係がある場合、最初に、最も具体的なタイプを指定します。xamDiagram は、各データ項目のタイプをノード定義の TargetType に一致させようとします。その TargetType が IsAssignableFrom への呼び出しから true を返す、最初のノード定義が選択されます。これは、ノード定義の TargetType が完全に一致する場合、またはデータ項目のタイプの親タイプである場合に該当し、そうでない場合はノード定義が選択されます。

Manager クラスの NodeDefinition を作成します。
NodeDefinition の TargetType を WikipediaArticle 型に設定します。
DisplayMemberPath を Title に設定します。DisplayMemberPath を定義しないで、NodeStyle を介してカスタム DisplayTemplate を設定しないと ToString メソッドはノードのコンテンツとして表示されます。
(オプション) NodeStyle を設定します。
NodeStyle プロパティを使用して、ノード定義に一致するすべての DiagramNode オブジェクトのスタイルを設定します。これにより、特定のデータタイプに対して作成されたノードのカスタマイズが容易になります。

XAML の場合:

<ig:XamDiagram.NodeDefinitions>
    <ig:NodeDefinition
        TargetType="local:WikipediaArticle"
        DisplayMemberPath="Title"/>
</ig:XamDiagram.NodeDefinitions>

3.接続定義の作成

個別の接続データオブジェクトを指定する場合は、ダイアグラムの 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

トピック	目的
キーを持つノードおよび接続データへのバインド ( xamDiagram )	このトピックでは、入力データオブジェクトがノードおよび接続を表すデータに xamDiagram コントロールをバインドする方法の手順を説明します。ノードオブジェクトはそれぞれ一意の文字列識別子を持ち、接続オブジェクトはそれぞれ開始ノードと終了ノードを表す 2 つのノードオブジェクトの識別子を保持する 2 つのプロパティを持ちます。
参照を持つ階層ノードデータへのバインド ( xamDiagram )	このトピックでは、xamDiagram コントロールを階層ノードデータにバインドする方法を説明します。
キーを持つ階層ノードデータへのバインド ( xamDiagram )	このトピックでは、キーを持つ階層ノードデータに xamDiagram コントロールをバインドする方法を説明します。

WPF | ヘルプ トピック

参照を持つノードおよび接続データへのバインド (xamDiagram)

トピックの概要

目的

前提条件

このトピックの内容

参照を持つノードおよび接続データへのバインド

概要

プレビュー

前提条件

概要

手順

1.ItemsSource と ConnectionSource の設定

2.ノード定義の作成

3.接続定義の作成

全コード

関連コンテンツ

WPF | ヘルプトピック