LoginSignup
16

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

まとめ

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

参考

かずきのBlog@hatena

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
16