階層構造を持つデータの表示
XamDataTreeコントロールでは階層構造データを取り扱うためにGlobalNodeLayoutsプロパティが定義されています。
このプロパティにはNodeLayoutオブジェクトを複数に定義することができます。
NodeLayoutオブジェクトはあらかじめ各種データに対する表示方法を以下のように定義しておくことができます。
| NodeLayoutプロパティ | 設定する値 |
| Key | NodeLayoutオブジェクトの特定に利用される一意の識別子を設定 |
| TargetTypeName | 表示を行うノードの型（クラス） |
| DisplayMemberPath | 表示対象となる項目のプロパティパス |
そして、ItemsSourceプロパティに対して実際のデータがセットされた際、XamDataTreeコントロールはそのデータの階層構造を解析し、発見した各ノードの型に対応するNodeLayoutオブジェクトをGlobalNodeLayoutsプロパティ内に発見すると、それを利用して階層構造の各Nodeを表示します。
あらためてこれらを整理すると以下のような形になります。
それでは実際にLIST5で定義したエンティティクラスを使って階層構造を持つデータの表示を行ってみましょう。
まず、エンティティクラスを利用して、最初に以下のような階層構造データをLoadedイベントでコーディングします。
- サンプルプログラム6： 06-TreeData.zip
private ObservableCollection<Person> persons;
private void UserControl_Loaded(object sender, RoutedEventArgs e)
{
persons = new ObservableCollection<Person>
{
new Person { PersonName = "しるば太郎",
Children =
{
new Person { PersonName = "しるば子太郎"}
}
},
new Person { PersonName = "しるば次郎",
Children =
{
new Person {PersonName = "しるば子次郎"},
new Person {PersonName = "しるば子三郎",
Children = { new Person {PersonName = "しるば孫太郎"}}
},
}
},
new Person { PersonName = "しるば三郎" },
new Person { PersonName = "しるば四郎" },
new Person { PersonName = "しるば五郎" }
};
xamDataTree1.ItemsSource = persons;
}
上記のコードのほとんどはPersonクラスを使って階層構造を持つデータの作成であり、XamDataTreeコントロールにはItemsSourceプロパティにデータを設定したのみです。
次にXAMLです。
GlobalNodeLayoutsプロパティにPerson型に対応するNodeLayoutを定義します。そして、階層の最上階層を表示するためのDisplayMemberPathも併せて設定します。
<ig:XamDataTree Name="xamDataTree1" DisplayMemberPath="PersonName" >
<ig:XamDataTree.GlobalNodeLayouts>
<ig:NodeLayout
Key="ChildrenLayout"
TargetTypeName="Person"
DisplayMemberPath="PersonName"/>
</ig:XamDataTree.GlobalNodeLayouts>
</ig:XamDataTree>
実行結果は以下のようになります。
もし、階層構造のメンバーに複数のデータ型が存在する場合、GlobalNodeLayoutsにその型に対応するNodeLayoutを追加するのみで複雑な階層構造も簡単にマッピングできます。
おわりに
今回は階層構造を表示するためのコントロールTreeViewコントロールとXamDataTreeコントロールを紹介しました。
今回の記事の中で、TreeViewコントロールを使った階層構造のデータを表示する方法に触れていませんでしたが、TreeViewコントロールは残念ながらXamDataTreeのようにプロパティ設定だけでデータに対してのマッピングを行う機能はありません。
TreeViewコントロールで特定エンティティクラスとして定義された階層構造を持つオブジェクトの表示を行うには各Templateのカスタマイズが必要となります。
次回は、これらのTemplateをはじめとするTreeViewおよびXamDataTreeのカスタマイズの方法について説明したいと思います。
