尧图网页设计 
简介这份资源面向使用 WPF 开发桌面应用的 C# 开发者尤其是需要在界面中呈现层级数据、希望快速上手树形表格控件的初中级人员。它基于 GitHub 开源项目整理提供了一套可运行的 WPF 树状表格实现解决普通 DataGrid 难以直观展示父子层级、展开折叠与缩进对齐的问题适合后台管理、目录浏览、组织架构等场景参考。压缩包共 36 个文件约 66KB以 12 个 cs 源码文件为核心配合 2 个 xaml 界面文件、csproj 工程文件及 resx 资源文件另有 exe、dll、pdb 等编译产物和缓存日志结构完整可直接在 Visual Studio 中打开调试。其中 LevelToMarginConverter 等转换器与主窗口逻辑展示了层级缩进的实现思路便于理解控件数据绑定与样式定制。目前已有 272 人学习下载适合作为 WPF 树形表格入门与二次开发的参考样例。1. WPF 树状表格到底难在哪从 treegrid.zip 说起手里拿到一个叫treegrid.zip的包解压出来是 WPF 的树状表格实现这个场景我太熟了。WPF 原生只有TreeView和DataGrid两个独立控件前者能展开折叠但没有列后者有列但不支持层级想做一个既能像表格一样对齐多列、又能像树一样逐级展开的东西就得自己拼。标题里这一串关键词——treeGrid、wpf、c#、树状表格、wpf树——说的其实是同一件事在 WPF 里用 C# 实现一个带层级结构的表格控件。它解决的是「父子数据要在一张表里同时展示还要能折叠」的需求典型出现在组织架构、物料 BOM、文件目录、权限菜单这些场景。适合已经会写 WPF 数据绑定、但被 TreeView 和 DataGrid 组合坑过的人。下面我按自己落地的顺序把选型、数据模板、展开逻辑和踩过的坑讲清楚。2. 先想清楚数据长什么样树状表格的三种建模路线动手写控件之前数据模型决定了后面所有代码的写法。WPF 树状表格的难点不在界面在于「一个节点既有自己的列数据又有子节点集合」而DataGrid的ItemsSource是平铺的TreeView的HierarchicalDataTemplate又不管列对齐。所以第一步是把数据建模选对。2.1 自引用模型最贴近 treeGrid 直觉的写法最常见也最推荐的做法是自引用节点类每个节点持有Children集合父节点和子节点是同一个类型。这样递归模板可以直接套用展开逻辑也统一。// 树状表格的节点模型自引用结构 public class TreeGridNode : INotifyPropertyChanged { public string Name { get; set; } // 第一列名称 public string Category { get; set; } // 第二列分类 public double Value { get; set; } // 第三列数值 public int Level { get; set; } // 层级用于缩进计算 // 子节点集合ObservableCollection 保证增删时界面刷新 public ObservableCollectionTreeGridNode Children { get; set; } new ObservableCollectionTreeGridNode(); private bool _isExpanded; public bool IsExpanded { get _isExpanded; set { _isExpanded value; OnPropertyChanged(nameof(IsExpanded)); } } public event PropertyChangedEventHandler PropertyChanged; protected void OnPropertyChanged(string name) PropertyChanged?.Invoke(this, new PropertyChangedEventArgs(name)); }这段代码的关键点是Children用ObservableCollection否则运行时动态加子节点界面不会更新这是新手最容易翻车的地方。IsExpanded单独抽出来是因为展开状态要绑定到界面的展开按钮不能只靠控件内部维护。Level字段不是必须的但如果你打算用缩进而不是展开箭头来表达层级它会省掉很多递归计算。2.2 扁平化模型把树拍平成列表再喂给 DataGrid另一条路线是保留原始树结构但在 ViewModel 里维护一个「可见节点」的扁平列表展开时把子节点插进去折叠时移除。这种做法的好处是直接复用DataGrid列定义、排序、编辑全都白送。// 把树拍平成 DataGrid 能吃的列表只保留可见节点 public ObservableCollectionTreeGridNode Flatten(TreeGridNode root) { var result new ObservableCollectionTreeGridNode(); void Walk(TreeGridNode node) { result.Add(node); // 当前节点一定可见 if (node.IsExpanded) // 只有展开时才递归子节点 { foreach (var child in node.Children) Walk(child); } } Walk(root); return result; }逻辑很直白先加自己再判断是否展开展开才往下走。参数上唯一要注意的是IsExpanded变化时必须重新调用Flatten并替换ItemsSource否则界面不会动。这种写法在节点数量上千时会有点卡因为每次展开都重建整个列表后面第 5 章会讲怎么优化。2.3 两种路线怎么选对比项自引用 递归模板扁平化 DataGrid列对齐需要自己用 Grid 对齐DataGrid 自动处理排序/编辑要自己实现基本白送大数据量递归模板性能一般可配合虚拟化展开动画好做较难代码量中等前期少、后期补逻辑我一般会这样判断如果表格列固定、需要排序和编辑选扁平化如果层级深、要自定义展开样式和动画选自引用。treegrid.zip这类包通常两种都有示例看它主推哪个就知道作者的取舍。3. 用 HierarchicalDataTemplate 搭出自引用树状表格选好自引用模型后界面部分的核心是HierarchicalDataTemplate配合ItemsControl或TreeView再手动对齐列。这一章给出能直接跑的最小实现。3.1 递归模板与列头对齐的最小 XAML思路是用一个TreeView承载层级把它的ItemTemplate换成HierarchicalDataTemplate模板内部用Grid分列列宽和外部表头保持一致。!-- 外层表头列宽必须和节点模板里的 Grid 列宽一致 -- Grid Grid.ColumnDefinitions ColumnDefinition Width240/ ColumnDefinition Width120/ ColumnDefinition Width100/ /Grid.ColumnDefinitions TextBlock Grid.Column0 Text名称 FontWeightBold/ TextBlock Grid.Column1 Text分类 FontWeightBold/ TextBlock Grid.Column2 Text数值 FontWeightBold/ /Grid TreeView ItemsSource{Binding Roots} TreeView.ItemTemplate HierarchicalDataTemplate ItemsSource{Binding Children} Grid Grid.ColumnDefinitions ColumnDefinition Width240/ ColumnDefinition Width120/ ColumnDefinition Width100/ /Grid.ColumnDefinitions TextBlock Grid.Column0 Text{Binding Name}/ TextBlock Grid.Column1 Text{Binding Category}/ TextBlock Grid.Column2 Text{Binding Value}/ /Grid /HierarchicalDataTemplate /TreeView.ItemTemplate /TreeView这里最容易出问题的是列宽表头和节点模板里的ColumnDefinition必须写死成一样的值否则展开后列会错位。HierarchicalDataTemplate的ItemsSource指向ChildrenWPF 会自动递归套用同一个模板不需要你手写递归。Roots是 ViewModel 里的根节点集合。3.2 展开折叠与 IsExpanded 双向绑定TreeViewItem自带IsExpanded但默认不和你的模型联动。要让模型里的IsExpanded控制界面需要加ItemContainerStyle。TreeView.ItemContainerStyle Style TargetTypeTreeViewItem !-- 双向绑定界面点开和代码设置都能同步 -- Setter PropertyIsExpanded Value{Binding IsExpanded, ModeTwoWay}/ /Style /TreeView.ItemContainerStyleModeTwoWay是关键只写{Binding IsExpanded}默认是单向代码里改IsExpanded界面不会响应。加上这段后你在 ViewModel 里设置node.IsExpanded true就能自动展开做「展开全部」「定位到某节点」这类功能时非常省事。3.3 缩进与展开箭头的取舍TreeView默认每层缩进层级深了右边列会被挤。如果列多我一般关掉默认缩进改用第一列内部留白来表达层级。!-- 用 Level 计算左边距替代 TreeView 默认缩进 -- TextBlock Text{Binding Name} Margin{Binding Level, Converter{StaticResource LevelToMargin}}/转换器把Level乘以每层缩进像素返回Thickness。这样列位置固定层级靠文字缩进体现视觉上更像表格。代价是失去默认的展开箭头需要自己在模板里加一个ToggleButton绑定IsExpanded。4. 避坑与排查树状表格最容易翻车的 5 个点这一章是我自己踩过的坑按「现象 → 原因 → 解决」写遇到问题可以对着查。4.1 展开后子节点不显示现象点击展开箭头箭头方向变了但子节点没出来。原因通常是Children用了普通List或者HierarchicalDataTemplate的ItemsSource没绑对。解决确认Children是ObservableCollection确认模板里写的是ItemsSource{Binding Children}而不是漏写。如果数据是异步加载的还要确认加载完成后在 UI 线程更新集合。4.2 列错位、表头和内容对不齐现象表头三列展开后内容列偏移。原因表头和节点模板的列宽定义不一致或者TreeView默认缩进把内容整体右移。解决把两处ColumnDefinition的Width统一必要时关掉TreeView缩进改用 Margin 控制层级。4.3 大数据量展开卡顿现象几千个节点时展开一个父节点要等一两秒。原因递归模板一次性实例化所有可见项且扁平化方案每次展开重建整个列表。解决开启VirtualizingStackPanel扁平化方案改成增量插入而不是全量重建或者用第 5 章的懒加载。4.4 IsExpanded 改了界面没反应现象代码里设置IsExpanded true界面纹丝不动。原因ItemContainerStyle里绑定没写ModeTwoWay或者模型没实现INotifyPropertyChanged。解决两处都检查IsExpanded的 setter 里必须触发PropertyChanged。4.5 编辑单元格后模型没更新现象在表格里改了数值切走再切回来又变回原值。原因TextBlock是只读的要编辑得用TextBox且绑定要ModeTwoWay、UpdateSourceTriggerPropertyChanged。解决把展示列换成TextBox或者用DataGridTemplateColumn包一层。5. 进阶懒加载子节点与展开状态持久化前面几章能跑通基本功能但真实项目里节点可能上千而且用户希望重新打开时展开状态还在。这一章讲两个我常用的技巧。5.1 懒加载展开时才去取子节点数据量大时一次性把整棵树建出来既慢又占内存。做法是节点初始只放一个占位子节点展开时再真正加载。// 展开时才加载子节点避免一次性构建整棵树 private async Task ExpandNodeAsync(TreeGridNode node) { if (node.Children.Count 1 node.Children[0].IsPlaceholder) { node.Children.Clear(); // 移除占位 var children await _service.GetChildrenAsync(node.Id); foreach (var c in children) { c.Level node.Level 1; // 层级递增 node.Children.Add(c); } } }占位节点是个标记判断「是否已加载」用。Level在加载时递增保证缩进正确。注意await回来后如果不在 UI 线程更新ObservableCollection会抛异常需要Dispatcher.Invoke包一下。这个模式配合IsExpanded的 setter 触发用户点开才加载体验和性能都兼顾。5.2 展开状态持久化用户希望下次打开时保持上次的展开状态。做法是把展开节点的唯一标识存下来加载完树后遍历恢复。// 保存展开节点的 Id恢复时按 Id 展开 public void RestoreExpanded(IEnumerableTreeGridNode nodes, HashSetstring expandedIds) { foreach (var node in nodes) { if (expandedIds.Contains(node.Id)) { node.IsExpanded true; // 触发界面展开 RestoreExpanded(node.Children, expandedIds); } } }expandedIds可以从配置文件或本地存储读节点Id要稳定唯一。恢复顺序是先设IsExpanded再递归因为懒加载场景下展开会触发子节点加载递归要放在加载完成之后。如果用了懒加载恢复逻辑要改成异步等子节点加载完再往下走。5.3 一个验证技巧改完展开逻辑后别急着点界面。先在 ViewModel 里写个断言展开一个节点后Flatten出来的可见节点数量应该等于「根 已展开节点的所有子节点」。数量对不上八成是IsExpanded没同步或者占位节点没清干净。这个习惯帮我省了很多来回调试的时间。我自己的教训是树状表格的坑几乎都不在界面而在数据模型和展开状态的同步上。模型建对了界面只是水到渠成。希望帮到你。本文还有配套的精品资源点击获取 WPF树状表格实现：C#自引用模型与扁平化方案详解
简介这份资源面向使用 WPF 开发桌面应用的 C# 开发者尤其是需要在界面中呈现层级数据、希望快速上手树形表格控件的初中级人员。它基于 GitHub 开源项目整理提供了一套可运行的 WPF 树状表格实现解决普通 DataGrid 难以直观展示父子层级、展开折叠与缩进对齐的问题适合后台管理、目录浏览、组织架构等场景参考。压缩包共 36 个文件约 66KB以 12 个 cs 源码文件为核心配合 2 个 xaml 界面文件、csproj 工程文件及 resx 资源文件另有 exe、dll、pdb 等编译产物和缓存日志结构完整可直接在 Visual Studio 中打开调试。其中 LevelToMarginConverter 等转换器与主窗口逻辑展示了层级缩进的实现思路便于理解控件数据绑定与样式定制。目前已有 272 人学习下载适合作为 WPF 树形表格入门与二次开发的参考样例。1. WPF 树状表格到底难在哪从 treegrid.zip 说起手里拿到一个叫treegrid.zip的包解压出来是 WPF 的树状表格实现这个场景我太熟了。WPF 原生只有TreeView和DataGrid两个独立控件前者能展开折叠但没有列后者有列但不支持层级想做一个既能像表格一样对齐多列、又能像树一样逐级展开的东西就得自己拼。标题里这一串关键词——treeGrid、wpf、c#、树状表格、wpf树——说的其实是同一件事在 WPF 里用 C# 实现一个带层级结构的表格控件。它解决的是「父子数据要在一张表里同时展示还要能折叠」的需求典型出现在组织架构、物料 BOM、文件目录、权限菜单这些场景。适合已经会写 WPF 数据绑定、但被 TreeView 和 DataGrid 组合坑过的人。下面我按自己落地的顺序把选型、数据模板、展开逻辑和踩过的坑讲清楚。2. 先想清楚数据长什么样树状表格的三种建模路线动手写控件之前数据模型决定了后面所有代码的写法。WPF 树状表格的难点不在界面在于「一个节点既有自己的列数据又有子节点集合」而DataGrid的ItemsSource是平铺的TreeView的HierarchicalDataTemplate又不管列对齐。所以第一步是把数据建模选对。2.1 自引用模型最贴近 treeGrid 直觉的写法最常见也最推荐的做法是自引用节点类每个节点持有Children集合父节点和子节点是同一个类型。这样递归模板可以直接套用展开逻辑也统一。// 树状表格的节点模型自引用结构 public class TreeGridNode : INotifyPropertyChanged { public string Name { get; set; } // 第一列名称 public string Category { get; set; } // 第二列分类 public double Value { get; set; } // 第三列数值 public int Level { get; set; } // 层级用于缩进计算 // 子节点集合ObservableCollection 保证增删时界面刷新 public ObservableCollectionTreeGridNode Children { get; set; } new ObservableCollectionTreeGridNode(); private bool _isExpanded; public bool IsExpanded { get _isExpanded; set { _isExpanded value; OnPropertyChanged(nameof(IsExpanded)); } } public event PropertyChangedEventHandler PropertyChanged; protected void OnPropertyChanged(string name) PropertyChanged?.Invoke(this, new PropertyChangedEventArgs(name)); }这段代码的关键点是Children用ObservableCollection否则运行时动态加子节点界面不会更新这是新手最容易翻车的地方。IsExpanded单独抽出来是因为展开状态要绑定到界面的展开按钮不能只靠控件内部维护。Level字段不是必须的但如果你打算用缩进而不是展开箭头来表达层级它会省掉很多递归计算。2.2 扁平化模型把树拍平成列表再喂给 DataGrid另一条路线是保留原始树结构但在 ViewModel 里维护一个「可见节点」的扁平列表展开时把子节点插进去折叠时移除。这种做法的好处是直接复用DataGrid列定义、排序、编辑全都白送。// 把树拍平成 DataGrid 能吃的列表只保留可见节点 public ObservableCollectionTreeGridNode Flatten(TreeGridNode root) { var result new ObservableCollectionTreeGridNode(); void Walk(TreeGridNode node) { result.Add(node); // 当前节点一定可见 if (node.IsExpanded) // 只有展开时才递归子节点 { foreach (var child in node.Children) Walk(child); } } Walk(root); return result; }逻辑很直白先加自己再判断是否展开展开才往下走。参数上唯一要注意的是IsExpanded变化时必须重新调用Flatten并替换ItemsSource否则界面不会动。这种写法在节点数量上千时会有点卡因为每次展开都重建整个列表后面第 5 章会讲怎么优化。2.3 两种路线怎么选对比项自引用 递归模板扁平化 DataGrid列对齐需要自己用 Grid 对齐DataGrid 自动处理排序/编辑要自己实现基本白送大数据量递归模板性能一般可配合虚拟化展开动画好做较难代码量中等前期少、后期补逻辑我一般会这样判断如果表格列固定、需要排序和编辑选扁平化如果层级深、要自定义展开样式和动画选自引用。treegrid.zip这类包通常两种都有示例看它主推哪个就知道作者的取舍。3. 用 HierarchicalDataTemplate 搭出自引用树状表格选好自引用模型后界面部分的核心是HierarchicalDataTemplate配合ItemsControl或TreeView再手动对齐列。这一章给出能直接跑的最小实现。3.1 递归模板与列头对齐的最小 XAML思路是用一个TreeView承载层级把它的ItemTemplate换成HierarchicalDataTemplate模板内部用Grid分列列宽和外部表头保持一致。!-- 外层表头列宽必须和节点模板里的 Grid 列宽一致 -- Grid Grid.ColumnDefinitions ColumnDefinition Width240/ ColumnDefinition Width120/ ColumnDefinition Width100/ /Grid.ColumnDefinitions TextBlock Grid.Column0 Text名称 FontWeightBold/ TextBlock Grid.Column1 Text分类 FontWeightBold/ TextBlock Grid.Column2 Text数值 FontWeightBold/ /Grid TreeView ItemsSource{Binding Roots} TreeView.ItemTemplate HierarchicalDataTemplate ItemsSource{Binding Children} Grid Grid.ColumnDefinitions ColumnDefinition Width240/ ColumnDefinition Width120/ ColumnDefinition Width100/ /Grid.ColumnDefinitions TextBlock Grid.Column0 Text{Binding Name}/ TextBlock Grid.Column1 Text{Binding Category}/ TextBlock Grid.Column2 Text{Binding Value}/ /Grid /HierarchicalDataTemplate /TreeView.ItemTemplate /TreeView这里最容易出问题的是列宽表头和节点模板里的ColumnDefinition必须写死成一样的值否则展开后列会错位。HierarchicalDataTemplate的ItemsSource指向ChildrenWPF 会自动递归套用同一个模板不需要你手写递归。Roots是 ViewModel 里的根节点集合。3.2 展开折叠与 IsExpanded 双向绑定TreeViewItem自带IsExpanded但默认不和你的模型联动。要让模型里的IsExpanded控制界面需要加ItemContainerStyle。TreeView.ItemContainerStyle Style TargetTypeTreeViewItem !-- 双向绑定界面点开和代码设置都能同步 -- Setter PropertyIsExpanded Value{Binding IsExpanded, ModeTwoWay}/ /Style /TreeView.ItemContainerStyleModeTwoWay是关键只写{Binding IsExpanded}默认是单向代码里改IsExpanded界面不会响应。加上这段后你在 ViewModel 里设置node.IsExpanded true就能自动展开做「展开全部」「定位到某节点」这类功能时非常省事。3.3 缩进与展开箭头的取舍TreeView默认每层缩进层级深了右边列会被挤。如果列多我一般关掉默认缩进改用第一列内部留白来表达层级。!-- 用 Level 计算左边距替代 TreeView 默认缩进 -- TextBlock Text{Binding Name} Margin{Binding Level, Converter{StaticResource LevelToMargin}}/转换器把Level乘以每层缩进像素返回Thickness。这样列位置固定层级靠文字缩进体现视觉上更像表格。代价是失去默认的展开箭头需要自己在模板里加一个ToggleButton绑定IsExpanded。4. 避坑与排查树状表格最容易翻车的 5 个点这一章是我自己踩过的坑按「现象 → 原因 → 解决」写遇到问题可以对着查。4.1 展开后子节点不显示现象点击展开箭头箭头方向变了但子节点没出来。原因通常是Children用了普通List或者HierarchicalDataTemplate的ItemsSource没绑对。解决确认Children是ObservableCollection确认模板里写的是ItemsSource{Binding Children}而不是漏写。如果数据是异步加载的还要确认加载完成后在 UI 线程更新集合。4.2 列错位、表头和内容对不齐现象表头三列展开后内容列偏移。原因表头和节点模板的列宽定义不一致或者TreeView默认缩进把内容整体右移。解决把两处ColumnDefinition的Width统一必要时关掉TreeView缩进改用 Margin 控制层级。4.3 大数据量展开卡顿现象几千个节点时展开一个父节点要等一两秒。原因递归模板一次性实例化所有可见项且扁平化方案每次展开重建整个列表。解决开启VirtualizingStackPanel扁平化方案改成增量插入而不是全量重建或者用第 5 章的懒加载。4.4 IsExpanded 改了界面没反应现象代码里设置IsExpanded true界面纹丝不动。原因ItemContainerStyle里绑定没写ModeTwoWay或者模型没实现INotifyPropertyChanged。解决两处都检查IsExpanded的 setter 里必须触发PropertyChanged。4.5 编辑单元格后模型没更新现象在表格里改了数值切走再切回来又变回原值。原因TextBlock是只读的要编辑得用TextBox且绑定要ModeTwoWay、UpdateSourceTriggerPropertyChanged。解决把展示列换成TextBox或者用DataGridTemplateColumn包一层。5. 进阶懒加载子节点与展开状态持久化前面几章能跑通基本功能但真实项目里节点可能上千而且用户希望重新打开时展开状态还在。这一章讲两个我常用的技巧。5.1 懒加载展开时才去取子节点数据量大时一次性把整棵树建出来既慢又占内存。做法是节点初始只放一个占位子节点展开时再真正加载。// 展开时才加载子节点避免一次性构建整棵树 private async Task ExpandNodeAsync(TreeGridNode node) { if (node.Children.Count 1 node.Children[0].IsPlaceholder) { node.Children.Clear(); // 移除占位 var children await _service.GetChildrenAsync(node.Id); foreach (var c in children) { c.Level node.Level 1; // 层级递增 node.Children.Add(c); } } }占位节点是个标记判断「是否已加载」用。Level在加载时递增保证缩进正确。注意await回来后如果不在 UI 线程更新ObservableCollection会抛异常需要Dispatcher.Invoke包一下。这个模式配合IsExpanded的 setter 触发用户点开才加载体验和性能都兼顾。5.2 展开状态持久化用户希望下次打开时保持上次的展开状态。做法是把展开节点的唯一标识存下来加载完树后遍历恢复。// 保存展开节点的 Id恢复时按 Id 展开 public void RestoreExpanded(IEnumerableTreeGridNode nodes, HashSetstring expandedIds) { foreach (var node in nodes) { if (expandedIds.Contains(node.Id)) { node.IsExpanded true; // 触发界面展开 RestoreExpanded(node.Children, expandedIds); } } }expandedIds可以从配置文件或本地存储读节点Id要稳定唯一。恢复顺序是先设IsExpanded再递归因为懒加载场景下展开会触发子节点加载递归要放在加载完成之后。如果用了懒加载恢复逻辑要改成异步等子节点加载完再往下走。5.3 一个验证技巧改完展开逻辑后别急着点界面。先在 ViewModel 里写个断言展开一个节点后Flatten出来的可见节点数量应该等于「根 已展开节点的所有子节点」。数量对不上八成是IsExpanded没同步或者占位节点没清干净。这个习惯帮我省了很多来回调试的时间。我自己的教训是树状表格的坑几乎都不在界面而在数据模型和展开状态的同步上。模型建对了界面只是水到渠成。希望帮到你。本文还有配套的精品资源点击获取