Lesson 1 - Add a TreeListControl to a Project | WPF Controls

May 20, 2020
7 minutes to read

This tutorial demonstrates how to add a TreeListControl to your project and bind the control to your self-referential data source:

Add a Data Model

To build a tree, add the following fields to data source objects:

The Key Field contains unique values to index nodes.
The Parent Field contains indexes of parent nodes.

Add a data model (the Employee and Staff classes) to the MainWindow.xaml.cs / MainWindow.xaml.vb file:

MainWindow.xaml.cs
MainWindow.xaml.vb

namespace DxTreeListGettingStarted {
    public partial class MainWindow : Window { ... }
    public class Employee {
        public int ID { get; set; }
        public int ParentID { get; set; }
        public string Name { get; set; }
        public string Position { get; set; }
        public string Department { get; set; }
    }
    public static class Staff {
        public static List<Employee> GetStaff() {
            List<Employee> staff = new List<Employee>();
            staff.Add(new Employee() { ID = 0, Name = "Gregory S. Price", Department = "", Position = "President" });
            staff.Add(new Employee() { ID = 1, ParentID = 0, Name = "Irma R. Marshall", Department = "Marketing", Position = "Vice President" });
            staff.Add(new Employee() { ID = 2, ParentID = 0, Name = "John C. Powell", Department = "Operations", Position = "Vice President" });
            staff.Add(new Employee() { ID = 3, ParentID = 0, Name = "Christian P. Laclair", Department = "Production", Position = "Vice President" });
            staff.Add(new Employee() { ID = 4, ParentID = 0, Name = "Karen J. Kelly", Department = "Finance", Position = "Vice President" });
            staff.Add(new Employee() { ID = 5, ParentID = 1, Name = "Brian C. Cowling", Department = "Marketing", Position = "Manager" });
            staff.Add(new Employee() { ID = 6, ParentID = 1, Name = "Thomas C. Dawson", Department = "Marketing", Position = "Manager" });
            staff.Add(new Employee() { ID = 7, ParentID = 1, Name = "Angel M. Wilson", Department = "Marketing", Position = "Manager" });
            staff.Add(new Employee() { ID = 8, ParentID = 1, Name = "Bryan R. Henderson", Department = "Marketing", Position = "Manager" });
            staff.Add(new Employee() { ID = 9, ParentID = 2, Name = "Harold S. Brandes", Department = "Operations", Position = "Manager" });
            staff.Add(new Employee() { ID = 10, ParentID = 2, Name = "Michael S. Blevins", Department = "Operations", Position = "Manager" });
            staff.Add(new Employee() { ID = 11, ParentID = 2, Name = "Jan K. Sisk", Department = "Operations", Position = "Manager" });
            staff.Add(new Employee() { ID = 12, ParentID = 2, Name = "Sidney L. Holder", Department = "Operations", Position = "Manager" });
            staff.Add(new Employee() { ID = 13, ParentID = 3, Name = "James L. Kelsey", Department = "Production", Position = "Manager" });
            staff.Add(new Employee() { ID = 14, ParentID = 3, Name = "Howard M. Carpenter", Department = "Production", Position = "Manager" });
            staff.Add(new Employee() { ID = 15, ParentID = 3, Name = "Jennifer T. Tapia", Department = "Production", Position = "Manager" });
            staff.Add(new Employee() { ID = 16, ParentID = 4, Name = "Judith P. Underhill", Department = "Finance", Position = "Manager" });
            staff.Add(new Employee() { ID = 17, ParentID = 4, Name = "Russell E. Belton", Department = "Finance", Position = "Manager" });
            return staff;
        }
    }
}

