このサイトで 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)

トピックの概要

目的

このトピックでは、xamDiagram™ コントロールを階層ノードデータにバインドする方法を説明します。

前提条件

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

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

参照を持つ階層ノードデータへの xamDiagram のバインド

概要

以下の手順では、入力データオブジェクトがノードを表し、各ノードが子ノードオブジェクトのコレクションを持つデータに xamDiagram をバインドする方法を示します。

プレビュー

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

xamDiagram Bind To Hierarchical Node Data With References 1.png

前提条件

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

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

概要

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

. ItemsSource プロパティの構成

. ノード定義の作成

. 接続定義の作成

手順

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

1.ItemsSource の設定

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

以下の Employee クラスと Manager クラスをコードビハインドに追加します。Manager クラスは、マネージャーの下位を含む Employee インスタンスがあるリストプロパティを持ちます。このプロパティは、xamDiagram の Manager-Employee 関係を作成するために使用されます。親子タイプの継承関係に対する要件はなく、自己参照タイプを使用することもできます。

C# の場合:

public class Employee : INotifyPropertyChanged
{
    public Employee(string name)
    {
        Name = name;
    }
    private string _name;
    public string Name
    {
        get { return _name; }
        set
        {
            _name = value;
            OnPropertyChanged();
        }
    }

    public event PropertyChangedEventHandler PropertyChanged;
    protected void OnPropertyChanged([CallerMemberName] string propertyName = "")
    {
        if (PropertyChanged != null)
            PropertyChanged(this, new PropertyChangedEventArgs(propertyName));
    }
}

public class Manager : Employee
{
    public Manager(string name) : base(name) { }

    private IList<Employee> _subordinates;
    public IList<Employee> Subordinates
    {
        get { return _subordinates; }
        set
        {
            _subordinates = value;
            OnPropertyChanged();
        }
    }
}

VB の場合:

Public Class Employee
    Implements INotifyPropertyChanged

    Public Sub New(name As String)
        Name = name
    End Sub

    Private _name As String
    Public Property Name() As String
        Get
            Return _name
        End Get
        Set(value As String)
            _name = 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 Manager
    Inherits Employee

    Public Sub New(name As String)
        MyBase.New(name)
    End Sub

    Private _subordinates As IList(Of Employee)
    Public Property Subordinates() As IList(Of Employee)
        Get
            Return _subordinates
        End Get
        Set(value As IList(Of Employee))
            _subordinates = value
            OnPropertyChanged()
        End Set
    End Property
End Class

ビューモデルクラスを追加します。

xamDiagram がバインドされる以下のビューモデルクラスを追加します。

C# の場合:

public class EmployeeViewModel : INotifyPropertyChanged
{
    public EmployeeViewModel()
    {
        var employees = new ObservableCollection<Employee>();
        var sharedEmployee = new Employee("Shared Employee");
        employees.Add(new Manager("Manager 1")
        {
            Subordinates = new List<Employee>()
            {
                new Employee("Employee 1"),
                new Employee("Employee 2"),
                new Employee("Employee 3"),
                new Employee("Employee 4"),
                sharedEmployee
            }
        });
        employees.Add(new Manager("Manager 2")
        {
            Subordinates = new List<Employee>()
            {
                sharedEmployee,
                new Employee("Employee 5"),
                new Employee("Employee 6"),
                new Employee("Employee 7"),
                new Employee("Employee 8"),
                new Employee("Employee 9")
            }
        });
        employees.Add(new Employee("Employee 10"));
        Employees = employees;
    }

    private IList<Employee> _employees;
    public IList<Employee> Employees
    {
        get { return _employees; }
        set
        {
            _employees = value;
            OnPropertyChanged();
        }
    }

    public event PropertyChangedEventHandler PropertyChanged;
    protected void OnPropertyChanged([CallerMemberName] string propertyName = "")
    {
        if (PropertyChanged != null)
            PropertyChanged(this, new PropertyChangedEventArgs(propertyName));
    }
}

VB の場合:

