12
17

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 5 years have passed since last update.

WPF TreeViewを使ってみた

Posted at

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にするとこんな感じになる `` ![2017-04-27_10h18_31.jpg](https://qiita-image-store.s3.amazonaws.com/0/145898/b8be48a2-4a8d-9499-8713-2a121a1b3c31.jpeg)

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

##参考
かずきのBlog@hatena

12
17
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
12
17

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?