Skip to main content
All docs
V24.1

Get Started

  • 4 minutes to read

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

WPF TreeView - Get Started

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.

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

Add a View Model

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

    using DevExpress.Mvvm;
    using System.Collections.Generic;
    
    namespace TreeViewGettingStarted {
        public class MainWindowViewModel : ViewModelBase {
            public MainWindowViewModel() {
                EmployeeDepartments = Departments.GetDepartments();
            }
            public List<EmployeeDepartment> EmployeeDepartments { get; set; }
        }    
    }
    
  2. Build the solution. Invoke the window’s Quick Actions and define its data context as shown in the image below.

    WPF TreeView - DataContext

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

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

WPF TreeView - Toolbox

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:

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

    WPF TreeView - ItemsSource

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

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

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