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

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

Set the window’s data context to the View Model:

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

Add the TreeListControl to the View

Drag the TreeListControl component from the Visual Studio toolbox onto the form.

Select the TreeListControl and invoke its Quick Actions.

Click the rectangular button next to the ItemsSource property to invoke its context menu. Select Create Data Binding.

TreeListControl ItemsSource Menu

Select Employees in the dialog window and click OK.

TreeListControl Binding Dialog Window

Set AutoGenerateColumns to AddNew.

TreeListControl Quick Actions AutoGenerateColumns

Switch to the XAML view. Define the TreeListControl’s View:

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

Switch back to the design view. Select the TreeListView and invoke its Quick Actions.

Tip

You can use the Document Outline Window to select an element.

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

TreeListView Quick Actions

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

TreeListView Tutorial

See Also