UWP平台hierarchical DataGrid实现方案 需兼容Telerik radTreeListView功能

核心实现思路 #

UWP原生未提供开箱即用的TreeListView控件，可基于Windows Community Toolkit的DataGrid控件，结合分层数据模型、自定义行模板、状态管理逻辑实现和RadTreeListView完全一致的运行效果，覆盖层级展示、展开折叠、交互操作等全部核心特性。

分步实现步骤 #

1. 基础依赖准备 #

引用适配UWP版本的Windows Community Toolkit DataGrid控件，作为底层承载控件。

2. 分层数据模型定义 #

所有绑定的业务数据需要继承统一的层级基类，示例代码如下：

public class HierarchyItemBase : INotifyPropertyChanged
{
    public int Id { get; set; }
    public int ParentId { get; set; }
    public int Level { get; set; }
    private bool _isExpanded;
    public bool IsExpanded
    {
        get => _isExpanded;
        set {
            _isExpanded = value;
            OnPropertyChanged();
            // 展开状态变更时触发子节点显示/隐藏逻辑
            UpdateChildrenVisibility(value);
        }
    }
    public ObservableCollection<HierarchyItemBase> Children { get; set; } = new();
    private bool _isVisible = true;
    public bool IsVisible
    {
        get => _isVisible;
        set { _isVisible = value; OnPropertyChanged(); }
    }

    public event PropertyChangedEventHandler PropertyChanged;
    protected void OnPropertyChanged([CallerMemberName] string propertyName = null)
    {
        PropertyChanged?.Invoke(this, new PropertyChangedEventArgs(propertyName));
    }

    private void UpdateChildrenVisibility(bool isParentExpanded)
    {
        foreach (var child in Children)
        {
            child.IsVisible = isParentExpanded;
            if (child.IsExpanded && child.Children.Any())
            {
                child.UpdateChildrenVisibility(isParentExpanded);
            }
        }
    }
}

3. 自定义DataGrid行模板 #

重写DataGrid的RowStyle，添加展开折叠按钮、实现层级缩进，示例XAML如下：

<Style TargetType="controls:DataGridRow">
    <Setter Property="Template">
        <Setter.Value>
            <ControlTemplate TargetType="controls:DataGridRow">
                <Grid>
                    <Grid.ColumnDefinitions>
                        <ColumnDefinition Width="Auto"/>
                        <ColumnDefinition Width="*"/>
                    </Grid.ColumnDefinitions>
                    <!-- 展开折叠按钮，无子集时隐藏 -->
                    <ToggleButton Grid.Column="0" 
                                  IsChecked="{Binding IsExpanded, Mode=TwoWay}"
                                  Visibility="{Binding Children.Count, Converter={StaticResource CountToVisibilityConverter}}"
                                  Margin="{Binding Level, Converter={StaticResource LevelToIndentConverter}, ConverterParameter=20}"/>
                    <!-- 原生行内容承载 -->
                    <controls:DataGridCellsPresenter Grid.Column="1"/>
                </Grid>
            </ControlTemplate>
        </Setter.Value>
    </Setter>
</Style>

其中LevelToIndentConverter逻辑为返回Thickness(level * parameter, 0, 0, 0)，实现每级固定缩进。

4. 数据集绑定逻辑 #

将全量层级数据拍平为只包含IsVisible=true的一维集合绑定到DataGrid的ItemsSource，每次有节点展开/折叠时重新刷新绑定的一维集合即可。

RadTreeListView核心行为对齐配置 #

• 层级展示：缩进逻辑、展开折叠按钮的样式、位置完全对齐RadTreeListView的默认表现，可通过调整Converter的参数自定义缩进距离
• 状态持久化：IsExpanded、IsSelected等状态直接存储在数据模型中，滚动、刷新数据时状态不会丢失
• 操作逻辑：列排序、筛选、单元格编辑、行选择（单选/多选/扩展选择）完全复用DataGrid原生能力，和RadTreeListView操作逻辑一致
• 懒加载支持：首次点击父节点展开按钮时再异步拉取子节点数据，加载过程中可在行内显示加载占位符，和RadTreeListView懒加载行为一致
• 扩展功能适配：如需拖拽排序、节点搜索、行上下文菜单等RadTreeListView支持的功能，可通过扩展DataGrid的对应事件实现，无需修改底层架构

迁移适配提示：如果原有业务代码大量使用了RadTreeListView的公开API，可以基于上述实现封装自定义控件，对外暴露和RadTreeListView一致的ExpandAll()、CollapseAll()、SelectedItems、HierarchyItemsSource等属性方法，无需修改业务层代码即可完成迁移。

内容的提问来源于stack exchange，提问作者Rocny Morales Delgado