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