HierarchialDataTemplate

HierarchialDataTemplate 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 intrinsically understands hierarchies, such as a TreeView or Menu control.

Hierarchical binding is able to display a sequence of items and each item may have child items. HierachialDataTemplate 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 represtents.

Syntax:
  1. <TreeView>
  2. <TreeView.ItemTemplate>
  3. <HierarchicalDataTemplate ItemsSource="{Binding Path=Children}">
  4. <TextBlock Text="{Binding Path=Property}"/>
  5. </HierarchicalDataTemplate>
  6. </TreeView.ItemTemplate>
  7. </TreeView>

Here is an example with TreeView:

  1. <Grid.Resources>
  2. <XmlDataProvider x:Key="xmldata" XPath="/hierarchialData/item">
  3. <x:XData>
  4. <hierarchialData
  5. xmlns="">
  6. <item title ="Parent1">
  7. <item title="Child1">
  8. <item title="Child2">
  9. <item title="Child3">
  10. <item title="Child4">
  11. <item title="Child5">
  12. <item title="Child6"></item>
  13. </item>
  14. </item>
  15. </item>
  16. <item title="Child2-2"></item>
  17. </item>
  18. </item>
  19. <item title="Parent2">
  20. <item title="Child1"></item>
  21. </item>
  22. <item title="Parent3"/></item>
  23. </hierarchialData>
  24. </x:XData>
  25. </XmlDataProvider>
  26. </Grid.Resources>

I have added XmlDataProvider inside the Grid.Resource. This item is the item source of my tree view. Inside XData I have created a hierarchial data.

You can see the TreeView in the following XAML code:

  1. <TreeView DataContext="{StaticResource xmldata}" ItemsSource="{Binding}">
  2. <TreeView.ItemTemplate>
  3. <HierarchicalDataTemplate ItemsSource="{Binding XPath=item}">
  4. <TextBlock Text="{Binding XPath=@title}"/>
  5. </HierarchicalDataTemplate>
  6. </TreeView.ItemTemplate>
  7. </TreeView>

Here I have given the DataContex as xmldata and the item is the ItemsSource of the HierarchialDataTemplate. I have one TexBlock control insided HierchialDataTemplate that will show the title of each element in a hierarchical manner. Let me run this program.


You can see the hierarchial TreeView in the preceding picture.

Let me try the HierarchialDataTemplate in a menu.

  1. xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
  2. mc:Ignorable="d"
  3. d:DesignHeight="300" d:DesignWidth="300">
  4. <Grid>
  5. <Grid.Resources>
  6. <XmlDataProvider x:Key="xmldata" XPath="/hierarchialData/item">
  7. <x:XData>
  8. <hierarchialData
  9. xmlns="">
  10. <item title ="Main Menu">
  11. <item title="Menu1">
  12. <item title="SubMenu1">
  13. <item title="SubMenu2"></item>
  14. <item title="SubMenu1-2"></item>
  15. </item>
  16. </item>
  17. <item title="Menu 2">
  18. <item title="SubMenu 1"></item>
  19. </item>
  20. <item title="Menu 3"/></item>
  21. </hierarchialData>
  22. </x:XData>
  23. </XmlDataProvider>
  24. </Grid.Resources>
  25. <Menu DataContext="{StaticResource xmldata}" ItemsSource="{Binding}">
  26. <Menu.ItemTemplate>
  27. <HierarchicalDataTemplate ItemsSource="{Binding XPath=item}">
  28. <TextBlock Text="{Binding XPath=@title}"/>
  29. </HierarchicalDataTemplate>
  30. </Menu.ItemTemplate>
  31. </Menu>
  32. </Grid>
  33. </UserControl>

Menu hierarchical binding is nearly similar to a TreeView Binding. In the following picture you can see that here.

Conclusion

In this article you learned about hierarchical binding using HierarchialDataTemplate. You got a brief idea of the TreeView and Menu control in WPF. I hope you like this article. Thanks for reading.