SuperAPI AI 工具集
合作ENAI 行业资讯收藏
Skill 广场syncfusion-maui-treegrid

syncfusion-maui-treegrid

前端与建站

查看项目

更新于 10-16 04:01

技能介绍

用途

Syncfusion .NET MAUI Tree Grid（SfTreeGrid）控件用于在 .NET MAUI 应用中，以表格视图显示和操作分层数据。它将网格的清晰结构与呈现父子关系的能力结合，适用于展示具有层级或自关联关系的数据，并针对大数据集保持高效性能。

主要能力

数据绑定：支持自关联模式（ParentPropertyName / ChildPropertyName / SelfRelationRootValue）与嵌套集合模式（ChildPropertyName），可绑定 IEnumerable 数据源。提供 AutoExpandMode（None、RootNodesExpanded、AllNodesExpanded），并支持通过代码展开或折叠节点（ExpandAllNodes、ExpandNode、CollapseAllNodes、CollapseNode），以及 NodeExpanding、NodeCollapsing 事件和 TreeNode 的 IsExpanded 属性。

列：支持自动生成列（AutoGenerateColumnsMode 的 None、Reset、ResetAll、RetainOld、SmartReset 模式）与手动定义列，可通过 AutoGeneratingColumn 事件定制自动生成的列，并可对列进行添加、访问、清除、移除操作。

列类型：包括 TreeGridTextColumn、TreeGridNumericColumn、TreeGridDateColumn、TreeGridCheckBoxColumn、TreeGridTemplateColumn，支持 MappingName、HeaderText、Width、Format 等基础属性，DisplayBinding、值转换器、文本对齐（HeaderTextAlignment、CellTextAlignment）、内边距（HeaderPadding、CellPadding）、表头定制（HeaderText、HeaderTemplate）、隐藏列（Visible）以及数值与日期格式化（C2、N2、P2、日期格式）。

列宽：支持 ColumnWidthMode（Fill、Auto、LastColumnFill、FitByCell、FitByHeader、None）、DefaultColumnWidth、ActualWidth，以及每列独立的 ColumnWidthMode 和最小/最大宽度（MinimumWidth、MaximumWidth）。

展开器定制：可通过 DataTemplate 加载展开图标（ExpanderIcon），使用 DataTemplateSelector 区分展开/折叠图标，更改展开器列（ExpanderColumn），定制展开器列宽（ExpanderWidth），并通过模型属性控制初始展开状态（ExpandStateMappingName）。

排序与筛选：支持编程式排序（SortColumnDescriptions、SortColumnDescription）、排序模式（Single、Multiple、None）、三态排序（AllowTriStateSorting）、显示排序序号（ShowSortNumbers）、排序手势（SortingGestureType）、排序事件（SortColumnsChanging、SortColumnsChanged）、按列禁用排序（AllowSorting）与自定义排序（SortComparers、IComparer、ISortDirection）。筛选支持 Root、All、Extended 级别，编程式视图筛选（View.Filter、View.RefreshFilter）、基于条件的筛选（Equals、Contains、Does Not Equal）以及清除筛选。

选择：支持 None、Single、Multiple、SingleDeselect 模式，可获取选中行（SelectedIndex、SelectedRow、SelectedRows），进行编程式选择（按索引、行、多行、SelectAll），清除选择（SelectionMode.None、ClearSelection），响应选择事件（SelectionChanging、SelectionChanged），自定义选中外观（SelectionBackground、SelectedRowTextColor），并将选择属性绑定到 ViewModel。

冻结窗格：支持冻结左侧列（FrozenColumnCount）、冻结右侧/页脚列（FooterFrozenColumnCount），可设置冻结线颜色（FreezePaneLineColor）和线宽（FreezePaneLineStrokeThickness）。

