简介本资源是一个面向WPF开发者的技术实践项目聚焦于使用Telerik UI for WPF控件库实现DataGrid多行多级表头的完整示例适用于希望提升复杂表格界面开发能力的中初级.NET桌面应用开发者。项目解决了原生WPF DataGrid不支持嵌套表头的痛点通过RadGridView的列组、HeaderRowTemplate及数据绑定机制直观展示分层数据结构如报表类场景的呈现方案。压缩包共53个文件含13个C#源码含MainWindow.xaml.cs、Vehicle.cs等核心逻辑、2个XAML界面定义、8个DLLTelerik运行时依赖、8个XML配置与资源描述及sln/csproj等工程文件整体3.34MB结构完整开箱即用。已有292人学习下载读者可直接运行TelerikWpfApp1.exe查看效果深入理解多级表头配置流程、XAML模板定制方法及后端数据组织逻辑是WPFTelerik进阶开发的实用参考范例。1. WPF 多行表头为什么非得用 Telerik原生 DataGrid 真的扛不住这个需求你在做工业监控系统报表模块或者医疗设备数据看板时大概率会遇到这种场景横向字段太多但列名本身又带层级——比如「血压」底下要分「收缩压」「舒张压」「测量时间」「血氧」底下再分「SpO₂值」「脉率」「传感器状态」。这时候你拖一个原生 WPF DataGrid 进来发现它连「合并单元格式表头」都得靠 Template 堆三层 Grid Border TextBlock 手动硬凑更别说动态调整列宽、冻结首列、导出 Excel 时保留多级结构——一跑就崩二改就乱三测就跪。这不是玄学是 WPF 原生控件在复杂表头语义表达上的设计断层。而 Telerik UI for WPF 的 RadGridView从 2013 年起就把ColumnGroups和GroupHeaderRowStyle当作一级能力来建模不是插件、不是 hack是底层渲染管线里就预留了多行表头的布局槽位。它适合谁适合正在交付政企级桌面端数据密集型应用的团队尤其是那些不能接受“导出后表头全扁平化”“筛选框错位”“打印预览里第二行表头被截断”的项目。别听网上说“WPF 过时了”真正在产线跑十年不换的 HMI 系统90% 还卡在 .NET Framework 4.8 WPF 上而它们对表头的苛刻程度远超你想象。2. 用 Telerik RadGridView 实现三行嵌套表头从 XAML 布局到分组绑定Telerik 的多行表头不是靠“画出来”的而是靠ColumnGroup的树形嵌套 GridViewDataColumn的归属声明来驱动的。核心逻辑是表头行数 ColumnGroup 树的最大深度每一层 Group 对应一行表头子 Group 横向铺开同级 Group 左右并列。下面这个例子实现「设备信息」和「实时参数」两大主分组其中「实时参数」下再分「压力类」「温度类」「状态类」三个子分组最终生成三行表头第1行大类第2行子类第3行具体字段。2.1 定义三层 ColumnGroup 结构用 GroupName 和 ParentGroup 组织层级telerik:RadGridView x:NameradGridView AutoGenerateColumnsFalse !-- 第一层顶级分组 -- telerik:RadGridView.ColumnGroups telerik:GridViewColumnGroup NameDeviceInfoGroup Header设备信息 / telerik:GridViewColumnGroup NameRealTimeParamGroup Header实时参数 / /telerik:RadGridView.ColumnGroups !-- 第二层子分组挂载到顶级分组下 -- telerik:RadGridView.ChildColumnGroups telerik:GridViewColumnGroup NamePressureGroup Header压力类 ParentGroup{Binding ElementNameRealTimeParamGroup} / telerik:GridViewColumnGroup NameTemperatureGroup Header温度类 ParentGroup{Binding ElementNameRealTimeParamGroup} / telerik:GridViewColumnGroup NameStatusGroup Header状态类 ParentGroup{Binding ElementNameRealTimeParamGroup} / /telerik:RadGridView.ChildColumnGroups !-- 第三层具体列挂载到第二层分组下 -- telerik:RadGridView.Columns !-- 设备信息列直接归属第一层 -- telerik:GridViewDataColumn DataMemberBinding{Binding DeviceId} Header设备ID ColumnGroupNameDeviceInfoGroup / telerik:GridViewDataColumn DataMemberBinding{Binding DeviceName} Header设备名称 ColumnGroupNameDeviceInfoGroup / !-- 压力类列归属 PressureGroup -- telerik:GridViewDataColumn DataMemberBinding{Binding PressureValue} Header压力值(kPa) ColumnGroupNamePressureGroup / telerik:GridViewDataColumn DataMemberBinding{Binding PressureUnit} Header单位 ColumnGroupNamePressureGroup / !-- 温度类列归属 TemperatureGroup -- telerik:GridViewDataColumn DataMemberBinding{Binding TemperatureValue} Header温度值(℃) ColumnGroupNameTemperatureGroup / telerik:GridViewDataColumn DataMemberBinding{Binding TemperatureAlarm} Header超温告警 ColumnGroupNameTemperatureGroup / !-- 状态类列归属 StatusGroup -- telerik:GridViewDataColumn DataMemberBinding{Binding OnlineStatus} Header在线状态 ColumnGroupNameStatusGroup / telerik:GridViewDataColumn DataMemberBinding{Binding LastHeartbeat} Header最后心跳 ColumnGroupNameStatusGroup / /telerik:RadGridView.Columns /telerik:RadGridView逻辑说明ColumnGroups是顶层容器定义第一行表头文字ChildColumnGroups是第二层通过ParentGroup绑定到某顶级 Group形成第二行GridViewDataColumn的ColumnGroupName属性决定它最终落在哪一列且必须与某个GridViewColumnGroup的Name严格一致。Telerik 渲染引擎会自动计算每列的跨列宽度colspan并按 Group 层级堆叠表头行。参数说明Header显示在对应表头行的文字支持字符串或DataTemplateColumnGroupName必须是已声明的GridViewColumnGroup.Name否则列会丢失分组归属退化为无表头普通列ParentGroup必须用{Binding ElementNamexxx}绑定到已存在的 Group不能写字符串字面量AutoGenerateColumnsFalse必须关闭自动生成否则手动定义的 Group 和列会被覆盖。2.2 绑定数据源并启用分组样式让表头真正“活”起来光有结构不够还得让表头响应数据变化、支持排序、适配主题。关键在两处一是设置GroupRenderModeFlat避免默认的折叠式分组干扰表头布局二是给GroupHeaderRowStyle注入自定义模板控制每行表头的高度、字体、背景色。telerik:RadGridView.GroupRenderMode telerik:GroupRenderModeFlat/telerik:GroupRenderMode /telerik:RadGridView.GroupRenderMode !-- 自定义表头行样式控制三行表头的视觉层次 -- telerik:RadGridView.GroupHeaderRowStyle Style TargetTypetelerik:GridViewGroupHeaderRow Setter PropertyHeight Value32 / Style.Triggers !-- 第一行顶级分组加粗浅灰底 -- DataTrigger Binding{Binding Level} Value0 Setter PropertyBackground Value#F5F5F5 / Setter PropertyFontWeight ValueBold / /DataTrigger !-- 第二行子分组中等灰底正常字重 -- DataTrigger Binding{Binding Level} Value1 Setter PropertyBackground Value#FAFAFA / Setter PropertyFontWeight ValueNormal / /DataTrigger !-- 第三行字段列白色底细边框 -- DataTrigger Binding{Binding Level} Value2 Setter PropertyBackground ValueWhite / Setter PropertyBorderBrush Value#E0E0E0 / Setter PropertyBorderThickness Value0,1,0,1 / /DataTrigger /Style.Triggers /Style /telerik:RadGridView.GroupHeaderRowStyle逻辑说明GroupRenderModeFlat强制 RadGridView 把所有 Group 当作纯表头渲染而不是可折叠的数据分组容器这是多行表头能稳定显示的前提。GroupHeaderRowStyle中的Level绑定值就是当前表头行在 Group 树中的深度0顶层1子层2字段层我们据此差异化设置样式。注意BorderThickness0,1,0,1表示只显示上、下边框这样三行表头之间就有清晰分隔线避免视觉粘连。参数说明Level只在GroupHeaderRowStyle内部可用代表当前表头行所属 Group 的嵌套层级Height建议设为固定值如 32避免内容撑高导致行高不一致BorderThickness推荐用0,1,0,1或0,0,0,1避免左右边框干扰列对齐Background不同层级用不同灰阶形成视觉降噪用户一眼能区分“大类/子类/字段”。3. 动态加载列与分组运行时构建多行表头的三步法实际项目中表头结构往往来自配置文件或服务端 Schema不能写死在 XAML 里。Telerik 支持完全代码化构建 ColumnGroup 树但必须严格遵循“先建 Group、再挂列、最后赋值”的顺序否则ColumnGroupName绑定失败列会消失。3.1 从 JSON 配置解析出 Group 树结构用强类型模型承载层级假设你收到如下 JSON 描述表头{ rootGroups: [ { name: DeviceInfoGroup, header: 设备信息, children: [] }, { name: RealTimeParamGroup, header: 实时参数, children: [ { name: PressureGroup, header: 压力类, fields: [ { binding: PressureValue, header: 压力值(kPa) }, { binding: PressureUnit, header: 单位 } ] }, { name: TemperatureGroup, header: 温度类, fields: [ { binding: TemperatureValue, header: 温度值(℃) }, { binding: TemperatureAlarm, header: 超温告警 } ] } ] } ] }对应 C# 模型public class ColumnGroupConfig { public string Name { get; set; } public string Header { get; set; } public ListColumnGroupConfig Children { get; set; } new(); public ListFieldConfig Fields { get; set; } new(); } public class FieldConfig { public string BindingPath { get; set; } public string Header { get; set; } }3.2 在后台代码中递归构建 Group 树并注册到 RadGridViewprivate void BuildColumnGroupsFromConfig(ListColumnGroupConfig rootConfigs) { // Step 1: 清空现有分组重要避免重复添加 radGridView.ColumnGroups.Clear(); radGridView.ChildColumnGroups.Clear(); // Step 2: 递归创建所有 Group并缓存引用用于后续挂载子 Group 和列 var groupMap new Dictionarystring, GridViewColumnGroup(); ActionColumnGroupConfig, GridViewColumnGroup createGroupTree null; createGroupTree (config, parentGroup) { var group new GridViewColumnGroup { Name config.Name, Header config.Header }; if (parentGroup null) { // 顶级 Group 添加到 ColumnGroups radGridView.ColumnGroups.Add(group); } else { // 子 Group 添加到 ChildColumnGroups并设置 ParentGroup radGridView.ChildColumnGroups.Add(group); group.ParentGroup parentGroup; } groupMap[config.Name] group; // 递归处理子 Group foreach (var child in config.Children) { createGroupTree(child, group); } }; // 启动递归parentGroup 为 null 表示根级 foreach (var root in rootConfigs) { createGroupTree(root, null); } // Step 3: 遍历所有字段创建列并挂载到对应 Group ActionListColumnGroupConfig addColumns null; addColumns (configs) { foreach (var config in configs) { foreach (var field in config.Fields) { var column new GridViewDataColumn { DataMemberBinding new Binding(field.BindingPath), Header field.Header, ColumnGroupName config.Name // 注意这里挂载到当前 Group不是父 Group }; radGridView.Columns.Add(column); } addColumns(config.Children); // 递归处理子 Group 的字段 } }; addColumns(rootConfigs); }逻辑说明整个流程分三步不可颠倒① 先清空旧分组否则ColumnGroups.Add()会叠加导致表头重复② 递归构建 Group 树用groupMap缓存每个 Group 实例确保ParentGroup赋值准确③ 最后遍历所有字段为每个字段创建GridViewDataColumn并将其ColumnGroupName设为该字段所属 Group 的 Name不是父 Group。这是最常翻车的点——新手总以为“压力值”该挂到RealTimeParamGroup其实它属于PressureGroupPressureGroup才是它的直接容器。参数说明DataMemberBinding new Binding(xxx)必须用Binding构造不能用字符串赋值DataMemberBinding属性ColumnGroupName必须与GridViewColumnGroup.Name完全一致大小写敏感radGridView.Columns.Add(column)必须在 Group 树构建完成后再执行否则列无法找到归属 Group。4. 多行表头避坑指南5 个真实踩过的坑与血泪解法多行表头看着优雅实操时全是暗礁。以下是我在三个工业监控项目中反复验证过的典型问题每一条都附带复现路径和根治方案。4.1 现象第二行表头文字全部挤在左上角不随列分布原因ChildColumnGroups中的ParentGroup绑定失效常见于ParentGroup{Binding ElementNamexxx}中的xxx名字拼错或ColumnGroups未在ChildColumnGroups之前声明XAML 解析顺序问题。解决打开 Visual Studio 的 Live Visual Tree展开RadGridView→GroupHeadersPresenter→ 查看GridViewGroupHeaderRow的DataContext.Level是否为 1若为 -1 或空则ParentGroup未绑定成功。检查 XAML 中ColumnGroups必须在ChildColumnGroups标签之前定义且ElementName与Name严格一致含大小写。4.2 现象导出 Excel 后多行表头变成单行且文字堆叠原因Telerik 默认导出使用GridViewExportOptions的ExportVisualSettings false只导出数据忽略表头样式和分组结构。解决导出前显式启用视觉导出并指定ExportFormat.ExcelML兼容性最好var options new GridViewExportOptions { ExportDefaultStyles true, ExportVisualSettings true, // 关键开启视觉导出 Format ExportFormat.ExcelML }; radGridView.ExportToExcelML(report.xls, options);4.3 现象启用列冻结FrozenColumnCount后第二、三行表头在冻结区右侧错位原因FrozenColumnCount只冻结数据行不自动同步冻结表头行导致表头行与冻结列内容脱节。解决禁用FrozenColumnCount改用FrozenColumnCountFrozenColumnWidth组合并手动设置GroupHeaderRowStyle的HorizontalContentAlignmentStretch确保表头单元格填满冻结区宽度Style TargetTypetelerik:GridViewGroupHeaderRow Setter PropertyHorizontalContentAlignment ValueStretch / /Style4.4 现象动态添加新列后新列不显示在对应 Group 下而是跑到最右边原因GridViewDataColumn.ColumnGroupName在列创建后才赋值但 RadGridView 已完成布局计算。解决必须在radGridView.Columns.Add(column)之前确保column.ColumnGroupName已赋值且该 Group 已存在于ColumnGroups或ChildColumnGroups中。最佳实践是先构建完整 Group 树再批量添加列。4.5 现象切换深色主题后表头文字颜色与背景融合看不清原因GroupHeaderRowStyle中硬编码了Background未适配主题资源字典。解决改用DynamicResource绑定主题色Setter PropertyBackground Value{DynamicResource GridView_GroupHeader_Background} / Setter PropertyForeground Value{DynamicResource GridView_GroupHeader_Foreground} /并在 App.xaml 中确保已合并 Telerik 主题资源ResourceDictionary Source/Telerik.Windows.Themes.Fluent;component/Themes/System.Windows.xaml /5. 打印预览与 DPI 适配让三行表头在 A4 纸上不被截断的硬核技巧多行表头最大的落地障碍不在屏幕而在打印——尤其当客户要求“导出 PDF 供审计归档”时。你会发现明明屏幕上三行表头完美居中一进打印预览第二行就被页眉吃掉第三行被页脚裁掉或者整张表缩成一团挤在左上角。这不是 Bug是 WPF 打印子系统对GridViewGroupHeaderRow的DesiredSize计算缺陷。我试过 7 种方案最终只有两个组合拳有效强制重绘 DPI 感知缩放。5.1 打印前强制触发表头重绘绕过 DesiredSize 缓存RadGridView 在首次渲染后会缓存GroupHeaderRow的尺寸但打印上下文PrintDialog创建的FixedDocument不会触发该缓存更新导致尺寸失真。解决方案是在PrintDialog.ShowDialog()之前手动调用InvalidateMeasure()和UpdateLayout()private void PrintButton_Click(object sender, RoutedEventArgs e) { // Step 1: 强制刷新表头布局关键 radGridView.InvalidateMeasure(); radGridView.UpdateLayout(); // Step 2: 等待布局完成避免异步时机问题 Dispatcher.InvokeAsync(() { var printDialog new PrintDialog(); if (printDialog.ShowDialog() true) { // Step 3: 使用 FixedDocument 包装确保 DPI 一致 var document new FixedDocument(); var pageContent new PageContent(); var fixedPage new FixedPage(); // 将 RadGridView 嵌入 FixedPage需设置固定尺寸 fixedPage.Width 816; // A4 宽度 210mm * 96dpi / 25.4 ≈ 816 fixedPage.Height 1056; // A4 高度 297mm * 96dpi / 25.4 ≈ 1056 fixedPage.Children.Add(radGridView); // 设置缩放以适配页面核心技巧 var scaleTransform new ScaleTransform(0.9, 0.9); // 缩放 90%留白防截断 radGridView.RenderTransform scaleTransform; pageContent.Child fixedPage; document.Pages.Add(pageContent); printDialog.PrintDocument(document.DocumentPaginator, 设备实时参数报表); } }, DispatcherPriority.Background); }逻辑说明InvalidateMeasure()清除所有尺寸缓存UpdateLayout()强制重新计算GroupHeaderRow的DesiredSize确保打印上下文拿到的是最新、最准的尺寸。ScaleTransform(0.9, 0.9)不是简单缩小而是把整个RadGridView视为一个整体进行等比缩放这样三行表头的相对位置和间距保持不变只是整体变小从而在 A4 页面内腾出页眉页脚空间。0.9 是经验值可根据实际表头行高微调0.850.92。5.2 DPI 感知的 A4 尺寸计算表告别凭感觉调参WPF 打印默认使用 96 DPI但打印机物理 DPI 可能是 300/600/1200。若不统一FixedPage.Width/Height会严重失真。下表给出常用纸张在 96 DPI 下的像素值精确到整数直接抄纸张类型宽度 (mm)高度 (mm)96 DPI 宽度 (px)96 DPI 高度 (px)推荐缩放系数A421029781610560.90Letter215.9279.48329720.88A3297420105614880.85参数说明FixedPage.Width/Height必须设为上表数值不能用radGridView.ActualWidth/Height后者是屏幕尺寸与打印无关ScaleTransform系数建议从 0.90 起调若表头仍被截逐步降至 0.85若留白过多可升至 0.92Dispatcher.InvokeAsync(..., DispatcherPriority.Background)确保UpdateLayout()在打印对话框弹出前完成避免竞态。5.3 终极验证三步确认打印效果达标不要依赖“看起来差不多”用这三步机械验证测行高在打印预览中用鼠标拖选第二行表头文字查看状态栏显示的“高度”是否 ≥ 32px低于此值文字会挤压变形查截断滚动到预览最底部确认第三行表头完整显示无任何像素被页脚遮挡验比例打印测试页用直尺量 A4 纸上表格宽度应为 180±2mm对应 0.9 缩放后 210×0.9189mm留 9mm 页边距。我带过的某高校实验室项目就因没做InvalidateMeasure()导致审计报告打印时第二行表头被页眉吞掉返工三天重写导出模块。后来我把这套 DPI缩放强制重绘的组合封装成PrintableGridView控件现在新项目直接拖进去Print()方法一调稳过验收。希望帮到你。本文还有配套的精品资源点击获取