Back to Devexpress

Get Started

wpf-402191-controls-and-libraries-navigation-controls-treeview-get-started.md

latest6.6 KB
Original Source

Get Started

  • Feb 22, 2023
  • 4 minutes to read

This tutorial demonstrates how to create an application with the TreeViewControl.

View Example: How to Create an Application with the TreeViewControl

Add a Data Model

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.

csharp
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;
        }
    }
}
vb
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

Add a View Model

  1. Create a view model that retrieves data from the data model.

  2. Build the solution. Invoke the window’s Quick Actions and define its data context as shown in the image below.

Add the TreeViewControl to a View

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:

Bind the TreeViewControl to Data

  1. Invoke the TreeViewControl‘s Quick Actions and define the ItemsSource field.

  2. Set the TreeViewControl.ChildNodesPath property to the Employees field. This field contains a node’s children.

  3. Set the TreeViewControl.TreeViewFieldName property to the Name field. The TreeViewControl uses this field’s value to display text in nodes.