简介：一份面向WPF桌面应用开发者的多行表头实现示例，重点演示如何借助Telerik控件库中的DataGrid组件构建具备多级分类结构的表格界面，适用于报表、数据分析等需要展示复杂表头的桌面应用场景。资源包共包含53个文件，整体大小约3.34MB，内部整合了2个XAML界面布局文件、13个C#源码文件、8个DLL运行库以及项目配置文件等，可还原出一个完整且可运行的Visual Studio解决方案。示例代码通过Vehicle.cs数据模型与RadGridView绑定，详细展示了列组嵌套、自定义表头模板、分组视图等关键处理方式，有助于理解多行表头的设计思路，同时也可学习通过分组面板与行组配置实现多级表头的交互反馈。压缩包内同时保留了解决方案文件与项目配置，便于直接打开查看工程结构并基于现有代码进行二次开发。目前已有292人学习或下载，适合作为WPF高级界面开发的进阶参考资料。
1. 多行表头不是「两行文字」：Telerik RadGridView 的双层表头方案
很多 WPF 开发者第一次碰「多行表头」，第一反应是把表头文字换成「产品编码\n库存预警」这种换行文本，或者直接在 Header 模板里塞一个两行的 StackPanel。真正在企业报表场景里（比如库存看板把「产品信息」和「库存指标」分组显示，一组跨三列），这种做法出来的表头既不跨列，也无法随列拖拽联动。我拆这个「WPF 多行表头 Telerik 例子」时最深的感触是：多行表头本质是表头区域的树形结构，不是视觉上堆两行字。这篇笔记把 Telerik RadGridView 里用 ColumnGroup 实现双层表头的完整套路拆开讲透，包括参数怎么设、遇到什么情况必须换方案，以及五个真实踩坑点。适合正在做 WPF 后台管理系统、报表看板，又不想自己造轮子的从业者。
2. 为什么用 ColumnGroup 而不是堆两个 DataGrid：多行表头的选型逻辑
2.1 原生 DataGrid 的双层表头做法与边界
如果项目不允许引入第三方控件，原生 DataGrid 也有办法做出「看起来」像双层表头的结构。常见做法是禁用列头，自己画一整行 Grid 放在 DataGrid 上方，下面再放 DataGrid，二者靠 ScrollViewer 同步滚动。这种方案在简单的固定列宽场景下能跑，但一碰列宽拖拽、排序、筛选、横向滚动，上面的自定义表头行和下面的 DataGrid 列头就很容易错位。我试过用 ScrollChanged 事件去对齐，效果只能说是「能看不能摸」——横向滚动时总有 1-2 像素的滞后，数据行多了之后对齐问题直接变成用户可感知的抖动。
更麻烦的是排序与列宽联动。原生 DataGrid 允许用户拖拽改变列宽时，表头行的宽度不会自动跟随，需要监听 ColumnWidthChanged 之类的事件后再手动刷新。多个列头合并成跨列标题时，底层 DataGrid 没有「列组」的概念，只能在 HeaderTemplate 里用 Grid 把三个列头区域盖住，视觉上像是合并了，实际上三个列仍然是独立可排序的，表头点击区域也会误触发排序。
所以我的结论是：原生 DataGrid 适合表头结构简单的后台列表；一旦出现「二级表头」「列分组化显示」，原生方案的时间和维护成本会迅速超过直接引入一套成熟的控件方案。
2.2 Telerik ColumnGroup 的命中结构与渲染原理
Telerik RadGridView 里处理多行表头的核心是 ColumnGroup。它和普通列的 Header 有本质区别：ColumnGroup 声明在 RadGridView.ColumnGroups 集合里，不是一个独立的列，而是一个「容器」，通过嵌套的 Columns 把若干 GridViewDataColumn 包进来。顶层 ColumnGroup 的 Header 渲染在表头区的第一行，子列各自的 Header 渲染在第二行，从而形成真正的两行表头结构。
这个结构的两个关键约束，我在第一次做的时候完全没注意：第一，ColumnGroup 里的列必须是 AutoGenerateColumns=False 时手工声明的列，或者由代码加入的列；第二，ColumnGroup 内不能继续嵌套 ColumnGroup，至少在这个控件的默认渲染里，嵌套的 Group 不会稳定渲染出三层表头。也就是说，Telerik 的 ColumnGroup 对「两层」支持得很好，三层以上会力不从心。
XAML 层面的结构大致是这样：
<telerik:RadGridView x:Name="InventoryGrid" AutoGenerateColumns="False" ShowGroupPanel="False" CanUserReorderColumns="False"> <telerik:RadGridView.ColumnGroups> <telerik:ColumnGroup Header="产品信息"> <telerik:ColumnGroup.Columns> <telerik:GridViewDataColumn Header="产品编码" DataMemberBinding="{Binding ProductCode}" Width="110"/> <telerik:GridViewDataColumn Header="产品名称" DataMemberBinding="{Binding ProductName}" Width="160"/> </telerik:ColumnGroup.Columns> </telerik:ColumnGroup> <telerik:ColumnGroup Header="库存指标"> <telerik:ColumnGroup.Columns> <telerik:GridViewDataColumn Header="安全库存" DataMemberBinding="{Binding SafeStock}" Width="90"/> <telerik:GridViewDataColumn Header="在库数量" DataMemberBinding="{Binding StockQty}" Width="90"/> <telerik:GridViewDataColumn Header="预警阈值" DataMemberBinding="{Binding WarnThreshold}" Width="90"/> </telerik:ColumnGroup.Columns> </telerik:ColumnGroup> </telerik:RadGridView.ColumnGroups> </telerik:RadGridView>这里的逻辑分三层：RadGridView 声明列组集合；ColumnGroup 用 Header 表示第一层标题；ColumnGroup 内部的 Columns 集合声明哪些列归属于这个组。渲染时，第一行的「产品信息」会横跨它下面两列的总宽度，而「库存指标」横跨三列总宽度。第二行仍然是各列左侧对齐的独立表头。
关于参数，有几点值得说：CanUserReorderColumns="False" 是给组结构上保险，默认情况下用户拖拽列头会把 ColumnGroup 拆散，这一点后面第四章会展开；Width 设置为固定像素宽度对多行表头是友好的，因为组标题跨列宽度是按子列宽度之和计算的，「Auto」宽度在个别旧版本上会算错；ShowGroupPanel 关掉行分组面板，避免和表头分组视觉混淆。
2.3 什么时候该放弃 ColumnGroup 改用模板
ColumnGroup 不是万能的。我见过有人在三层的复杂报表里强行用 ColumnGroup，结果第二层和第三层的对齐靠 margin 硬凑，滚动后错位严重。判断是否该换方案的边界条件有三个：
第一个边界是「层级数大于 2」。ColumnGroup 在设计上就是一层组容器，三层表头需要组内嵌套组，而这个控件的行列布局计算并不保证嵌套深度下的宽度同步。
第二个边界是「列头和列体需要完全不同的视觉风格」，比如表头是深色渐变，数据行是斑马纹。ColumnGroup 的 Header 默认样式由控件主题控制，虽然可以用 ColumnGroup.HeaderTemplate 覆盖，但一旦覆盖，需要同时处理跨列宽度、悬停、按下状态，工作量比预期大。
第三个边界是「表头里不止文字，还要放筛选器控件」。ColumnGroup 的默认 Header 区域没有筛选器槽位，此时应在普通 GridViewDataColumn 的 HeaderCellStyle 里做文章，而不是强行套组。
如果踩中这三条中的任意一条，建议的方案是自绘表头：用一个独立的 ItemsControl 放在 RadGridView 上方，宽度和列宽保持绑定，或者干脆接受「单层表头 + 行内分组」的折中设计。选 ColumnGroup 还是自绘表头，本质是报表复杂度够不够高的一回事。
3. 把多行表头落地到库存看板：一个可抄的 WPF DataGrid 简单 Demo
3.1 工程引用与命名空间准备
先说要跑起来需要哪些引用。Telerik 这套 WPF 控件的关键程序集有三个常用项：Telerik.Windows.Controls.dll、Telerik.Windows.Controls.GridView.dll、Telerik.Windows.Data.dll。项目中 DataGrid 相关的基础类型在 Telerik.Windows.Controls.GridView 命名空间中，所以 XAML 顶部要加上如下引用：
xmlns:telerik="http://schemas.telerik.com/2008/xaml/presentation" xmlns:telerikGridView="clr-namespace:Telerik.Windows.Controls;assembly=Telerik.Windows.Controls.GridView"第一行声明的是 Telerik 的 XAML 命名空间映射，RadGridView、GridViewDataColumn 这些都能直接通过 telerik 前缀使用。第二行把 GridView 程序集映射到 telerikGridView 前缀，用于引用 ColumnGroup 等类型。如果不加第二行，某些版本里 ColumnGroup 不会被 XAML 智能感知识别出来，编译期报「找不到 ColumnGroup」的错误。
C# 侧还需要 using 语句。一般在 MainWindow.xaml.cs 顶部加：
using Telerik.Windows.Controls; using Telerik.Windows.Controls.GridView;这里要留意：Telerik.Windows.Controls 是基础控件的命名空间，GridView 相关代码（比如 GridViewDataColumn、ColumnGroup）在 GridView 程序集里。有人只引用了第一行，代码里 new GridViewDataColumn 时就报找不到类型，实际上就是缺了第二个 using。
3.2 XAML 里搭建两层表头结构
这次我做一个库存看板 Demo：上面一层分两组，左边「产品信息」跨两列，右边「库存指标」跨三列，数据源用一个 ObservableCollection。XAML 写好的核心结构如下。
<telerik:RadGridView x:Name="InventoryGrid" AutoGenerateColumns="False" CanUserReorderColumns="False" CanUserResizeColumns="True" ShowGroupPanel="False" RowHeight="32" AlternatingRowBackground="#F7F8FA"> <telerik:RadGridView.ColumnGroups> <telerik:ColumnGroup Header="产品信息"> <telerik:ColumnGroup.Columns> <telerik:GridViewDataColumn Header="产品编码" DataMemberBinding="{Binding ProductCode}" Width="110" HeaderTextAlignment="Left"/> <telerik:GridViewDataColumn Header="产品名称" DataMemberBinding="{Binding ProductName}" Width="180" HeaderTextAlignment="Left"/> </telerik:ColumnGroup.Columns> </telerik:ColumnGroup> <telerik:ColumnGroup Header="库存指标"> <telerik:ColumnGroup.Columns> <telerik:GridViewDataColumn Header="安全库存" DataMemberBinding="{Binding SafeStock}" Width="100" DataFormatString="{}{0:N0}"/> <telerik:GridViewDataColumn Header="在库数量" DataMemberBinding="{Binding StockQty}" Width="100" DataFormatString="{}{0:N0}"/> <telerik:GridViewDataColumn Header="预警阈值" DataMemberBinding="{Binding WarnThreshold}" Width="100" DataFormatString="{}{0:N0}"/> </telerik:ColumnGroup.Columns> </telerik:ColumnGroup> </telerik:RadGridView.ColumnGroups> </telerik:RadGridView>这段 XAML 里值得展开的参数有四个。ColumnGroup 的 Header 决定第一行显示的组标题文本，如果希望文本居中或加粗，可以再给 ColumnGroup 配 HeaderTemplate，专门放一个带 FontWeight="Bold" 的 TextBlock；GridViewDataColumn 的 Header 是第二行的列标题；DataMemberBinding 负责把列的显示值和数据源的属性绑定起来；HeaderTextAlignment 控制列头文字的对齐方向，表格类界面里建议左侧对齐，视觉上更容易与数据行的左对齐内容保持一致。
如果编译时发现整个 RadGridView 区域是空白且不报错，优先检查是不是 DataMemberBinding 拼错或者属性名和数据源不一致。WPF 的绑定失败默认只往输出窗口丢一条 Binding 错误，界面完全看不出来，这是我早期排查浪费过最多时间的点。
3.3 C# 动态构建列组与数据绑定
实际的企业项目里，表头列往往来自后台配置，XAML 写死列不够灵活。所以这里给出等价的 C# 动态构建方式。主窗口加载时调用 InitGrid()：
private void InitGrid() { // 先准备列组：第一组为产品信息 var groupProduct = new ColumnGroup { Header = "产品信息" }; groupProduct.Columns.Add(new GridViewDataColumn { Header = "产品编码", DataMemberBinding = new Binding("ProductCode"), Width = 110 }); groupProduct.Columns.Add(new GridViewDataColumn { Header = "产品名称", DataMemberBinding = new Binding("ProductName"), Width = 180 }); // 第二组为库存指标 var groupStock = new ColumnGroup { Header = "库存指标" }; groupStock.Columns.Add(new GridViewDataColumn { Header = "安全库存", DataMemberBinding = new Binding("SafeStock"), Width = 100 }); groupStock.Columns.Add(new GridViewDataColumn { Header = "在库数量", DataMemberBinding = new Binding("StockQty"), Width = 100 }); groupStock.Columns.Add(new GridViewDataColumn { Header = "预警阈值", DataMemberBinding = new Binding("WarnThreshold"), Width = 100 }); // 全部列组加入 GridView InventoryGrid.ColumnGroups.Add(groupProduct); InventoryGrid.ColumnGroups.Add(groupStock); // 绑定数据源 InventoryGrid.ItemsSource = new ObservableCollection<InventoryItem>(GetDemoData()); }这段代码的核心顺序是：先构造 ColumnGroup，再往它的 Columns 集合里加 GridViewDataColumn，最后把 ColumnGroup 加进 RadGridView.ColumnGroups。顺序反了，比如先把列加到 RadGridView.Columns 再往里塞 ColumnGroup，会出现「列在界面上渲染了，但组标题没有包住它们」的问题。
参数层面，GridViewDataColumn 的 Width 设置的是像素宽度；DataMemberBinding 必须是 Binding 对象，不能直接传字符串；ColumnGroup 的 Header 设文本后，默认样式由当前主题管理。这里我把两个组高度相同的场景放在一起，ColumnGroup 之间在表头区域是水平分布的，宽度由子列之和决定。
3.4 让表头更像「看板」：合并、对齐与列宽策略
多行表头真正出效果，往往依赖额外的对齐与样式细节。第一行组标题默认是水平居中，第二行列标题默认也居中，但数据行的数字列右对齐、文本列左对齐，于是表头与数据看起来「对不齐」。我的做法是给 ColumnGroup 配 HeaderTemplate，让组标题左对齐并加粗。模板长这样：
<telerik:ColumnGroup.HeaderTemplate> <DataTemplate> <TextBlock Text="{Binding}" FontWeight="Bold" VerticalAlignment="Center" HorizontalAlignment="Left" Margin="6,0,0,0"/> </DataTemplate> </telerik:ColumnGroup.HeaderTemplate>通过给 ColumnGroup 设置 HeaderTemplate，组标题的文本对齐与字号就能脱离控件默认主题，自行控制。这里的 Binding 取到的是 ColumnGroup.Header 那串文本。对第二层的列标题，可以用 GridViewDataColumn.HeaderCellStyle 调整 Foreground 与背景色。
还有一个很容易被忽略的参数是表格整体行高。设了 RowHeight="32" 之后，第二行列头会显得有点空，给 HeaderTemplate 里的 TextBlock 加上 VerticalAlignment="Center" 能保证相同效果。列宽策略上，我建议把前两列固定宽度，后三列同样固定，整张表硬限制在总宽度内。多行表头场景下使用星号比例宽度（比如 "*"）不太稳妥，因为 ColumnGroup 跨列宽度的计算是先算子列宽度再加和，星号宽度在这种结构里偶尔会被算成剩余空间的一半，翻车概率很高。
动态加列时还有一个隐藏规则：列组内的列会参与表头的「合并绘制」，所以不能让某个 ColumnGroup 里只有一列，否则组标题和一个普通列的 Header 渲染结果几乎一样，跨列效果消失，用户看不出这是二级表头。
4. 多行表头排坑记录：五个让你翻车的细节
4.1 拖拽列导致组内列散架
现象：用户用鼠标拖动第二行的某个列标题，移了一下位置，整个 ColumnGroup 的组标题还在，但列的顺序乱了，组标题覆盖的列范围不再正确。
原因：RadGridView 默认允许列头拖拽重排。ColumnGroup 结构下，拖拽单列并不会自动把整个组里的列一起移动，组与列的对应关系被破坏后，表头渲染就变成「组标题按原来的跨列位置显示，列已经跑到别处去」。
解决：在 RadGridView 上设 CanUserReorderColumns="False"，禁止用户重排列。如果业务上确实需要重排，就不要用 ColumnGroup，改成自绘表头方案。这是最省事的做法，也是官方示例里最常见的选择。
4.2 表头文字垂直居中像玄学
现象：组标题在有的机器上显示顶部对齐，在另一台机器上又变成了垂直居中，看着很随机。
原因：ColumnGroup 的默认 Header 样式在不同版本里定义不同。老版本默认模板里根节点是 StackPanel，VerticalAlignment 的行为由内容高度撑开；新版本换成了 Grid 之后，没显式设置 VerticalAlignment 时默认是 Stretch，TextBlock 只占内容高度，于是视觉上就顶到上面。
解决：不要依赖控件默认模板的对齐行为，显式在 HeaderTemplate 里给 TextBlock 设置 VerticalAlignment="Center"，并把模板根节点的 VerticalAlignment 也设置成 Center。这样无论控件版本怎么变，表头对齐都是可控的。
4.3 冻结列后组标题滚出视野
现象：给 RadGridView 设置了 FrozenColumnCount="2"，表头第一行的组标题也跟着冻结了，横向滚动后，后面的组标题与列错位。
原因：冻结列机制作用于 GridView 的列区域，ColumnGroup 是在表头区域额外渲染的，冻结列只影响列滚动，不影响组标题的滚动逻辑。当冻结列与非冻结列交错分布在组内时，组标题的跨列宽度没有跟着滚动区域重算。
解决：约束 ColumnGroup 的子列要么全部放在冻结区，要么全部放在非冻结区，禁止一个组「一半冻结一半不冻结」。另外，FrozenColumnCount 的值不能落在某个 ColumnGroup 组的中间列上。
4.4 运行时加列，组结构没跟着变
现象：程序里执行 InventoryGrid.Columns.Add(new GridViewDataColumn(...)) 后，新列正常显示了，但没有出现任何 ColumnGroup 里，它是单独的一层表头。
原因：直接把列加到了 RadGridView.Columns 集合。ColumnGroup 容器并不会监视 Columns 集合的变化，所以新列不会自动归属到某个组。
解决：动态加列时，用 groupProduct.Columns.Add(...) 来加，而不是 InventoryGrid.Columns.Add(...)。ColumnGroup 内部的 Columns 集合变更会触发表头重算，才能把新列包进组里去。
4.5 导出 Excel 只导出单行表头
现象：用 Telerik 的导出功能导出到 Excel，数据都在，但第一行的组标题丢了，只剩每列的标题。
原因：导出引擎默认按行遍历列头，识别的是 GridViewDataColumn.Header，而 ColumnGroup 的 Header 不是一个列，因此没有进入导出映射。
解决：项目里如果必须导出 Excel，就不要依赖 ColumnGroup 的组标题，导出时单独处理：先用 NPOI 或者 OpenXML 在导出数据上方插入一行单元格，跨列写入组标题。或者直接用 Telerik 的 RadSpreadsheet 导出组件，让它读到的表头区域里包含合并单元格。
5. 把双层表头做成可配置组件：动态表头与验证思路
5.1 从 Excel 草图到动态表头
做多行表头最容易犯的错是不画草图直接写代码。我现在的习惯是：先在 Excel 里把表头画出来，一行的列合并到什么位置、跨几列，全部标清楚，再转成配置数据。比如一个看板报表配置可以这样定义：
public class ColumnGroupConfig { public string GroupHeader { get; set; } public List<ColumnConfig> Columns { get; set; } } public class ColumnConfig { public string Header { get; set; } public string BindingPath { get; set; } public double Width { get; set; } }加载配置时，代码循环创建 ColumnGroup 与 GridViewDataColumn。这套思路是把表头结构当作「数据」而不是「视图」，新增一张报表只需要改配置，不需要动 XAML 和 C#。表头里出现哪些组，完全看配置里有多少个 ColumnGroupConfig。
5.2 渲染验证：用视觉树确认组结构
动态生成后，建议做一个验证动作：在 GridView 的 Loaded 事件里遍历视觉树，打印出表头区域的元素层级，确认 ColumnGroup 渲染成了两层。我一般会写一个这样的辅助方法：
private void DumpHeaderVisualTree(DependencyObject root, int depth) { for (int i = 0; i < VisualTreeHelper.GetChildrenCount(root); i++) { var child = VisualTreeHelper.GetChild(root, i); Debug.WriteLine($"{new string(' ', depth * 2)}{child.GetType().Name}"); DumpHeaderVisualTree(child, depth + 1); } }调用时传入 RadGridView 的表头部分即可看到 ColumnGroup 节点、HeaderCell 的层级顺序。如果输出里没有预期节点，或者层级只有一层，说明列组没有被正确渲染，问题大概率出在前面说的 Columns 集合归属上。
5.3 一个收尾习惯
最早我在某高校的数据管理项目里第一次用 ColumnGroup，当时没做任何测试，交付后表头错位的问题被用户一句「这表头怎么乱糟糟的」打了回来。从那以后，我每次搭多行表头都强制走一遍这个流程：先画 Excel 草图，再确认层级不超过两层，XAML 里锁死拖拽，动态列只往组内加，最后导出一版 Excel 验证表头。这套流程下来，多行表头基本不会再翻车。希望帮到你。
本文还有配套的精品资源，点击获取
