How to Create Hierarchical Data Template in WPF TreeViewAdv?
In WPF TreeViewAdv , the ItemTemplate 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
<Window x:Class="finalhierarchicaldatatemplate.MainWindow"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:syncfusion="http://schemas.syncfusion.com/wpf"
Title="MainWindow"
Height="350"
Width="525"
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>public partial class MainWindow : Window
{
public MainWindow()
{
InitializeComponent();
this.DataContext = new ViewModel();
}
}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 ObservableCollection<Model> Items { get; set; }
public ViewModel()
{
Items = new ObservableCollection<Model>();
PopulateData();
}
private void PopulateData()
{
var root1 = new Model
{
Name = "Send/Receive",
RelatedItems =
{
new Model1
{
Name = "Download",
SubItems =
{
new Model2 { Name = "Show Progress" },
new Model2 { Name = "Cancel All" }
}
},
new Model1
{
Name = "Preferences",
SubItems =
{
new Model2 { Name = "Download Preferences" },
new Model2 { Name = "Work Offline" }
}
}
}
};
var root2 = new Model
{
Name = "View",
RelatedItems =
{
new Model1
{
Name = "Window",
SubItems =
{
new Model2 { Name = "Reminders Window" }
}
}
}
};
Items.Add(root1);
Items.Add(root2);
}
}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 TreeViewAdv.
You can refer to our WPF TreeViewAdv feature tour 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!
