There are two parts to any TreeDataGrid
:
- The "Source" which is defined in code and describes how your data model will map to the rows and columns of the
TreeDataGrid
- The control which can be instantiated from XAML or from code and describes how the
TreeDataGrid
will appear
The source is usually defined at the view model layer if you're using the MVVM pattern but can also be defined in code-behind. This introduction will assume that you're using the MVVM pattern.
This article assumes that you are using C# 10 and have nullable reference types enabled.
First follow the installation instructions, ensuring that you add the theme to your App.axaml
file.
The data model is your "source" data that will be displayed in the TreeDataGrid
and will be specific to your application. For this introduction we will be using a very simple Person
class:
public class Person
{
public string? FirstName { get; set; }
public string? LastName { get; set; }
public int Age { get; set; }
public ObservableCollection<Person> Children { get; } = new();
}
First we create a MainWindowViewModel
containing our simple dataset:
using System.Collections.ObjectModel;
using Avalonia.Controls;
using Avalonia.Controls.Models.TreeDataGrid;
public class MainWindowViewModel
{
private ObservableCollection<Person> _people = new()
{
new Person
{
FirstName = "Eleanor",
LastName = "Pope",
Age = 32,
Children =
{
new Person { FirstName = "Marcel", LastName = "Gutierrez", Age = 4 },
}
},
new Person
{
FirstName = "Jeremy",
LastName = "Navarro",
Age = 74,
Children =
{
new Person
{
FirstName = "Jane",
LastName = "Navarro",
Age = 42 ,
Children =
{
new Person { FirstName = "Lailah ", LastName = "Velazquez", Age = 16 }
}
},
}
},
new Person { FirstName = "Jazmine", LastName = "Schroeder", Age = 52 },
};
}
We store the data in an ObservableCollection<T>
which will allow the TreeDataGrid
to listen for changes in the data and automatically update the UI.
The source defines how to map the data model to rows and columns. Because we're displaying hierarchical data, we'll use a HierarchicalTreeDataGridSource<Person>
. HierarchicalTreeDataGridSource
is a generic class where the type parameter represents the data model type, in this case Person
.
The constructor to HierarchicalTreeDataGridSource
accepts a collection of type IEnumerable<T>
to which we'll pass our data set.
We'll create the source in the MainWindowViewModel
constructor, add three columns, and expose the source in a property:
public class MainWindowViewModel
{
private ObservableCollection<Person> _people = /* defined earlier */
public MainWindowViewModel()
{
Source = new HierarchicalTreeDataGridSource<Person>(_people)
{
Columns =
{
new HierarchicalExpanderColumn<Person>(
new TextColumn<Person, string>("First Name", x => x.FirstName),
x => x.Children),
new TextColumn<Person, string>("Last Name", x => x.LastName),
new TextColumn<Person, int>("Age", x => x.Age),
},
};
}
public HierarchicalTreeDataGridSource<Person> Source { get; }
}
The first column above is defined as a HierarchicalExpanderColumn
. Its first constructor parameter defines how the data in the column will be displayed. For this we're using a TextColumn
- see below for details of its constructor parameters. The second parameter to the HierarchicalExpanderColumn
constructor is a lambda which selects the property which will contain the children of each row.
The remaining columns are also defined as TextColumn
s - again, TextColumn
is a generic class that accepts the data model type and a value type. The first parameter to TextColumn
is the header to display in the column and the second parameter is a lambda expression which selects the value to display from the data model.
It's now time to add the TreeDataGrid
control to a window and bind it to the source.
<Window xmlns="https://github.com/avaloniaui"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
x:Class="AvaloniaApplication.MainWindow">
<TreeDataGrid Source="{Binding Source}"/>
</Window>
Run the application and you should see the data appear: