TreeViewに階層構造オブジェクトをバインドするHierarchicalDataTemplate

はじめに

もうなんかなんとか Template が多すぎて意味不明。そんなにまとまってないが、出来る限りまとめておく。

基本的には

• Template には ControlTemplate
• ItemTemplate には ほにゃらら DataTemplate で覚えておく。

TreeView は ItemTemplate に HierarchicalDataTemplate でよさそう。

HierarchicalDataTemplate

階層構造のオブジェクトを TreeView にバインドするには、HierarchicalDataTemplate を用いる。

ツリービューの ItemTemplate には後述の HierarchicalDataTemplate の x:Key を設定する。

<TreeView ItemTemplate="{StaticResource topLevelTemplate}">

Window.Resources かどっかで HierarchicalDataTemplate を定義する。下の階層から順番に定義する。

<!-- 第 2 階層の DataTemplate -->
<HierarchicalDataTemplate x:Key="secondLevelTemplate" >
    <TextBlock Text="{Binding Path=DisplayText}" />
</HierarchicalDataTemplate>
<!-- 第 1 階層の DataTemplate -->
<HierarchicalDataTemplate x:Key="topLevelTemplate"
                          ItemsSource="{Binding Path=SecondLevels}"
                          ItemTemplate="{StaticResource secondLevelTemplate}">
        <TextBlock Text="{Binding Path=DisplayText}" FontWeight="Bold" />
</HierarchicalDataTemplate>

ItemsSource はオブジェクト中で2階層目に表示したいコレクションのプロパティ名を指定する。 ItemTemplate には2階層目の HierarchicalDataTemplate を指定する。 これで1階層目はフォントがBold、2階層目は普通のフォントになる。

HierarchicalDataTemplate 内のスタイルやコントロールは好きなものを追加すればいい。

プロフィール

Kenz Yamada（山田研二）。1984年生。大阪。ちょっとずつ好きなプログラム作ってます。 好きなものはカメラと旅行。ガジェットや身の回り、ちょっとこだわります。 詳しくは Web mixi で。