WPFでTreeViewが使いたくてググったものを試してみたら少しハマった

作るもの

こんな感じのものを作ってみる

作ってみる

MVVM的に作ってみる

Model

まずはModelを作る
NameプロパティとListで自身を持てるプロパティを作っとく

    public class Person
    {
        public string Name { get; set; }
        public List<Person> Child { get; set; }
    }

ViewModel

そんでViewModel
ここではテスト用にコンストラクタでデータを入れている
実際はModelのプロパティだけ定義しといてデータは別で入れたりすると思う

    public class VM_Person
    {
        public List<Person> _person { get; set; }

        public VM_Person()
        {
            _person = new List<Person>()
            {
                new Person()
                {
                    Name = "test1",
                    Child = new List<Person>()
                    {
                        new Person() { Name = "test1-1" },
                        new Person() { Name = "test1-2" },
                        new Person() { Name = "test1-3" },
                    }
                },
                new Person()
                {
                    Name = "test2",
                    Child = new List<Person>()
                    {
                        new Person() { Name = "test2-1" },
                        new Person()
                        {
                            Name = "test2-2",
                            Child = new List<Person>()
                            {
                                new Person() { Name = "test2-2-1" },
                                new Person() { Name = "test2-2-2" }
                            }
                        }
                    }
                }
            };
        }
    }

実はここでハマった
この_personプロパティをListにしていなかった
✕　public Person _person { get; set; }
○　public List<Person> _person { get; set; }
TreeViewはItemSourceにコレクションを指定するから当然なんだけど...

View

最後にView
(TreeView以外は省略)

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

TreeView

ItemSource　→　ViewModelのプロパティ( _person )

HierarchicalDataTemplate

DataType　→　扱う型を指定( Person )

ItemSource　→　子要素のプロパティ( Child )

TextBlock

Text　→　Personが持つプロパティ( Name )

ちなみにHierarchicalDataTemplate 内で指定したTextBlock は他のコントロールでもOK(但し1つのみ設定可能)で、例えばCheckBoxにするとこんな感じになる `` ![2017-04-27_10h18_31.jpg](https://qiita-image-store.s3.amazonaws.com/0/145898/b8be48a2-4a8d-9499-8713-2a121a1b3c31.jpeg)

まとめ

少しハマったけどTreeViewの実装自体は結構簡単そう
要素の取得方法とかはまだ分かってない...
調べてまとめようと思う

参考

かずきのBlog@hatena