Lesson 2 - Build a Tree in Unbound Mode

  • 3 minutes to read

The TreeListControl can operate without a data source in an unbound mode. This tutorial demonstrates how to create a tree without a data source.

Build a Tree in XAML

  1. Create the ProjectObject class that implements data objects displayed within the TreeListControl:

    public class ProjectObject {
        public string Name { get; set; }
        public string Executor { get; set; }
    }
    
  2. Add a TreeListControl to the window.

  3. Create two columns and bind them to Name and Executor fields:

    <dxg:TreeListControl Name="treeListControl1">
        <dxg:TreeListControl.Columns>
            <dxg:TreeListColumn FieldName="Name"/>
            <dxg:TreeListColumn FieldName="Executor"/>
        </dxg:TreeListControl.Columns>
        <dxg:TreeListControl.View>
            <dxg:TreeListView Name="treeListView1"/>
        </dxg:TreeListControl.View>
    </dxg:TreeListControl>
    
  4. Create root and child nodes. The TreeListControl stores root and child nodes in the TreeListView.Nodes and TreeListNode.Nodes collections respectively:

    <dxg:TreeListControl.View>
        <dxg:TreeListView Name="treeListView1">
            <dxg:TreeListView.Nodes>
                <dxg:TreeListNode>
                    <dxg:TreeListNode.Content>
                        <local:ProjectObject Name="Project: Betaron" Executor="Destiny Tabisola" />
                    </dxg:TreeListNode.Content>
                    <dxg:TreeListNode.Nodes>
                        <dxg:TreeListNode>
                            <dxg:TreeListNode.Content>
                                <local:ProjectObject Name="Development" Executor="Kairra Hogg" />
                            </dxg:TreeListNode.Content>
                            <dxg:TreeListNode.Nodes>
                                <dxg:TreeListNode>
                                    <dxg:TreeListNode.Content>
                                        <local:ProjectObject Name="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>
    

Build a Tree in Code

  1. Create the ProjectObject class that implements data objects displayed within the TreeListControl:

    public class ProjectObject {
        public string Name { get; set; }
        public string Executor { get; set; }
    }
    
  2. Add a TreeListControl to the window.

  3. Create two columns and bind them to Name and Executor fields:

    <dxg:TreeListControl Name="treeListControl1">
        <dxg:TreeListControl.Columns>
            <dxg:TreeListColumn FieldName="Name"/>
            <dxg:TreeListColumn FieldName="Executor"/>
        </dxg:TreeListControl.Columns>
        <dxg:TreeListControl.View>
            <dxg:TreeListView Name="treeListView1"/>
        </dxg:TreeListControl.View>
    </dxg:TreeListControl>
    
  4. Create root and child nodes in code:

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