WPF4.5入門その26 「TreeViewコントロールその2」

今回も、前回に引き続きTreeViewコントロールについてみていこうとおもいます。

TreeViewのItemTemplate

TreeViewコントロールもDataGridコントロールと同様にItemsSourceプロパティにコレクションを設定することで、任意の型のコレクションのデータを表示できます。TreeViewコントロールのItemTemplateには、木構造のデータを扱うためにDataTemplateを拡張したHierarchicalDataTemplateを使用します。HierarchicalDataTemplateは、通常のDataTemplateと同様にデータの見た目を定義するために使います。DataTemplateと異なる点は、ItemsSourceプロパティに、現在表示している要素の子にあたるものをItemsSourceプロパティに設定する点です。HierarchicalDataTemplateによるデータの見た目の定義と、ItemsSourceプロパティにもとづいてTreeViewコントロールのTreeViewItemコントロール組み立てられます。
HierarchicalDataTemplateの動作を確認するために、以下のような木構造をもったPersonクラスをTreeViewコントロールに表示してみます。

using System.Collections.Generic;

namespace TreeViewSample03
{
    public class Person
    {
        public string Name { get; set; }
        public List<Person> Children { get; set; }
    }
}

画面に、Personクラスを表示するためのTreeViewコントロールを置きます。

<TreeView Name="treeView">
</TreeView>

画面のコンストラクタで、このTreeViewコントロールのItemsSourceプロパティにPersonクラスのListを設定します。

public MainWindow()
{
    InitializeComponent();
    this.treeView.ItemsSource = new List<Person>
    {
        new Person
        {
            Name = "田中　太郎",
            Children = new List<Person>
            {
                new Person { Name = "田中　花子" },
                new Person { Name = "田中　一郎" },
                new Person
                {
                    Name = "木村　貫太郎",
                    Children = new List<Person>
                    {
                        new Person { Name = "木村　はな" },
                        new Person { Name = "木村　梅" },
                    }
                }
            }
        },
        new Person
        {
            Name = "田中　次郎",
            Children = new List<Person>
            {
                new Person { Name = "田中　三郎" }
            }
        }
    };
}

この状態で画面を表示すると、以下のようにPersonクラスをToStringした結果が2つTreeViewコントロールに表示されます

PersonクラスのNameプロパティが表示されるようにTreeViewコントロールのItemTemplateプロパティを設定します。ここでは、HierarchicalDataTemplateを使用していますが、ItemsSourceプロパティにを設定していないので単純にTreeViewコントロールに名前が表示されるだけになります。

xmlns:local="clr-namespace:TreeViewSample03"


<TreeView Name="treeView">
    <TreeView.ItemTemplate>
        <HierarchicalDataTemplate DataType="local:Person">
            <TextBlock Text="{Binding Name}" />
        </HierarchicalDataTemplate>
    </TreeView.ItemTemplate>
</TreeView>

MainWindowの属性でxmlnsを使ってPersonクラスのある名前空間をlocalという名前で参照できるようにしてHierarchicalDataTemplateのDataTypeプロパティで、扱う型がPersonクラスであることを指定しています。実行すると以下のような表示になります。

この状態では、ルートの要素しか表示されないのでHierarchicalDataTemplateのItemsSourceプロパティにPersonクラスのChildrenプロパティをバインドします。XAMLを以下に示します。

<TreeView Name="treeView">
    <TreeView.ItemTemplate>
        <HierarchicalDataTemplate DataType="local:Person" ItemsSource="{Binding Children}">
            <TextBlock Text="{Binding Name}" />
        </HierarchicalDataTemplate>
    </TreeView.ItemTemplate>
</TreeView>