How to Create Hierarchical Data Template in WPF TreeView?
The ItemTemplate of the WPF TreeView displays the customized business object as TreeViewItemAdv. Since the TreeViewAdv displays the hierarchical data, the HierarchicalDataTemplate is used to define the ItemTemplate. Here, an example is illustrated to display the three-level Tree View, where the lowest level is expressed in a DataTemplate, then the HierarchicalDataTemplate is used for the Next level up from the lowest level and the first level to display the Hierarchical data structure.
Refer to the following code example
XAML
<Window x:Class="finalhierarchicaldatatemplate.MainWindow"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
Title="MainWindow" Height="350" Width="525" xmlns:syncfusion="http://schemas.syncfusion.com/wpf" syncfusion:SkinStorage.VisualStyle="Metro">
<Window.Resources>
<HierarchicalDataTemplate x:Key="Templatekey" ItemsSource="{Binding RelatedItems}" >
<TextBlock Foreground="Red" Text="{Binding Name}"/>
<HierarchicalDataTemplate.ItemTemplate>
<HierarchicalDataTemplate ItemsSource="{Binding SubItems}" >
<TextBlock Foreground="Magenta" Text="{Binding Name}" />
<HierarchicalDataTemplate.ItemTemplate>
<DataTemplate>
<TextBlock Text="{Binding Name}"/>
</DataTemplate>
</HierarchicalDataTemplate.ItemTemplate>
</HierarchicalDataTemplate>
</HierarchicalDataTemplate.ItemTemplate>
</HierarchicalDataTemplate>
</Window.Resources>
<Grid>
<syncfusion:TreeViewAdv ItemsSource="{Binding Items}" ItemTemplate="{StaticResource Templatekey}"/>
</Grid>
</Window>
C#
Model
public class Model
{
public Model()
{
RelatedItems = new ObservableCollection<Model1>();
}
public string Name { get; set; }
public ObservableCollection<Model1> RelatedItems { get; set; }
}
public class Model1
{
public Model1()
{
SubItems = new ObservableCollection<Model2>();
}
public string Name { get; set; }
public ObservableCollection<Model2> SubItems { get; set; }
}
public class Model2
{
public string Name{ get; set; }
}
ViewModel
public class ViewModel
{
public ViewModel()
{
Items = new ObservableCollection<Model>();
PopulateData();
}
public ObservableCollection<Model> Items { get; set; }
private void PopulateData()
{
Model root1 = new Model() { Name = "Send/Receive" };
Model1 subItem1 = new Model1 { Name = "Download" };
subItem1.SubItems.Add(new Model2() { Name = "Show Progress" });
subItem1.SubItems.Add(new Model2() { Name = "Cancel All" });
root1.RelatedItems.Add(subItem1);
Model1 subItem2 = new Model1 { Name = "Preferences" };
subItem2.SubItems.Add(new Model2() { Name = "Download Preferences" });
subItem2.SubItems.Add(new Model2() { Name = "Work Offline" });
root1.RelatedItems.Add(subItem2);
Model root2 = new Model() { Name = "View" };
Model1 subItem3 = new Model1 { Name = "Window" };
subItem3.SubItems.Add(new Model2() { Name = "Reminders Window" });
root2.RelatedItems.Add(subItem3);
Items.Add(root1);
Items.Add(root2);
}
}
MainWindow.xaml.cs
public partial class MainWindow : Window
{
public MainWindow()
{
InitializeComponent();
this.DataContext = new ViewModel();
}
}
The following screenshot illustrates the output.
Figure 1: Hierarchial DataTemplate for TreeViewAdv
Conclusion
I hope you enjoyed learning about how to create hierarchical data template in WPF TreeView.
You can refer to our WPF TreeView featuretour page to know about its other groundbreaking feature representations and documentation, to understand how to create and manipulate data.
For current customers, you can check out our components from the License and Downloads page. If you are new to Syncfusion, you can try our 30-day free trial to check out our other controls.
If you have any queries or require clarifications, please let us know in the comments section below. You can also contact us through our support forums, Direct-Trac, or feedback portal. We are always happy to assist you!
