wpf-402191-controls-and-libraries-navigation-controls-treeview-get-started.md
This tutorial demonstrates how to create an application with the TreeViewControl.
View Example: How to Create an Application with the TreeViewControl
You can bind the TreeViewControl to any object that implements the IEnumerable interface or its descendant (for example, IList, ICollection).
The code sample below demonstrates a data model that is used in this tutorial.
using System.Collections.Generic;
using System.Collections.ObjectModel;
namespace TreeViewGettingStarted {
public class Employee {
public Employee(int id, string name) {
ID = id;
Name = name;
}
public int ID { get; set; }
public string Name { get; set; }
}
public class EmployeeDepartment {
public string Name { get; set; }
public ObservableCollection<Employee> Employees { get; }
public EmployeeDepartment(string name, IEnumerable<Employee> employees) {
Name = name;
Employees = new ObservableCollection<Employee>(employees);
}
}
public static class Departments {
public static List<EmployeeDepartment> GetDepartments() {
List<EmployeeDepartment> departments = new List<EmployeeDepartment>();
departments.Add(new EmployeeDepartment("Management", new Employee[] {
new Employee(0, "Gregory S. Price")
}));
departments.Add(new EmployeeDepartment("Marketing", new Employee[] {
new Employee(1, "Irma R. Marshall"),
new Employee(2, "Brian C. Cowling"),
new Employee(3, "Thomas C. Dawson"),
new Employee(4, "Bryan R. Henderson"),
}));
departments.Add(new EmployeeDepartment("Operations", new Employee[] {
new Employee(5, "John C. Powell"),
new Employee(6, "Harold S. Brandes"),
new Employee(7, "Jan K. Sisk"),
new Employee(8, "Sidney L. Holder"),
}));
departments.Add(new EmployeeDepartment("Production", new Employee[] {
new Employee(9, "Christian P. Laclair"),
new Employee(10, "James L. Kelsey"),
new Employee(11, "Howard M. Carpenter"),
new Employee(12, "Jennifer T. Tapia"),
}));
departments.Add(new EmployeeDepartment("Finance", new Employee[] {
new Employee(13, "Karen J. Kelly"),
new Employee(14, "Judith P. Underhill"),
new Employee(15, "Russell E. Belton"),
}));
return departments;
}
}
}
Imports System.Collections.Generic
Imports System.Collections.ObjectModel
Namespace TreeViewGettingStarted
Public Class Employee
Public Sub New(ByVal id As Integer, ByVal name As String)
ID = id
Name = name
End Sub
Public Property ID As Integer
Public Property Name As String
End Class
Public Class EmployeeDepartment
Public Property Name As String
Public ReadOnly Property Employees As ObservableCollection(Of Employee)
Public Sub New(ByVal name As String, ByVal employees As IEnumerable(Of Employee))
Name = name
Employees = New ObservableCollection(Of Employee)(employees)
End Sub
End Class
Module Departments
Function GetDepartments() As List(Of EmployeeDepartment)
Dim departments As List(Of EmployeeDepartment) = New List(Of EmployeeDepartment)()
departments.Add(New EmployeeDepartment("Management", New Employee() {
New Employee(0, "Gregory S. Price")}))
departments.Add(New EmployeeDepartment("Marketing", New Employee() {
New Employee(1, "Irma R. Marshall"),
New Employee(2, "Brian C. Cowling"),
New Employee(3, "Thomas C. Dawson"),
New Employee(4, "Bryan R. Henderson")
}))
departments.Add(New EmployeeDepartment("Operations", New Employee() {
New Employee(5, "John C. Powell"),
New Employee(6, "Harold S. Brandes"),
New Employee(7, "Jan K. Sisk"),
New Employee(8, "Sidney L. Holder")
}))
departments.Add(New EmployeeDepartment("Production", New Employee() {
New Employee(9, "Christian P. Laclair"),
New Employee(10, "James L. Kelsey"),
New Employee(11, "Howard M. Carpenter"),
New Employee(12, "Jennifer T. Tapia")
}))
departments.Add(New EmployeeDepartment("Finance", New Employee() {
New Employee(13, "Karen J. Kelly"),
New Employee(14, "Judith P. Underhill"),
New Employee(15, "Russell E. Belton")
}))
Return departments
End Function
End Module
End Namespace
Create a view model that retrieves data from the data model.
Build the solution. Invoke the window’s Quick Actions and define its data context as shown in the image below.
Drag the TreeViewControl from the DX.25.2: Data & Analytics Toolbox tab and drop it onto the main window.
Visual Studio performs the following actions:
Adds the following references to the project:
Generates the code below:
Invoke the TreeViewControl‘s Quick Actions and define the ItemsSource field.
Set the TreeViewControl.ChildNodesPath property to the Employees field. This field contains a node’s children.
Set the TreeViewControl.TreeViewFieldName property to the Name field. The TreeViewControl uses this field’s value to display text in nodes.