Public Class EmployeeViewModel
    Implements INotifyPropertyChanged

    Public Sub New()
        Dim employees = New ObservableCollection(Of Employee)()
        Dim sharedEmployee = New Employee("Shared Employee")

        employees.Add(New Manager("Manager 1") With { _
            .Subordinates = New List(Of Employee)() From { _
                New Employee("Employee 1"), _
                New Employee("Employee 2"), _
                New Employee("Employee 3"), _
                New Employee("Employee 4"), _
                sharedEmployee _
            } _
        })
        employees.Add(New Manager("Manager 2") With { _
            .Subordinates = New List(Of Employee)() From { _
                sharedEmployee, _
                New Employee("Employee 5"), _
                New Employee("Employee 6"), _
                New Employee("Employee 7"), _
                New Employee("Employee 8"), _
                New Employee("Employee 9") _
            } _
        })
        employees.Add(New Employee("Employee 10"))
        Employees = employees
    End Sub

    Private _employees As IList(Of Employee)
    Public Property Employees() As IList(Of Employee)
        Get
            Return _employees
        End Get
        Set(value As IList(Of Employee))
            _employees = 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

ItemsSource` プロパティを設定します。

DataContext をビューモデルクラスの新しいインスタンスに設定し、 ItemsSource をEmployeeViewModel クラスの Employees プロパティにバインドします。

XAML の場合:

<ig:XamDiagram x:Name="HierarchicalDiagram"
    ItemsSource="{Binding Employees}">
    <ig:XamDiagram.DataContext>
        <local:EmployeeViewModel/>
    </ig:XamDiagram.DataContext>
</ig:XamDiagram>

2.ノード定義の作成

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

Manager クラスの NodeDefinition を追加します。

NodeDefinition の TargetType を Manager タイプに設定します。
ChildrenMemberPath を子オブジェクトのコレクションを保持するプロパティの名前に設定します。
この場合は「Subordinates」プロパティです。
DisplayMemberPath を設定します。 DisplayMemberPath を指定しないで、NodeStyle でカスタム DisplayTemplate を設定しない場合、ToString メソッドの結果はノードのコンテンツとして表示されます。
(オプション) NodeStyle を設定します。
NodeStyle プロパティを使用すると、ノード定義によって一致するすべての DiagramNode オブジェクトに適用するスタイルを設定できます。これにより、特定のデータタイプに対して作成されたノードのカスタマイズが容易になります。

XAML の場合:

<ig:NodeDefinition
    TargetType="{x:Type local:Manager}"
    ChildrenMemberPath="Subordinates"
    DisplayMemberPath="Name">
    <ig:NodeDefinition.NodeStyle>
        <Style TargetType="ig:DiagramNode">
            <Setter Property="FontSize" Value="18"/>
            <Setter Property="Fill" Value="Green"/>
            <Setter Property="ShapeType" Value="Ellipse"/>
            <Setter Property="Stroke" Value="Transparent"/>
        </Style>
    </ig:NodeDefinition.NodeStyle>
</ig:NodeDefinition>

.Employee クラスのノード定義を追加します。

TargetType と DisplayMemberPath を定義するノード定義を追加します。DisplayTemplate プロパティのセッターを使用して、 NodeStyle を以下のように設定します。

XAML の場合:

<ig:NodeDefinition
    TargetType="{x:Type local:Employee}">
    <ig:NodeDefinition.NodeStyle>
        <Style TargetType="ig:DiagramNode">
            <Setter Property="DisplayTemplate">
                <Setter.Value>
                    <DataTemplate>
                        <TextBlock
                            HorizontalAlignment="Center"
                            Text="{Binding Name}"
                            Foreground="Green"/>
                    </DataTemplate>
                </Setter.Value>
            </Setter>
            <Setter Property="Fill" Value="LightGreen"/>
            <Setter Property="Stroke" Value="Transparent"/>
        </Style>
    </ig:NodeDefinition.NodeStyle>
</ig:NodeDefinition>

3.階層接続定義の作成

ConnectionDefinition を作成し、 ConnectionDefinitions コレクションに追加します。接続定義では、 xamDiagram が生成するデータ項目の親子関係の接続のカスタムスタイルを設定できます。接続定義は、 StartTargetType プロパティと EndTargetType プロパティで一致が行われます。この例では、Manager タイプと Employee タイプに接続定義を設定します。

ConnectionStyle プロパティを、 DiagramConnection をターゲットとするスタイルに設定します。

XAML の場合:

<ig:ConnectionDefinition
    StartTargetType="{x:Type local:Manager}"
    EndTargetType="{x:Type local:Employee}">
    <ig:ConnectionDefinition.ConnectionStyle>
        <Style TargetType="ig:DiagramConnection">
            <Setter Property="Stroke" Value="DarkGreen"/>
            <Setter Property="Foreground" Value="DarkGreen"/>
            <Setter Property="Fill" Value="DarkGreen"/>
            <Setter Property="Content" Value="Reports to"/>
            <Setter Property="EndCapType" Value="None"/>
            <Setter Property="StartCapType" Value="FilledArrow"/>
        </Style>
    </ig:ConnectionDefinition.ConnectionStyle>
</ig:ConnectionDefinition>

全コード

以下は、この手順の完全なコードです。

XAML の場合:

<UserControl x:Class="DiagramDocumentationSamples.HierararchicalReferencesData"
    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="HierarchicalDiagram" ItemsSource="{Binding Employees}">
        <ig:XamDiagram.DataContext>
            <local:EmployeeViewModel/>
        </ig:XamDiagram.DataContext>

        <ig:XamDiagram.NodeDefinitions>
            <ig:NodeDefinition
                TargetType="{x:Type local:Manager}"
                ChildrenMemberPath="Subordinates"
                DisplayMemberPath="Name">
                <ig:NodeDefinition.NodeStyle>
                    <Style TargetType="ig:DiagramNode">
                        <Setter Property="FontSize" Value="18"/>
                        <Setter Property="Fill" Value="Green"/>
                        <Setter Property="ShapeType" Value="Ellipse"/>
                        <Setter Property="Stroke" Value="Transparent"/>
                    </Style>
                </ig:NodeDefinition.NodeStyle>
            </ig:NodeDefinition>
            <ig:NodeDefinition
                TargetType="{x:Type local:Employee}">
                <ig:NodeDefinition.NodeStyle>
                    <Style TargetType="ig:DiagramNode">
                        <Setter Property="DisplayTemplate">
                            <Setter.Value>
                                <DataTemplate>
                                    <TextBlock
                                        HorizontalAlignment="Center"
                                        Text="{Binding Name}"
                                        Foreground="Green"/>
                                </DataTemplate>
                            </Setter.Value>
                        </Setter>
                        <Setter Property="Fill" Value="LightGreen"/>
                        <Setter Property="Stroke" Value="Transparent"/>
                    </Style>
                </ig:NodeDefinition.NodeStyle>
            </ig:NodeDefinition>
        </ig:XamDiagram.NodeDefinitions>

        <ig:XamDiagram.ConnectionDefinitions>
            <ig:ConnectionDefinition
                StartTargetType="{x:Type local:Manager}"
                EndTargetType="{x:Type local:Employee}">
                <ig:ConnectionDefinition.ConnectionStyle>
                    <Style TargetType="ig:DiagramConnection">
                        <Setter Property="Stroke" Value="DarkGreen"/>
                        <Setter Property="Foreground" Value="DarkGreen"/>
                        <Setter Property="Fill" Value="DarkGreen"/>
                        <Setter Property="Content" Value="Reports to"/>
                        <Setter Property="EndCapType" Value="None"/>
                        <Setter Property="StartCapType" Value="FilledArrow"/>
                    </Style>
                </ig:ConnectionDefinition.ConnectionStyle>
            </ig:ConnectionDefinition>
        </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 HierararchicalReferencesData : UserControl
    {
        public HierararchicalReferencesData()
        {
            InitializeComponent();
        }
    }

    public class Employee : INotifyPropertyChanged
    {
        public Employee(string name)
        {
            Name = name;
        }

        private string _name;
        public string Name
        {
            get { return _name; }
            set
            {
                _name = value;
                OnPropertyChanged();
            }
        }

        public event PropertyChangedEventHandler PropertyChanged;
        protected void OnPropertyChanged([CallerMemberName] string propertyName = "")
        {
            if (PropertyChanged != null)
                PropertyChanged(this, new PropertyChangedEventArgs(propertyName));
        }
    }

    public class Manager : Employee
    {
        public Manager(string name) : base(name) { }

        private IList<Employee> _subordinates;
        public IList<Employee> Subordinates
        {
            get { return _subordinates; }
            set
            {
                _subordinates = value;
                OnPropertyChanged();
            }
        }
    }

    public class EmployeeViewModel : INotifyPropertyChanged
    {
        public EmployeeViewModel()
        {
            var employees = new ObservableCollection<Employee>();
            var sharedEmployee = new Employee("Shared Employee");
            employees.Add(new Manager("Manager 1")
            {
                Subordinates = new List<Employee>()
                {
                    new Employee("Employee 1"),
                    new Employee("Employee 2"),
                    new Employee("Employee 3"),
                    new Employee("Employee 4"),
                    sharedEmployee
                }
            });
            employees.Add(new Manager("Manager 2")
            {
                Subordinates = new List<Employee>()
                {
                    sharedEmployee,
                    new Employee("Employee 5"),
                    new Employee("Employee 6"),
                    new Employee("Employee 7"),
                    new Employee("Employee 8"),
                    new Employee("Employee 9")
                }
            });
            employees.Add(new Employee("Employee 10"));
            Employees = employees;
        }

        private IList<Employee> _employees;
        public IList<Employee> Employees
        {
            get { return _employees; }
            set
            {
                _employees = 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 HierararchicalReferencesData
        Inherits UserControl

        Public Sub New()
            InitializeComponent()
        End Sub
    End Class

    Public Class Employee
        Implements INotifyPropertyChanged

        Public Sub New(name As String)
            Name = name
        End Sub

        Private _name As String
        Public Property Name() As String
            Get
                Return _name
            End Get
            Set(value As String)
                _name = 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 Manager
        Inherits Employee

        Public Sub New(name As String)
            MyBase.New(name)
        End Sub

        Private _subordinates As IList(Of Employee)
        Public Property Subordinates() As IList(Of Employee)
            Get
                Return _subordinates
            End Get
            Set(value As IList(Of Employee))
                _subordinates = value
                OnPropertyChanged()
            End Set
        End Property
    End Class

    Public Class EmployeeViewModel
        Implements INotifyPropertyChanged

        Public Sub New()
            Dim employees = New ObservableCollection(Of Employee)()
            Dim sharedEmployee = New Employee("Shared Employee")

            employees.Add(New Manager("Manager 1") With { _
                .Subordinates = New List(Of Employee)() From { _
                    New Employee("Employee 1"), _
                    New Employee("Employee 2"), _
                    New Employee("Employee 3"), _
                    New Employee("Employee 4"), _
                    sharedEmployee _
                } _
            })
            employees.Add(New Manager("Manager 2") With { _
                .Subordinates = New List(Of Employee)() From { _
                    sharedEmployee, _
                    New Employee("Employee 5"), _
                    New Employee("Employee 6"), _
                    New Employee("Employee 7"), _
                    New Employee("Employee 8"), _
                    New Employee("Employee 9") _
                } _
            })
            employees.Add(New Employee("Employee 10"))
            Employees = employees
        End Sub

        Private _employees As IList(Of Employee)
        Public Property Employees() As IList(Of Employee)
            Get
                Return _employees
            End Get
            Set(value As IList(Of Employee))
                _employees = 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 )	このトピックでは、入力データオブジェクトがノードおよび接続を表し、各接続オブジェクトが開始ノードと終了ノードを表す 2 つのノードオブジェクトへの参照を持つデータに、 xamDiagram コントロールをバインドする方法の手順を説明します。
キーを持つノードおよび接続データへのバインド ( xamDiagram )	このトピックでは、入力データオブジェクトがノードおよび接続を表すデータに xamDiagram コントロールをバインドする方法の手順を説明します。ノードオブジェクトはそれぞれ一意の文字列識別子を持ち、接続オブジェクトはそれぞれ開始ノードと終了ノードを表す 2 つのノードオブジェクトの識別子を保持する 2 つのプロパティを持ちます。
キーを持つ階層ノードデータへのバインド ( xamDiagram )	このトピックでは、キーを持つ階層ノードデータに xamDiagram コントロールをバインドする方法を説明します。

WPF | ヘルプ トピック

参照を持つ階層ノード データへのバインド (xamDiagram)

トピックの概要

目的

前提条件

このトピックの内容

参照を持つ階層ノード データへの xamDiagram のバインド

概要

プレビュー

前提条件

概要

手順

1.ItemsSource の設定

2.ノード定義の作成

3.階層接続定義の作成

全コード

関連コンテンツ

WPF | ヘルプトピック

参照を持つ階層ノードデータへのバインド (xamDiagram)

参照を持つ階層ノードデータへの xamDiagram のバインド