TreeListControl can operate in unbound mode without a data source. This tutorial demonstrates how to create a tree without a data source.
Generate tree in XAML
Create a ProjectObject class to implement data objects displayed in TreeListControl:
public class ProjectObject {
public string Name { get; set; }
public string Executor { get; set; }
}
Add a TreeListControl to the window. Call TreeListControl Quick Action and add two rows
Bind rows 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>
Switch to XAML view. Define the TreeListControl view:
<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>
Create root and child nodes. TreeListControl stores root and child nodes in the TreeListView.Nodes and TreeListNode.Nodes collections:
<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>
Generate tree in code
Create a ProjectObject class to implement data objects displayed in TreeListControl:
public class ProjectObject {
public string Name { get; set; }
public string Executor { get; set; }
}
Add TreeListControl to window control
Create two rows and bind the 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>
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;
}
}