00:00:00
Avalonia 使用 TreeDataGrid 自定义模板 分层树数据表格,Avalonia.Controls.TreeDataGrid 。
Avalonia.Controls.TreeDataGrid 小记
官方的例子TreeDataGrid 是基础版的。
而 TreeDataGrid 本身的例子写了太多玩意,乱糟糟的,所以特此记录一下。
一个 model
csharp
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; } = [];
}自定义数据
csharp
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 所需要的类型。
csharp
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.
xml
<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 或者其他的就自己写吧。