Post
Ask Question

Hierarchical Binding Using HierarchialDataTemplate in WPF

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.


Similar Articles