Namespace DxTreeListGettingStarted
    Public Partial Class MainWindow
        Inherits Window

        Public Sub New()
            ...
        End Sub
    End Class

    Public Class Employee
        Public Property ID As Integer
        Public Property ParentID As Integer
        Public Property Name As String
        Public Property Position As String
        Public Property Department As String
    End Class

    Module Staff
        Function GetStaff() As List(Of Employee)
            Dim staff As List(Of Employee) = New List(Of Employee)()
                staff.Add(New Employee() With { .ID = 0, .Name = "Gregory S. Price", .Department = "", .Position = "President" })
                staff.Add(New Employee() With { .ID = 1, .ParentID = 0, .Name = "Irma R. Marshall", .Department = "Marketing", .Position = "Vice President" })
                staff.Add(New Employee() With { .ID = 2, .ParentID = 0, .Name = "John C. Powell", .Department = "Operations", .Position = "Vice President" })
                staff.Add(New Employee() With { .ID = 3, .ParentID = 0, .Name = "Christian P. Laclair", .Department = "Production", .Position = "Vice President" })
                staff.Add(New Employee() With { .ID = 4, .ParentID = 0, .Name = "Karen J. Kelly", .Department = "Finance", .Position = "Vice President" })
                staff.Add(New Employee() With { .ID = 5, .ParentID = 1, .Name = "Brian C. Cowling", .Department = "Marketing", .Position = "Manager" })
                staff.Add(New Employee() With { .ID = 6, .ParentID = 1, .Name = "Thomas C. Dawson", .Department = "Marketing", .Position = "Manager" })
                staff.Add(New Employee() With { .ID = 7, .ParentID = 1, .Name = "Angel M. Wilson", .Department = "Marketing", .Position = "Manager" })
                staff.Add(New Employee() With { .ID = 8, .ParentID = 1, .Name = "Bryan R. Henderson", .Department = "Marketing", .Position = "Manager" })
                staff.Add(New Employee() With { .ID = 9, .ParentID = 2, .Name = "Harold S. Brandes", .Department = "Operations", .Position = "Manager" })
                staff.Add(New Employee() With { .ID = 10, .ParentID = 2, .Name = "Michael S. Blevins", .Department = "Operations", .Position = "Manager" })
                staff.Add(New Employee() With { .ID = 11, .ParentID = 2, .Name = "Jan K. Sisk", .Department = "Operations", .Position = "Manager" })
                staff.Add(New Employee() With { .ID = 12, .ParentID = 2, .Name = "Sidney L. Holder", .Department = "Operations", .Position = "Manager" })
                staff.Add(New Employee() With { .ID = 13, .ParentID = 3, .Name = "James L. Kelsey", .Department = "Production", .Position = "Manager" })
                staff.Add(New Employee() With { .ID = 14, .ParentID = 3, .Name = "Howard M. Carpenter", .Department = "Production", .Position = "Manager" })
                staff.Add(New Employee() With { .ID = 15, .ParentID = 3, .Name = "Jennifer T. Tapia", .Department = "Production", .Position = "Manager" })
                staff.Add(New Employee() With { .ID = 16, .ParentID = 4, .Name = "Judith P. Underhill", .Department = "Finance", .Position = "Manager" })
                staff.Add(New Employee() With { .ID = 17, .ParentID = 4, .Name = "Russell E. Belton", .Department = "Finance", .Position = "Manager" })
            Return staff
        End Function
    End Module
End Namespace

Add a ViewModel

Create a View Model class to expose the Employees field:

MainWindow.xaml.cs
MainWindow.xaml.vb

using DevExpress.Mvvm;

namespace DxTreeListGettingStarted {
    public partial class MainWindow : Window { ... }
    public class Employee { ... }
    public static class Staff { ... }

    public class MainWindowViewModel : ViewModelBase {
        public MainWindowViewModel() {
            Employees = Staff.GetStaff();
        }
        public List<Employee> Employees { get; private set; }
    }
}

Imports DevExpress.Mvvm

Namespace DxTreeListGettingStarted
    Public Partial Class MainWindow
        Inherits Window
        Public Sub New()
            ...
        End Sub
    End Class

    Public Class Employee
        ...
    End Class

    Module Staff
        Function GetStaff() As List(Of Employee)
            ...
        End Function
    End Module

    Public Class MainWindowViewModel
        Inherits ViewModelBase
        Public Sub New()
            Employees = Staff.GetStaff()
        End Sub
        Public Property Employees As List(Of Employee)
    End Class
End Namespace

Define the window's data context to allow the window to use the View Model's data:

MainWindow.xaml

<Window
    ... >
    <Window.DataContext>
        <local:MainWindowViewModel/>
    </Window.DataContext>

Add the TreeListControl to the View

Open the Visual Studio toolbox.
Expand the DX.20.2: Data & Analytics tab.
Double-click the TreeListControl toolbox item.

Add the TreeListControl to the project and bind it to data:

MainWindow.xaml

<Window
...
xmlns:dxg="http://schemas.devexpress.com/winfx/2008/xaml/grid">
<dxg:TreeListControl AutoGenerateColumns="AddNew" 
                     ItemsSource="{Binding Employees}">
    <dxg:TreeListControl.View>
        <dxg:TreeListView />
    </dxg:TreeListControl.View>
</dxg:TreeListControl>

Specify the service columns (TreeListView.KeyFieldName and TreeListView.ParentFieldName) to build a tree:

MainWindow.xaml

<dxg:TreeListControl AutoGenerateColumns="AddNew" 
                     ItemsSource="{Binding Employees}">
    <dxg:TreeListControl.View>
        <dxg:TreeListView KeyFieldName="ID" ParentFieldName="ParentID"/>
    </dxg:TreeListControl.View>
</dxg:TreeListControl>

.NET Subscription

Common Tools

Controls

Tools

Controls and Extensions

Tools

Maintenance Mode

.NET Subscription

Common Tools

Controls

Tools

Controls and Extensions

Tools

Maintenance Mode

Lesson 1 - Add a TreeListControl to a Project

Add a Data Model

Add a ViewModel

Add the TreeListControl to the View