Lesson 2 - Building a Tree in Unbound Mode

• May 22, 2020
• 3 minutes to read

TreeListControl can function without a data source. This mode is called - unbound mode. In this tutorial you will learn how to manually create a tree (unbound mode). It is shown how to create nodes in XAML and code.

1. Run MS Visual Studio 2010.
2. Create a new Silverlight Application project.

3. Create the ProjectObject class that represents data objects displayed within the TreeListControl.

   C#

   
   public class ProjectObject {
       public String ProjectName { get; set; }
       public string Executor { get; set; }
   }
   

4. Drop the TreeListControl component onto the window.

5. Create two columns and bind them to Name and Executor fields.

   XAML

   
   <dxg:TreeListControl Name="treeListControl1">
       <dxg:TreeListControl.Columns>
           <dxg:TreeListColumn FieldName="ProjectName"/>
           <dxg:TreeListColumn FieldName="Executor"/>
       </dxg:TreeListControl.Columns>
       <dxg:TreeListControl.View>
           <dxg:TreeListView Name="treeListView1"/>
       </dxg:TreeListControl.View>
   </dxg:TreeListControl>
   

6. Create a root node. Root nodes are contained within the TreeListView.Nodes collection.

   XAML

   
   <dxg:TreeListControl.View>
           <dxg:TreeListView Name="treeListView1">
               <dxg:TreeListView.Nodes>
                   <dxg:TreeListNode>
                       <dxg:TreeListNode.Content>
                           <local:ProjectObject ProjectName="Project: Betaron" Executor="Destiny Tabisola" />
                       </dxg:TreeListNode.Content>
                   </dxg:TreeListNode>
               </dxg:TreeListView.Nodes>
           </dxg:TreeListView>
       </dxg:TreeListControl.View>
   

7. Create child nodes for the root node created above. Child nodes are stored within a node's TreeListNode.Nodes collection.

   The resulting code is shown below.

   XAML

   
   <UserControl x:Class="DXTreeList_Tutorial_2.MainPage"
       xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
       xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
       xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
       xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
       mc:Ignorable="d"
       d:DesignHeight="300" d:DesignWidth="400"
                xmlns:dxg="http://schemas.devexpress.com/winfx/2008/xaml/grid"
                xmlns:local="clr-namespace:DXTreeList_Tutorial_2">
   
       <Grid x:Name="LayoutRoot" Background="White">
           <dxg:TreeListControl Name="treeListControl1">
               <dxg:TreeListControl.Columns>
                   <dxg:TreeListColumn FieldName="ProjectName"/>
                   <dxg:TreeListColumn FieldName="Executor"/>
               </dxg:TreeListControl.Columns>
               <dxg:TreeListControl.View>
                   <dxg:TreeListView Name="treeListView1">
                       <dxg:TreeListView.Nodes>
                           <dxg:TreeListNode>
                               <dxg:TreeListNode.Content>
                                   <local:ProjectObject ProjectName="Project: Betaron" Executor="Destiny Tabisola" />
                               </dxg:TreeListNode.Content>
                               <dxg:TreeListNode.Nodes>
                                   <dxg:TreeListNode>
                                       <dxg:TreeListNode.Content>
                                           <local:ProjectObject ProjectName="Development" Executor="Kairra Hogg" />
                                       </dxg:TreeListNode.Content>
                                       <dxg:TreeListNode.Nodes>
                                           <dxg:TreeListNode>
                                               <dxg:TreeListNode.Content>
                                                   <local:ProjectObject ProjectName="Coding" Executor="Sabato Durley" />
                                               </dxg:TreeListNode.Content>
                                           </dxg:TreeListNode>
                                       </dxg:TreeListNode.Nodes>
                                   </dxg:TreeListNode>
                               </dxg:TreeListNode.Nodes>
                           </dxg:TreeListNode>
                       </dxg:TreeListView.Nodes>
                   </dxg:TreeListView>
               </dxg:TreeListControl.View>
           </dxg:TreeListControl>
       </Grid>
   </UserControl>
   

   C#

   
   using System;
   using System.Windows;
   
   namespace DXTreeList_Tutorial_2 {
       /// <summary>
       /// Interaction logic for MainWindow.xaml
       /// </summary>
       public partial class MainWindow : Window {
           public MainWindow() {
               InitializeComponent();
           }
       }
   
       public class ProjectObject {
           public String ProjectName { get; set; }
           public string Executor { get; set; }
       }
   }
   

8. The following code shows how to create both root and child nodes in code behind.

   C#

   
   using DevExpress.Xpf.Grid;
   
   // ...
   public partial class MainWindow : Window {
       public MainWindow() {
           InitializeComponent();
           BuildTree();
       }
   
       private void BuildTree() {
           TreeListNode rootNode = CreateRootNode(new ProjectObject() { ProjectName = "Project: Stanton", Executor = "Nicholas Llams" });
           TreeListNode childNode = CreateChildNode(rootNode, new ProjectObject() { ProjectName = "Information Gathering", Executor = "Ankie Galva" });
           CreateChildNode(childNode, new ProjectObject() { ProjectName = "Design", Executor = "Reardon Felton" });
       }
   
       private TreeListNode CreateRootNode(object dataObject) {
           TreeListNode rootNode = new TreeListNode(dataObject);
           treeListView1.Nodes.Add(rootNode);
           return rootNode;
       }
   
       private TreeListNode CreateChildNode(TreeListNode parentNode, object dataObject) {
           TreeListNode childNode = new TreeListNode(dataObject);
           parentNode.Nodes.Add(childNode);
           return childNode;
       }
   }
   

9. Run the application. The image below shows the result: