C#
WPF
VisualStudio

WPF TreeViewを使ってみた

More than 1 year has passed since last update.

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

作るもの

こんな感じのものを作ってみる
2017-04-27_09h39_04.jpg

作ってみる

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にするとこんな感じになる
<CheckBox Content="{Binding Name}"/>
2017-04-27_10h18_31.jpg

まとめ

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

参考

かずきのBlog@hatena