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.

DataModel.cs

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

DataModel.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.

   ViewModel.cs

   using DevExpress.Mvvm;
   using System.Collections.Generic;
   
   namespace TreeViewGettingStarted {
       public class MainWindowViewModel : ViewModelBase {
           public MainWindowViewModel() {
               EmployeeDepartments = Departments.GetDepartments();
           }
           public List<EmployeeDepartment> EmployeeDepartments { get; set; }
       }    
   }
   

   ViewModel.vb

   Imports DevExpress.Mvvm
   Imports System.Collections.Generic
   
   Namespace TreeViewGettingStarted
       Public Class MainWindowViewModel
           Inherits ViewModelBase
   
           Public Sub New()
               EmployeeDepartments = Departments.GetDepartments()
           End Sub
   
           Public Property EmployeeDepartments As List(Of EmployeeDepartment)
       End Class
   End Namespace
   

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

   

   You can also define the window’s data context in code:

   XAML

   <dx:ThemedWindow 
       ... 
       xmlns:local="clr-namespace:TreeViewGettingStarted">
       <dx:ThemedWindow.DataContext>
           <local:MainWindowViewModel/>
       </dx:ThemedWindow.DataContext> 
   

Add the TreeViewControl to a View

Drag the TreeViewControl from the DX.24.1: Data & Analytics Toolbox tab and drop it onto the main window.

Visual Studio performs the following actions:

• Adds the following references to the project:

  • DevExpress.Data.Desktop.v24.1
  • DevExpress.Data.v24.1
  • DevExpress.Mvvm.v24.1
  • DevExpress.Printing.v24.1.Core
  • DevExpress.Xpf.Core.v24.1
  • DevExpress.Xpf.Grid.v24.1
  • DevExpress.Xpf.Grid.v24.1.Core

• Generates the code below:

  XAML

  <dx:ThemedWindow x:Class="TreeViewGettingStarted.MainWindow"  
      xmlns:dx="http://schemas.devexpress.com/winfx/2008/xaml/core" 
      xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" 
      xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" 
      xmlns:dxg="http://schemas.devexpress.com/winfx/2008/xaml/grid" 
      xmlns:local="clr-namespace:TreeViewGettingStarted"
      Title="MainWindow" Height="350" Width="525">
      <dx:ThemedWindow.DataContext>
          <local:MainWindowViewModel/>
      </dx:ThemedWindow.DataContext>
      <Grid>
          <dxg:TreeViewControl/>
      </Grid>
  </dx:ThemedWindow>
  

Bind the TreeViewControl to Data

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

   

   To bind the TreeViewControl to data in code, specify the DataControlBase.ItemsSource property:

   XAML

   <dxg:TreeViewControl ItemsSource="{Binding EmployeeDepartments}"/> 
   

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.

   XAML

   <dx:ThemedWindow x:Class="TreeViewGettingStarted.MainWindow" 
       Title="MainWindow" Height="350" Width="525" 
       xmlns:dx="http://schemas.devexpress.com/winfx/2008/xaml/core" 
       xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" 
       xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" 
       xmlns:dxg="http://schemas.devexpress.com/winfx/2008/xaml/grid" 
       xmlns:local="clr-namespace:TreeViewGettingStarted">
       <dx:ThemedWindow.DataContext>
           <local:MainWindowViewModel/>
       </dx:ThemedWindow.DataContext>
       <Grid>
           <dxg:TreeViewControl ItemsSource="{Binding EmployeeDepartments}" 
                                ChildNodesPath="Employees" 
                                TreeViewFieldName="Name"/>
       </Grid>
   </dx:ThemedWindow>