样式：支持列单元格样式（CellStyle）、列头样式（HeaderStyle）、隐式样式（TreeGridCell、TreeGridExpanderCell、TreeGridHeaderCell、TreeGridRow、TreeGridHeaderRow）、DefaultStyle（HeaderRowBackground、RowBackground、RowTextColor），可从应用或页面资源应用样式，并控制网格线可见性（Both、Horizontal、Vertical、None）、颜色与描边。

使用方式

需要 .NET 9 SDK 与 Visual Studio 2022 v17.12 及以上版本。安装 Syncfusion.Maui.TreeGrid NuGet 包，在 MauiProgram.cs 中注册 Syncfusion 核心处理程序：builder.ConfigureSyncfusionCore();。XAML 命名空间为：xmlns:syncfusion="clr-namespace:Syncfusion.Maui.TreeGrid;assembly=Syncfusion.Maui.TreeGrid"。

最小示例（绑定嵌套集合）：

using Syncfusion.Maui.TreeGrid;
using System.Collections.ObjectModel;

public class EmployeeInfo
{
    public string? FirstName { get; set; }
    public string? LastName { get; set; }
    public double Salary { get; set; }
    public ObservableCollection<EmployeeInfo> Children { get; set; } = new();
}

SfTreeGrid treeGrid = new SfTreeGrid();
treeGrid.ItemsSource = new ObservableCollection<EmployeeInfo>
{
    new EmployeeInfo
    {
        FirstName = "James", LastName = "Smith", Salary = 2000000,
        Children = new ObservableCollection<EmployeeInfo>
        {
            new EmployeeInfo { FirstName = "Andrew", LastName = "Fuller", Salary = 1200000 }
        }
    }
};
treeGrid.ChildPropertyName = "Children";
this.Content = treeGrid;

自定义列示例：

<syncfusion:SfTreeGrid x:Name="treeGrid"
                       ItemsSource="{Binding EmployeeCollection}"
                       ChildPropertyName="Children"
                       AutoGenerateColumnsMode="None">
    <syncfusion:SfTreeGrid.Columns>
        <syncfusion:TreeGridTextColumn HeaderText="First Name" MappingName="FirstName" />
        <syncfusion:TreeGridTextColumn HeaderText="Last Name" MappingName="LastName" />
        <syncfusion:TreeGridNumericColumn HeaderText="Salary" MappingName="Salary" Format="C2" />
    </syncfusion:SfTreeGrid.Columns>
</syncfusion:SfTreeGrid>

绑定自关联数据：

treeGrid.ItemsSource = employeeViewModel.Employees;
treeGrid.ParentPropertyName = "ID";
treeGrid.ChildPropertyName = "ReportsTo";
treeGrid.SelfRelationRootValue = -1;
treeGrid.AutoExpandMode = TreeGridExpandMode.RootNodesExpanded;

应用默认样式：

treeGrid.DefaultStyle.HeaderRowBackground = Color.FromArgb("#0074E3");
treeGrid.DefaultStyle.HeaderRowTextColor = Colors.White;
treeGrid.DefaultStyle.RowBackground = Color.FromArgb("#AFD5FB");
treeGrid.DefaultStyle.RowTextColor = Color.FromArgb("#212121");

适用场景

  • 在 .NET MAUI 应用中显示层级或自关联数据
  • 将嵌套集合或自引用数据源绑定到树形网格
  • 配置树形网格列，选择列类型与列宽模式
  • 对层级数据进行排序或筛选
  • 在宽数据集中冻结列以便导航
  • 实现行选择并响应选择变化
  • 定制展开器列（图标、宽度、位置、初始展开状态）
  • 设置单元格、表头、行与网格线样式
  • 通过代码展开或折叠节点

限制

需要 .NET 9 SDK 与 Visual Studio 2022 v17.12 及以上版本。必须在 MauiProgram.cs 中调用 builder.ConfigureSyncfusionCore();，否则渲染 TreeGrid 时会引发运行时错误。其他具体限制在资料中暂未提供。