XamDiagram – ノードおよび接続線へのバインディング方法

XamDiagramは、各ノードと接続線の関係をバインディングを行い表現することができます。

この記事では、下記イメージをXamDiagramで表現するサンプルを解説します。

バインドするためのプロパティ

①各ノードのバインド

重要なプロパティ

• XamDiagram.ItemsSouce … 各ノードのアイテムソース
• NodeDefinition.TargetType … ノードの型情報
• NodeDefinition.DisplayMemberPath 　　… ノード情報に表示するテキストプロパティ

②接続のバインド

重要なプロパティ

• XamDiagram.ConnectionsSource … コネクションのアイテムソース
• ConnectionSourceDefinition.TargetType … ノード間をつなぐ線の型情報
• ConnectionSourceDefinition.StartNodeMemberPath … 始点となるノード
• ConnectionSourceDefinition.EndNodeMemberPath … 終点となるノード

サンプルコード

        <!--ItemsSource はノード-->
        <!--ConnectionsSource はノード間をつなぐ線-->
        <ig:XamDiagram
            x:Name="xamDiagram1"
            ItemsSource="{Binding Nodes}"
            ConnectionsSource="{Binding Lines}">
            <ig:XamDiagram.DataContext>
                <vms:NodeLineViewModel/>
            </ig:XamDiagram.DataContext>
            <ig:XamDiagram.NodeDefinitions>
                <!--TargetType: ノードの型情報
                    Title: ノード上に表示するテキストプロパティ-->
                <ig:NodeDefinition
                    TargetType="models:Node"
                    DisplayMemberPath="Title"/>
            </ig:XamDiagram.NodeDefinitions>
            <ig:XamDiagram.ConnectionDefinitions>
                <!--TargetType: ノード間をつなぐ線の型情報
                    StartNodeMemberPath: 始点となるノード
                    EndNodeMemberPath: 終点となるノード-->
                <ig:ConnectionSourceDefinition
                    TargetType="models:Line"
                    StartNodeMemberPath="StartNode"
                    EndNodeMemberPath="EndNode"/>
            </ig:XamDiagram.ConnectionDefinitions>
            <ig:XamDiagram.Layout>
                <ig:ForceDirectedGraphDiagramLayout/>
            </ig:XamDiagram.Layout>
        </ig:XamDiagram>

サンプルアプリケーションのダウンロードはこちらから