Lesson 1 - Add a TreeListControl to a Project

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

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

Add a ViewModel

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

    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; }
        }
    }
    
  2. Define the window's data context to allow the window to use the View Model's data:

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

Add the TreeListControl to the View

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

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

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

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