wpf devexpress add TreeListControl to project

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

Add data model

Bind tree and add the following fields to the data source object:

Key field contains unique value index node

The Parent field contains the parent index node

Add the data model (Employee and Staff classes) to the MainWindow.xaml.cs 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 view model

Create a view model 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; }
    }
}

Set the window data context to the view model:

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

Add TreeListControl to the view

Drag the TreeListControl component from the toolbox to the form

Select TreeListControl and click Quick Actions

Click the Recalculate button to the ItemsSource property to invoke the context menu. Select Create Data Binding

Select Employees in the dialog box and click OK

SetAutoGenerateColumnsAddAddNew

Switch to the XAML view and define the TreeListControl view:

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

Return to the designer view and select the TreeListView to call Quick Actions

Enable AutoWidth and AutoExpandAllNodes options. Specify service rows (TreeListView.KeyFieldName and TreeListView.ParentFieldName) to generate tree:

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

Run program