简介这份资源面向使用 WPF 开发桌面应用的 C# 开发者尤其是需要在界面中呈现层级数据、又希望保留表格列对齐与展开折叠能力的场景。它基于开源项目整理提供了一套可运行的树形表格实现适合作为学习 WPF 自定义控件、数据模板与层级布局的参考样例。压缩包共 36 个文件约 66KB其中 12 个 cs 源码文件承载核心逻辑与转换器2 个 xaml 与 1 个 baml 描述界面结构另有 csproj、resx、settings 等工程配置以及 exe、dll、pdb 等编译产物便于直接运行或二次调试。目录中可见 TreeGrid 主工程、MainWindow 与 LevelToMarginConverter 等模块能帮助读者理解树节点缩进、层级边距换算与表格行渲染的配合方式。目前已有 272 人学习下载可作为 WPF 树状表格入门与改造的起点从中获取控件结构组织、转换器用法与工程配置的完整思路。1. 拆开 treegrid.zip一个能直接跑的 WPF 树状表格最小实现如果你正在 WPF 里做上位机、设备管理或者任何带层级结构的数据展示大概率会遇到同一个尴尬DataGrid只认平铺的行TreeView又只有一列想同时要「树形展开」和「多列字段」就得自己拼。这个treegrid.zip就是冲着这个痛点来的——它用纯 WPF 实现了一个树状表格工程结构干净MainWindow.xaml里放界面LevelToMarginConverter.cs负责层级缩进TreeGrid.csproj是标准的 .NET 工程文件解压后用 Visual Studio 打开就能编译运行。它适合两类人一是刚接触 WPF 数据绑定、想找一个能跑通的最小样例来改的新手二是手头有设备树、组织架构、BOM 清单这类层级数据需要一个不依赖第三方控件库的落地起点。下面我按「它怎么组织 → 怎么改成你的数据 → 哪里容易翻车」的顺序拆一遍。2. 工程结构与数据绑定从 TreeGrid.csproj 到 MainWindow.xaml2.1 先看清这个 zip 里到底有什么解压treegrid.zip之后目录结构是典型的 Visual Studio WPF 工程布局没有多余的依赖包也没有 NuGet 还原的坑。核心文件分布如下文件 / 目录作用TreeGrid.csproj工程入口定义目标框架和编译项App.xaml/App.xaml.cs应用启动指定启动窗口MainWindow.xaml主界面树状表格的 XAML 布局都在这里MainWindow.xaml.cs界面逻辑负责构造层级数据LevelToMarginConverter.cs值转换器把层级深度换算成左边距Properties/程序集信息、资源、设置bin/Debug、obj/x86编译产物可以忽略这里最值得先看的是LevelToMarginConverter.cs。树状表格和普通表格最大的区别就是「子节点要往右缩进」而 WPF 的DataGrid本身不提供这个能力所以作者用了一个IValueConverter把节点的Level值转成Thickness绑到某一列的Margin上。这个思路是整个实现的核心理解了它后面改数据、改列都顺。2.2 数据模型怎么定层级字段是命门树状表格要跑起来数据模型里必须有一个能表达「我是第几层」的字段以及一个能表达「我的子节点是谁」的集合。常见做法是定义一个TreeItem类包含Name、Level、Children三个成员。Level从 0 开始根节点是 0子节点是 1以此类推。下面是我一般会写的模型骨架// TreeItem.cs —— 树状表格的数据单元 public class TreeItem { public string Name { get; set; } // 显示名称 public int Level { get; set; } // 层级深度根为 0 public ObservableCollectionTreeItem Children { get; set; } // 子节点集合 public TreeItem() { Children new ObservableCollectionTreeItem(); } }逻辑说明Level是给转换器用的决定缩进多少Children用ObservableCollection是为了后续增删节点时界面能自动刷新。参数说明如果你想让缩进更明显可以在转换器里把Level * 20改成Level * 30单位是像素。注意Level不要手动乱填最好在构造数据时递归赋值否则缩进会错位。2.3 转换器把 Level 变成左边距LevelToMarginConverter.cs是整个树状效果的开关。它实现IValueConverter在Convert方法里接收Level返回一个Thickness。典型写法如下// LevelToMarginConverter.cs —— 层级转缩进 public class LevelToMarginConverter : IValueConverter { public object Convert(object value, Type targetType, object parameter, CultureInfo culture) { int level value is int ? (int)value : 0; // 每层缩进 20 像素只缩左边 return new Thickness(level * 20, 0, 0, 0); } public object ConvertBack(object value, Type targetType, object parameter, CultureInfo culture) { throw new NotImplementedException(); } }逻辑说明Convert把整数层级换算成Thickness只设置Left这样节点名称就会随层级右移。参数说明level * 20里的 20 是缩进步长改大改小直接影响视觉层次ConvertBack一般用不到直接抛异常即可这是 WPF 单向绑定的常见写法。写完转换器记得在 XAML 的资源里声明它否则绑定找不到。2.4 XAML 里怎么把树和列拼起来MainWindow.xaml是落地的地方。核心思路是用DataGrid做外壳用DataGridTemplateColumn放一个带缩进的TextBlock再用HierarchicalDataTemplate或者手动展开的方式把子节点铺平。下面是我会用的关键片段!-- MainWindow.xaml 关键部分 -- Window.Resources local:LevelToMarginConverter x:KeyLevelToMargin/ /Window.Resources DataGrid ItemsSource{Binding FlatItems} AutoGenerateColumnsFalse DataGrid.Columns DataGridTemplateColumn Header名称 Width300 DataGridTemplateColumn.CellTemplate DataTemplate TextBlock Text{Binding Name} Margin{Binding Level, Converter{StaticResource LevelToMargin}}/ /DataTemplate /DataGridTemplateColumn.CellTemplate /DataGridTemplateColumn DataGridTextColumn Header层级 Binding{Binding Level} Width80/ /DataGrid.Columns /DataGrid逻辑说明ItemsSource绑的是一个「已经铺平的集合」FlatItems也就是把树按前序遍历展开成一维列表每个节点带着自己的Level。这样DataGrid就能正常显示多列同时靠Margin制造树形缩进。参数说明Width300是名称列宽度按你的字段长度调Level列可以留着调试正式用可以删掉。注意FlatItems必须在数据变化时重建否则展开折叠不会更新。2.5 把树铺平递归展开的写法树要显示成表格就得先铺平。常见做法是写一个递归方法把Children按顺序塞进一个List// 把树按前序展开成一维列表 private void Flatten(TreeItem node, ListTreeItem result) { result.Add(node); // 先加自己 foreach (var child in node.Children) // 再递归子节点 { Flatten(child, result); } } // 调用示例 var flat new ListTreeItem(); Flatten(root, flat); FlatItems new ObservableCollectionTreeItem(flat);逻辑说明前序遍历保证父节点永远在子节点前面配合Level缩进视觉上就是一棵树。参数说明root是你的根节点如果要做「点击展开/折叠」就在Flatten里判断节点是否展开只铺开已展开的分支。这一步是新手最容易漏的——很多人直接把树绑给DataGrid结果只显示根节点就是因为没铺平。3. 从样例到自己的数据改列、改层级、接真实数据源3.1 增加一列到底要改哪几个地方样例里只有「名称」和「层级」两列实际项目往往要加编号、状态、时间。加列不是只改 XAML 就行要同步改三处数据模型加属性、XAML 加DataGridTextColumn、铺平逻辑不用动。比如加一个「状态」列// 模型里加属性 public string Status { get; set; } // 运行 / 停止 / 故障!-- XAML 里加列 -- DataGridTextColumn Header状态 Binding{Binding Status} Width100/逻辑说明DataGridTextColumn的Binding直接指向模型属性WPF 会自动取值。参数说明Width可以设固定值也可以设*做自适应。注意如果状态要用颜色区分就得换成DataGridTemplateColumn里面放TextBlock加Foreground绑定转换器这一步和缩进转换器是同一个套路。3.2 层级数据从哪来三种常见来源真实项目里层级数据一般有三个来源一是数据库的自关联表比如Id、ParentId、Name三列二是配置文件或 JSON嵌套结构天然就是树三是设备或接口返回的扁平列表需要自己按ParentId组装。第一种最常见我一般会先查全表再在内存里组装// 从扁平列表组装成树 var all LoadFromDatabase(); // 返回 ListTreeItem带 Id 和 ParentId var map all.ToDictionary(x x.Id); // 建索引 var roots new ListTreeItem(); foreach (var item in all) { if (item.ParentId 0) // 根节点 roots.Add(item); else map[item.ParentId].Children.Add(item); // 挂到父节点 }逻辑说明先建Id到节点的字典再遍历一次把每个节点挂到父节点下时间复杂度是 O(n)。参数说明ParentId 0是约定根节点的判断你的表里可能是null或者-1按实际改。注意组装完还要递归赋Level否则缩进全是 0。3.3 递归赋 Level别让缩进错位组装完树之后Level还是默认值必须递归刷一遍// 递归设置层级 private void SetLevel(TreeItem node, int level) { node.Level level; foreach (var child in node.Children) { SetLevel(child, level 1); } } // 调用 foreach (var root in roots) SetLevel(root, 0);逻辑说明从根节点开始每往下一层level加一保证Level和实际深度一致。参数说明根节点传 0如果你的缩进转换器步长是 20那第三层就是 40 像素。这一步和铺平是配套的顺序不能反——先赋Level再铺平否则铺平出来的Level是错的。3.4 数据绑定刷新ObservableCollection 的边界WPF 数据绑定的核心是「通知」。ObservableCollection在增删元素时会通知界面但元素内部的属性变化不会自动通知除非模型实现INotifyPropertyChanged。样例里如果只是静态展示不实现也能跑但如果你要动态改状态、改名称就必须补上public class TreeItem : INotifyPropertyChanged { private string _name; public string Name { get { return _name; } set { _name value; OnPropertyChanged(Name); } } public event PropertyChangedEventHandler PropertyChanged; protected void OnPropertyChanged(string prop) { PropertyChanged?.Invoke(this, new PropertyChangedEventArgs(prop)); } }逻辑说明OnPropertyChanged触发后绑定到Name的界面元素会刷新。参数说明Name必须和属性名完全一致写错字符串界面不会更新这是 WPF 数据绑定的经典坑。注意Level如果会变也要加通知否则缩进不会重算。4. 避坑与排查树状表格最容易翻车的五个地方4.1 界面只显示根节点子节点不见了现象运行后DataGrid里只有一行子节点完全看不到。原因直接把树对象绑给了ItemsSource没有铺平DataGrid不认识Children。解决按 2.5 的写法先递归铺平成List再绑给ItemsSource并确保Level已赋值。4.2 缩进全部一样树形效果消失现象所有节点左边距相同看起来就是普通表格。原因Level全是 0或者转换器没生效。解决检查SetLevel是否在铺平前调用检查 XAML 里Converter{StaticResource LevelToMargin}的资源名是否和声明一致大小写敏感。4.3 改了数据界面不刷新现象后台改了Name或Status界面纹丝不动。原因模型没实现INotifyPropertyChanged或者ObservableCollection被整体替换而不是增删元素。解决给模型加通知如果要整体替换把ItemsSource绑到一个INotifyPropertyChanged的FlatItems属性上替换后触发通知。4.4 展开折叠后顺序乱了现象点击折叠再展开节点顺序和层级对不上。原因铺平逻辑没有按展开状态过滤或者折叠时没重建列表。解决在Flatten里判断IsExpanded只铺开已展开的分支每次展开状态变化后重新调用Flatten并替换FlatItems。4.5 大数据量卡顿现象几千个节点时滚动明显掉帧。原因DataGrid默认没开虚拟化或者每次刷新都重建整个列表。解决确认DataGrid的EnableRowVirtualizationTrue铺平时用List而不是频繁操作ObservableCollection如果层级很深考虑只铺开可见分支而不是全量展开。5. 进阶技巧用样式和模板把树状表格做得更像样样例能跑通之后真正决定好不好用的是视觉细节。我一般会先给DataGrid加一套行样式把选中态、交替行、鼠标悬停区分开这样层级多的时候不容易看串行。下面这段是我常用的行样式骨架DataGrid.RowStyle Style TargetTypeDataGridRow Setter PropertyBackground ValueWhite/ Style.Triggers Trigger PropertyIsSelected ValueTrue Setter PropertyBackground Value#CCE8FF/ /Trigger Trigger PropertyAlternationIndex Value1 Setter PropertyBackground Value#F7F7F7/ /Trigger /Style.Triggers /Style /DataGrid.RowStyle逻辑说明IsSelected触发器改选中行背景AlternationIndex配合AlternationCount2做交替行。参数说明颜色值按你的界面风格改#CCE8FF是浅蓝#F7F7F7是浅灰。注意AlternationCount要设在DataGrid上不是行样式里。再进一步可以在名称列前面加一个展开/折叠的三角图标。做法是在DataTemplate里放一个ToggleButton绑到节点的IsExpanded再用Visibility控制有没有子节点时才显示。这样交互上就和TreeView一致了但列还是多列的。这个改动不大但体验提升明显尤其是节点多的时候。还有一个容易被忽略的点键盘导航。DataGrid默认支持上下键切换行但树状表格里用户往往希望左右键能折叠展开。可以在MainWindow.xaml.cs里监听PreviewKeyDown判断左右键后改当前节点的IsExpanded并重建列表。代码不长但能让熟手用户觉得「这东西是认真做的」。最后说一个我自己的习惯每次改完铺平逻辑我都会先拿一个三层、每层两三个节点的小树跑一遍确认缩进、顺序、展开都对再换成真实数据。因为真实数据往往有脏数据——ParentId指向不存在的节点、成环、根节点不唯一这些都会让递归爆栈或者死循环。从那以后我每次接层级数据都强制先做一遍「根节点唯一、无环、无孤儿」的校验再进铺平。希望帮到你。本文还有配套的精品资源点击获取