创建分层的TreeDataGrid

一个 TreeDataGrid 有两个部分：

• "源" 是在代码中定义的，描述数据模型如何映射到 TreeDataGrid 的行和列。

• 控件可以从 XAML 或代码中实例化，描述 TreeDataGrid 的外观。

如果您使用 MVVM 模式，源通常在视图模型层中定义，但也可以在代码后台中定义。本介绍将假设您使用 MVVM 模式。

本文假设您正在使用 C# 10，并已启用可空引用类型。

安装

首先按照安装说明进行安装，确保将主题添加到您的 App.axaml 文件中。

数据模型

数据模型是要显示在 TreeDataGrid 中的源数据，它将特定于您的应用程序。在本介绍中，我们将使用一个非常简单的 Person 类：

public class Person
{
    public string? FirstName { get; set; }
    public string? LastName { get; set; }
    public int Age { get; set; }
    public ObservableCollection<Person> Children { get; } = new();
}

首先创建一个包含我们简单数据集的 MainWindowViewModel：

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 },
    };
}

我们将数据存储在一个 ObservableCollection<T> 中，这将允许 TreeDataGrid 监听数据的变化，并自动更新 UI。

TreeDataGrid 源

源定义了如何将数据模型映射到行和列。因为我们要显示分层数据，所以我们将使用 HierarchicalTreeDataGridSource<Person>。HierarchicalTreeDataGridSource 是一个泛型类，其中类型参数表示数据模型类型，即 Person。

HierarchicalTreeDataGridSource 的构造函数接受一个类型为 IEnumerable<T> 的集合，我们将数据集传递给它。

我们将在 MainWindowViewModel 构造函数中创建源，添加三列，并在一个属性中公开源：

public class MainWindowViewModel
{
    private ObservableCollection<Person> _people = /* 在前面定义 */

    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; }
}

上面的第一列被定义为 HierarchicalExpanderColumn。它的第一个构造函数参数定义了列中的数据将如何显示。我们使用了一个 TextColumn - 有关其构造函数参数的详细信息，请参见下文。HierarchicalExpanderColumn 构造函数的第二个参数是一个 lambda 表达式，它选择将包含每一行的子级的属性。

其余的列也被定义为 TextColumn - 同样，TextColumn 是一个泛型类，它接受数据模型类型和值类型。TextColumn 的第一个参数是列中要显示的标题，第二个参数是一个 lambda

表达式，它从数据模型中选择要显示的值。

TreeDataGrid 控件

现在是时候将 TreeDataGrid 控件添加到窗口并将其绑定到源了。

<Window xmlns="https://github.com/avaloniaui"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        x:Class="AvaloniaApplication.MainWindow">
  <TreeDataGrid Source="{Binding Source}"/>
</Window>

运行应用程序

运行应用程序，您应该看到数据显示出来：