WPF: Hierarchical Binding Using HierarchicalDataTemplate
HierarchicalDataTemplate
HierarchicalDataTemplate is a special subclass of DataTemplate that exists for working with hierarchical data, such as XML or a file system. It not only enables you to change the presentation of such data, but enables you to directly bind a hierarchy of objects to an element that can deal with hierarchies, such as the items of a TreeView or Menu control. Note that it is the TreeViewItem and MenuItem which handle the hierarchy of parent to child collection.
Hierarchical binding is able to display a sequence of items and each item may have child items. HierachicalDataTemplate works just like a normal data template, but with one additional feature. It has an ItemsSource property that selects the children for the item the template represents.
<TreeView>
<TreeView.ItemTemplate>
<HierarchicalDataTemplate ItemsSource="{Binding Path=Children}">
<TextBlock Text="{Binding Path=Property}"/>
</HierarchicalDataTemplate>
</TreeView.ItemTemplate>
</TreeView>
An example with TreeView:
<Grid.Resources>
<XmlDataProvider x:Key="xmldata" XPath="/hierarchicalData/item">
<x:XData>
<hierarchialData
xmlns="">
<item title ="Parent1">
<item title="Child1">
<item title="Child2">
<item title="Child3">
<item title="Child4">
<item title="Child5">
<item title="Child6"></item>
</item>
</item>
</item>
<item title="Child2-2"></item>
</item>
</item>
<item title="Parent2">
<item title="Child1"></item>
</item>
<item title="Parent3"/></item>
</hierarchicalData>
</x:XData>
</XmlDataProvider>
</Grid.Resources>
Here XmlDataProvider is the time source to the TreeView. Inside XData we have hierarchical data.
You can see the TreeView in the following XAML code:
<TreeView DataContext="{StaticResource xmldata}" ItemsSource="{Binding}">
<TreeView.ItemTemplate>
<HierarchicalDataTemplate ItemsSource="{Binding XPath=item}">
<TextBlock Text="{Binding XPath=@title}"/>
</HierarchicalDataTemplate>
</TreeView.ItemTemplate>
</TreeView>
Here the DataContext is a xmldata and the 'item' is the ItemsSource of the HierarchicalDataTemplate. We have one TexBlock control inside HierchicalDataTemplate , that will show the title of each element in a hierarchical manner.
You can see the hierarchical TreeView in the preceding picture.
HierarchicalDataTemplate in a menu.
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
mc:Ignorable="d"
d:DesignHeight="300" d:DesignWidth="300">
<Grid>
<Grid.Resources>
<XmlDataProvider x:Key="xmldata" XPath="/hierarchicalData/item">
<x:XData>
<hierarchicalData
xmlns="">
<item title ="Main Menu">
<item title="Menu1">
<item title="SubMenu1">
<item title="SubMenu2"></item>
<item title="SubMenu1-2"></item>
</item>
</item>
<item title="Menu 2">
<item title="SubMenu 1"></item>
</item>
<item title="Menu 3"/></item>
</hierarchicalData>
</x:XData>
</XmlDataProvider>
</Grid.Resources>
<Menu DataContext="{StaticResource xmldata}" ItemsSource="{Binding}">
<Menu.ItemTemplate>
<HierarchicalDataTemplate ItemsSource="{Binding XPath=item}">
<TextBlock Text="{Binding XPath=@title}"/>
</HierarchicalDataTemplate>
</Menu.ItemTemplate>
</Menu>
</Grid>
</UserControl>
Menu hierarchical binding is nearly similar to a TreeView Binding. In the following picture you can see that here.
