wpf-9933-controls-and-libraries-tree-list-getting-started-lesson-1-add-a-treelistcontrol-to-a-project.md
This tutorial adds a TreeListControl to a project and binds it to a self-referential data source:
To build a tree, add the following fields to data source objects:
ID: contains unique values to index nodes.ParentID: contains indexes of parent nodes.Add a data model (Employee and Staff classes) to MainWindow.xaml.cs (MainWindow.xaml.vb in Visual Basic):
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
Create a View Model class (MainWindowViewModel) to expose the Employees data 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; }
}
}
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
Set the window’s data context to the View Model:
<Window
xmlns:local="clr-namespace:DxTreeListGettingStarted"
... >
<Window.DataContext>
<local:MainWindowViewModel/>
</Window.DataContext>
Drag the TreeListControl component from the Visual Studio toolbox onto the form.
Select the TreeListControl and invoke its Quick Actions.
Click the button next to the ItemsSource property to invoke its context menu. Select Create Data Binding.
Select Employees in the dialog window and click OK.
Select the TreeListView, invoke Quick Actions , enable AutoWidth and AutoExpandAllNodes options.
Specify service columns: TreeListView.KeyFieldName and TreeListView.ParentFieldName:
Run the application to see the result:
See Also
Lesson 2 - Build a Tree in Unbound Mode