Introduction
The ItemsSource can be specified for TreeView control as a data source, here this blog provides code examples of how to bind the data source to WPF Treeview with hierarchical structure in WPF.
Getting Started
In my previous blog (WPF TreeView Example) described how to create a simple WPF TreeView, hierarchical Treeview, customize the default Treeviewand styling the Treeviewto change the appearance.
Here we will see in code examples of how to bind the data source to WPF Treeview ItemsSource using C# and populate fields from the data source in Treeview.
The ItemsSource can be specified for TreeView control as a data source and then specify a HeaderTemplate and ItemTemplate to define the TreeViewItem content. To define the layout of a TreeViewItem control, you can also use HierarchicalDataTemplate objects.
The below code examples shows to bind the data source to Treeview.
MainWindow.xaml Code
<TreeView HorizontalAlignment="Left" Height="307" VerticalAlignment="Top" Width="397" Name="filterableTreeview" SelectedItemChanged="filterableTreeview_SelectedItemChanged">
<TreeView.ItemTemplate>
<HierarchicalDataTemplate x:Name="lvl1" ItemsSource="{Binding Path=Juniors1, Mode=TwoWay, UpdateSourceTrigger=PropertyChanged}">
<TextBlock FontWeight="Normal" FontSize="14" Text="{Binding Path=Name, Mode=TwoWay, UpdateSourceTrigger=PropertyChanged}" />
<HierarchicalDataTemplate.ItemTemplate>
<HierarchicalDataTemplate ItemsSource="{Binding Path=Juniors1, Mode=TwoWay, UpdateSourceTrigger=PropertyChanged}">
<TextBlock FontWeight="Normal" FontSize="14" Text="{Binding Path=Name, Mode=TwoWay, UpdateSourceTrigger=PropertyChanged}" />
<HierarchicalDataTemplate.ItemTemplate >
<HierarchicalDataTemplate>
<TextBlock FontWeight="Normal" FontSize="14" Text="{Binding Path=Name, Mode=TwoWay, UpdateSourceTrigger=PropertyChanged}" />
</HierarchicalDataTemplate>
</HierarchicalDataTemplate.ItemTemplate>
</HierarchicalDataTemplate>
</HierarchicalDataTemplate.ItemTemplate>
</HierarchicalDataTemplate>
</TreeView.ItemTemplate>
</TreeView>
WPF TreeView Binding
MainWindow.cs Code
List<Employee> emps = new List<Employee>();
emps.Add(new Employee() { ID = 1, Name = "Kailash1" });
emps.Add(new Employee() { ID = 2, Name = "Kailash2" });
emps.Add(new Employee() { ID = 3, Name = "Kailash3" });
emps.Add(new Employee() { ID = 4, Name = "Kailas4" });
emps.Add(new Employee() { ID = 5, Name = "Kailas5" });
Employee emp1 = new Employee();
emp1.Name = "Juniors16";
emp1.Juniors1 = new List<Employee>();
emp1.Juniors1.Add(new Employee() { ID = 113, Name = "Juniors113" });
emp1.Juniors1.Add(new Employee() { ID = 123, Name = "Juniors123" });
emp1.Juniors1.Add(new Employee() { ID = 133, Name = "Juniors133" });
emp1.Juniors1.Add(new Employee() { ID = 143, Name = "Juniors143" });
emp1.Juniors1.Add(new Employee() { ID = 153, Name = "Juniors153" });
Employee emp = new Employee();
emp.Name = "Kailash6";
emp.Juniors1 = new List<Employee>();
emp.Juniors1.Add(new Employee() { ID = 11, Name = "Juniors11" });
emp.Juniors1.Add(new Employee() { ID = 12, Name = "Juniors12" });
emp.Juniors1.Add(new Employee() { ID = 13, Name = "Juniors13" });
emp.Juniors1.Add(new Employee() { ID = 14, Name = "Juniors14" });
emp.Juniors1.Add(new Employee() { ID = 15, Name = "Juniors15" });
emp.Juniors1.Add(emp1);
emps.Add(emp);
this.filterableTreeview.ItemsSource = emps;
WPF TreeView Binding
The above code examples described binding the data source to Treeview. The XAML describes how to populate the data source fields and the c# code describes how to bind a list of items (data source ) to Treeview.
Employee Class
public class Employee
{
public int ID { get; set; }
public string Name { get; set; }
}
Summary
In the above code example, we saw how to do WPF TreeView Binding with hierarchical structure. I hope you have enjoyed it a lot.
Thanks