Avalonia 使用 TreeDataGrid自定义模板 分层树数据表格，Avalonia.Controls.TreeDataGrid

Avalonia 使用 TreeDataGrid自定义模板 分层树数据表格，Avalonia.Controls.TreeDataGrid 。

Avalonia.Controls.TreeDataGrid 小记

官方的例子TreeDataGrid 是基础版的。

而TreeDataGrid 本身的例子写了太多玩意，乱糟糟的，所以特此记录一下。

一个model

public class JobList
{
    public string? Title { get; set; }

    public string? SiteMemo { get; set; }

    public bool? IsSelect { get; set; }
    
    public ListType Type { get; set; } = ListType.IsFile;

    public ObservableCollection<JobList> Members { get; set; } = [];
}

自定义数据

public static ObservableCollection<JobList> NavJobs { get; set; } = [
new JobList
    {
        Title = "测试问价",
        Type = ListType.IsFile,
        Members = [
            new JobList
            {
            
                Title = "测试文件夹的第一个",
                Members = [
                    new JobList
                    {
                        Title = "测试文件夹的第一个",
                    },
                    new JobList
                    {
                        Title = "非空文件夹",
                        Type = ListType.IsFolder,
                    },
                ]
            },
            new JobList
            {
                Title = "非空文件夹",
                Type = ListType.IsFolder,
            },
        ]
    },
];

转为TreeDataGrid所需要的类型。

public HierarchicalTreeDataGridSource<JobList> JobListSource { get; set; } =new(NavJobs)
{
    Columns =
    {
        new HierarchicalExpanderColumn<JobList>(
            new TemplateColumn<JobList>(
                "Name",
                "FileNameCell",
                null,
                new GridLength(200, GridUnitType.Pixel),
                new TemplateColumnOptions<JobList>
                {
                    IsTextSearchEnabled = true,
                }),
            x => x.Members),
        new CheckBoxColumn<JobList>("采集", x => x.IsSelect),
        new CheckBoxColumn<JobList>("采集", x => x.IsSelect),
        
    }
};

• Columns 就是设置列，HierarchicalExpanderColumn表明是一个可展开的列，官方使用的是 TextColumn，
• 所有我们使用TemplateColumn完成我们想要的效果，
• "Name" 字符串是header 也就是列的名称，可填自己想要的，
• "FileNameCell"字符串 是cellTemplateResourceKey也就是模板名称，这个在axaml中要定义的 。
• 第三个 null 是 cellEditingTemplateResourceKey也就是可编辑模板名称，同上，为空就是不要。
• GridLength 是设置这一列的宽度GridUnitType.Pixel是以像素为单位，
• TemplateColumnOptions 是这设置一些额外的属性，不想写为空就是了。
• x => x.Members 就是子元素。

最后，axaml.

<TreeDataGrid Source="{Binding JobListSource}">
  <TreeDataGrid.Resources>
       <DataTemplate x:Key="FileNameCell" x:DataType="models:JobList" >
           <StackPanel Orientation="Horizontal" VerticalAlignment="Center">
               <PathIcon Width="12" Height="12" Data="{StaticResource EditRegular}"/>
               <TextBlock Text="{Binding Title}" VerticalAlignment="Center"/>
           </StackPanel>
       </DataTemplate>
   </TreeDataGrid.Resources>
</TreeDataGrid>

效果

确实蛋疼了点。。PathIcon 的Converter 或者其他的就自己写吧。