TreeView and HierarchicalDataTemplate

(Hint for myself: use the “Hierarchical Data Template Example n” snippets; shortcuts: hdtexn).

The simplest example:

<Window.Resources>
    <XmlDataProvider x:Key=”p”>
        <x:XData xmlns=””>
            <r>
                <n v=”1″>
                    <n v=”1.1″> … </n>
                    <n v=”1.2″/>
                </n>
                <n v=”2″/>
            </r>
        </x:XData>
    </XmlDataProvider>
</Window.Resources>

<TreeView DataContext=”{StaticResource p}” >
    <TreeViewItem Header=”Numbers” ItemsSource=”{Binding XPath=/r/n}”>
        <TreeViewItem.ItemTemplate>
            <HierarchicalDataTemplate ItemsSource=”{Binding XPath=n}”>
                <TextBlock Text=”{Binding XPath=@v}” />
            </HierarchicalDataTemplate>
        </TreeViewItem.ItemTemplate>
    </TreeViewItem>
</TreeView>

Add some letters:

<Window.Resources>
    <XmlDataProvider x:Key=”p”>
        <x:XData xmlns=””>
            <r>
                <n v=”1″>
                    <n v=”1.1″>
                        <n v=”1.1.1″/>
                        <n v=”1.1.2″/>
                    </n>
                    <n v=”1.2″/>
                </n>
                <n v=”2″/>
                <l v=”a”>
                    <l v=”a.a”>
                        <l v=”a.a.a”/>
                        <l v=”a.a.b”/>
                    </l>
                    <l v=”a.b”/>
                </l>
                <l v=”b”/>
            </r>
        </x:XData>
    </XmlDataProvider>
</Window.Resources>

<TreeView DataContext=”{StaticResource p}” >
    <TreeViewItem Header=”Numbers” ItemsSource=”{Binding XPath=/r/n}”>
        <TreeViewItem.ItemTemplate>
            <HierarchicalDataTemplate ItemsSource=”{Binding XPath=n}”>
                <TextBlock Text=”{Binding XPath=@v}” />
            </HierarchicalDataTemplate>
        </TreeViewItem.ItemTemplate>
    </TreeViewItem>
    <TreeViewItem Header=”Letters” ItemsSource=”{Binding XPath=/r/l}”>
        <TreeViewItem.ItemTemplate>
            <HierarchicalDataTemplate ItemsSource=”{Binding XPath=l}”>
                <TextBlock Text=”{Binding XPath=@v}” />
            </HierarchicalDataTemplate>
        </TreeViewItem.ItemTemplate>
    </TreeViewItem>
</TreeView>

Changing XPaths:

<Window.Resources>
  <XmlDataProvider x:Key=”p”>
    <x:XData xmlns=””>
      <r>
        <n v=”1″>
          <n v=”1.1″>
            <n v=”1.1.1″/>
            <n v=”1.1.2″/>
          </n>
          <n v=”1.2″/>
        </n>
        <n v=”2″/>
        <l v=”a”>
          <l v=”a.a” />
          <l v=”a.b” />
        </l>
      </r>
    </x:XData>
  </XmlDataProvider>
</Window.Resources>

<TreeView DataContext=”{StaticResource p}” >
  <TreeViewItem Header=”Numbers” ItemsSource=”{Binding XPath=/r/*}”>
    <TreeViewItem.ItemTemplate>
      <HierarchicalDataTemplate ItemsSource=”{Binding XPath=*}”>
        <TextBlock Text=”{Binding XPath=@v}” />
      </HierarchicalDataTemplate>
    </TreeViewItem.ItemTemplate>
  </TreeViewItem>
</TreeView>

Notice that letters and numbers got all mixed-up; we can correct this by specifying the data type that the template supports:

<Window.Resources>
  <XmlDataProvider x:Key=”p”>
    <x:XData xmlns=””>
      <r>
        <n v=”1″>
          <n v=”1.1″>
            <n v=”1.1.1″/>
            <n v=”1.1.2″/>
          </n>
          <n v=”1.2″/>
        </n>
        <n v=”2″/>
        <l v=”a”>
          <l v=”a.a” />
          <l v=”a.b” />
        </l>
      </r>
    </x:XData>
  </XmlDataProvider>

  <HierarchicalDataTemplate DataType=”n” ItemsSource=”{Binding XPath=n}”>
    <TextBlock Text=”{Binding XPath=@v}” />
  </HierarchicalDataTemplate>

</Window.Resources>

<TreeView DataContext=”{StaticResource p}” >
  <TreeViewItem Header=”Numbers” ItemsSource=”{Binding XPath=/r/*}” />
</TreeView>

We can support multiple data types with distinct templates:

<Window.Resources>
  <XmlDataProvider x:Key=”p”>
    <x:XData xmlns=””>
      <r>
        <n v=”1″>
          <n v=”1.1″>
            <n v=”1.1.1″/>
            <n v=”1.1.2″/>
          </n>
          <n v=”1.2″/>
        </n>
        <n v=”2″/>
        <l v=”a”>
          <l v=”a.a” />
          <l v=”a.b” />
        </l>
      </r>
    </x:XData>
  </XmlDataProvider>

  <HierarchicalDataTemplate DataType=”n” ItemsSource=”{Binding XPath=n}”>
    <TextBlock Text=”{Binding XPath=@v}” Foreground=”Blue” />
  </HierarchicalDataTemplate>
  <HierarchicalDataTemplate DataType=”l” ItemsSource=”{Binding XPath=l}”>
    <TextBlock Text=”{Binding XPath=@v}” Foreground=”Green” />
  </HierarchicalDataTemplate>

</Window.Resources>

<TreeView DataContext=”{StaticResource p}” >
  <TreeViewItem Header=”Letters &amp; Numbers” ItemsSource=”{Binding XPath=/r/*}” />
</TreeView>