Lesson 1 - Add a TreeListControl to a Project

• 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

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

MainWindow.xaml.vb

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

1. Create a View Model class to expose the Employees field:

   MainWindow.xaml.cs

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

   MainWindow.xaml.vb

   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
   

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

1. Open the Visual Studio toolbox.
2. Expand the DX.20.1: Data & Analytics tab.

3. Double-click the TreeListControl toolbox item.

   

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

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