简介本资源是一个面向WPF开发者的技术实践项目聚焦于使用Telerik UI for WPF控件库实现DataGrid多行表头这一典型界面需求适用于中初级WPF开发人员学习高级表格布局与数据绑定技巧。资源包共53个文件包含13个C#逻辑文件、2个XAML界面定义、8个DLL依赖库、8个XML配置与资源文件以及sln/csproj工程文件等完整呈现一个可直接运行的TelerikWpfApp1示例工程压缩包大小为3.34MB。目前已有292人学习下载反映出该场景在实际报表类应用开发中的高频需求。读者可直接导入VS运行调试深入理解RadGridView中HeaderRowTemplate配置、嵌套列组定义、HierarchicalCollectionView数据分组绑定等核心实现并通过源码结构如Vehicle.cs数据模型、MainWindow.xaml视图、App.xaml资源字典掌握Telerik DataGrid多级表头的工程化组织方式。1. WPF 多行表头不是“加个换行符”就能搞定Telerik RadGridView 实现复杂表头合并的真实路径你试过在 WPF DataGrid 里做「销售部2024 Q1」这种两行嵌套表头吗别急着改HeaderTemplate——原生 DataGrid 的列头渲染是单层扁平结构强行塞LineBreak只会让文字挤成一团、对齐错乱、导出 Excel 时彻底崩坏。这个 Telerik RadGridView 多行表头 Demo 就是专治这类“伪多行”玄学的实战样本它用GridViewColumnGroupColumnGroups机制在不碰任何自定义模板的前提下把物理列按逻辑组折叠让「区域」「城市」「销售额万元」「同比%」四列自动归入「华东区2024 Q1」和「华北区2024 Q1」两个顶层分组且支持分组内列宽独立拖拽、分组头冻结、导出时保留层级结构。适合正在用 Telerik 做企业级报表系统、又卡在表头语义化表达上的 WPF 开发者——不是教你怎么写 XAML而是告诉你为什么必须用ColumnGroups而不是HeaderTemplate以及 GroupHeader 模板里那行VerticalContentAlignmentCenter不加就会导致文字悬浮半空的血泪经验。2. 为什么非得用 ColumnGroupsRadGridView 表头分层的底层逻辑与选型依据2.1 原生 DataGrid 的表头模型缺陷单层 Header 属性无法承载层级语义WPF 原生DataGrid的每一列只暴露一个Header属性类型为object。常见做法是传入TextBlock并设置TextWrappingWrap看似能换行但本质仍是单个 UIElement 渲染。问题在于布局失控DataGrid内部用Grid布局表头行所有列头共享同一行高无法为不同分组设置独立高度交互断裂点击分组头无法触发分组折叠/展开原生无此概念也无法响应分组级右键菜单导出失效DataGrid导出到 Excel 时仅读取Header.ToString()换行符\n被转义为普通字符Excel 单元格内不换行。提示有人尝试用HeaderTemplate套StackPanel堆叠两个TextBlock这会导致列头宽度计算异常——StackPanel不参与 Measure 过程实际宽度由最宽子元素决定拖拽列宽时会突然跳变。2.2 Telerik RadGridView 的 ColumnGroups 架构物理列与逻辑组的解耦设计RadGridView 的解决方案是引入ColumnGroups集合将表头划分为三层结构顶层 GroupHeader显示「华东区2024 Q1」这类跨列标题绑定GridViewColumnGroup.Header中层 ColumnGroup容器对象管理所属列及分组样式通过GridViewColumnGroup.Columns关联物理列底层 GridViewDataColumn真实数据列Header属性仅显示末级字段名如「销售额万元」。这种设计使分组头成为独立的 UI 元素拥有自己的Width、IsFrozen、Visibility属性且导出时GridViewExportOptions.ExportColumnGroups true可自动将 GroupHeader 渲染为合并单元格。2.3 本 Demo 的核心结构4 列 × 2 分组 × 1 总标题的完整映射Demo 中数据源为ObservableCollectionSalesRecord含Region、City、SalesAmount、YoYChange四字段。XAML 中的分组声明如下telerik:RadGridView x:NameradGridView AutoGenerateColumnsFalse telerik:RadGridView.ColumnGroups !-- 总标题组覆盖全部4列 -- telerik:GridViewColumnGroup Header2024年第一季度销售数据 / !-- 华东区分组包含前2列 -- telerik:GridViewColumnGroup Header华东区2024 Q1 NameEastGroup telerik:GridViewColumnGroup.Columns telerik:GridViewDataColumn DataMemberBinding{Binding Region} Header区域 / telerik:GridViewDataColumn DataMemberBinding{Binding City} Header城市 / /telerik:GridViewColumnGroup.Columns /telerik:GridViewColumnGroup !-- 华北区分组包含后2列 -- telerik:GridViewColumnGroup Header华北区2024 Q1 NameNorthGroup telerik:GridViewColumnGroup.Columns telerik:GridViewDataColumn DataMemberBinding{Binding SalesAmount} Header销售额万元 / telerik:GridViewDataColumn DataMemberBinding{Binding YoYChange} Header同比% / /telerik:GridViewColumnGroup.Columns /telerik:GridViewColumnGroup /telerik:RadGridView.ColumnGroups /telerik:RadGridView关键点说明ColumnGroups集合中GridViewColumnGroup的声明顺序即为表头从左到右的排列顺序每个GridViewColumnGroup的Columns子集合必须显式指定所含物理列不可遗漏或重复Name属性用于代码后台引用如动态隐藏分组非必需但强烈建议添加。3. 从零搭建可运行 DemoXAML 声明、数据绑定与分组控制三步落地3.1 创建基础项目并引用 Telerik 控件库确保项目已安装Telerik.UI.for.WPFNuGet 包版本 ≥ 2022.1.119。在App.xaml中添加程序集资源Application.Resources ResourceDictionary ResourceDictionary.MergedDictionaries ResourceDictionary Source/Telerik.Windows.Themes.Fluent;component/Themes/System.Windows.xaml/ ResourceDictionary Source/Telerik.Windows.Themes.Fluent;component/Themes/Telerik.Windows.Controls.xaml/ ResourceDictionary Source/Telerik.Windows.Themes.Fluent;component/Themes/Telerik.Windows.Controls.GridView.xaml/ /ResourceDictionary.MergedDictionaries /ResourceDictionary /Application.Resources注意主题资源路径必须与安装的 Telerik 版本严格匹配。若使用VisualStudio2019主题需替换为对应路径否则分组头背景色显示为灰色块。3.2 定义数据模型与模拟数据源创建SalesRecord.cspublic class SalesRecord : INotifyPropertyChanged { private string _region; private string _city; private double _salesAmount; private double _yoYChange; public string Region { get _region; set { _region value; OnPropertyChanged(); } } public string City { get _city; set { _city value; OnPropertyChanged(); } } public double SalesAmount { get _salesAmount; set { _salesAmount value; OnPropertyChanged(); } } public double YoYChange { get _yoYChange; set { _yoYChange value; OnPropertyChanged(); } } public event PropertyChangedEventHandler PropertyChanged; protected virtual void OnPropertyChanged([CallerMemberName] string propertyName null) { PropertyChanged?.Invoke(this, new PropertyChangedEventArgs(propertyName)); } }在MainWindow.xaml.cs中初始化数据public partial class MainWindow : Window { public MainWindow() { InitializeComponent(); var data new ObservableCollectionSalesRecord { new SalesRecord { Region 华东, City 上海, SalesAmount 1250.5, YoYChange 8.2 }, new SalesRecord { Region 华东, City 杭州, SalesAmount 980.3, YoYChange -1.5 }, new SalesRecord { Region 华北, City 北京, SalesAmount 1620.7, YoYChange 12.4 }, new SalesRecord { Region 华北, City 天津, SalesAmount 750.0, YoYChange 3.8 } }; radGridView.ItemsSource data; } }3.3 启用分组头交互折叠/展开与动态显示控制RadGridView 默认不启用分组头折叠功能需手动绑定IsExpanded属性。在 XAML 中为每个GridViewColumnGroup添加telerik:GridViewColumnGroup Header华东区2024 Q1 NameEastGroup IsExpandedTrue !-- Columns -- /telerik:GridViewColumnGroup若需代码后台动态控制例如点击按钮隐藏华东区private void HideEastGroup_Click(object sender, RoutedEventArgs e) { var eastGroup radGridView.ColumnGroups.FirstOrDefault(g g.Name EastGroup); if (eastGroup ! null) { eastGroup.IsExpanded false; // 触发重绘 radGridView.Rebind(); } }逻辑说明Rebind()强制刷新整个 Grid避免仅调用InvalidateVisual()导致分组头状态未同步。这是 Telerik 2022 版本的已知行为旧版本可用Refresh()替代。4. 避坑指南多行表头开发中 4 个高频翻车点与硬核解法4.1 现象分组头文字垂直居中失效始终贴顶显示原因GridViewColumnGroup的默认HeaderTemplate中TextBlock未设置VerticalAlignment且ColumnGroup自身无VerticalContentAlignment属性。解决重写HeaderTemplate显式设置VerticalAlignmentCentertelerik:GridViewColumnGroup Header华东区2024 Q1 telerik:GridViewColumnGroup.HeaderTemplate DataTemplate TextBlock Text{Binding} VerticalAlignmentCenter HorizontalAlignmentCenter TextWrappingWrap Margin0,2,0,2/ /DataTemplate /telerik:GridViewColumnGroup.HeaderTemplate !-- Columns -- /telerik:GridViewColumnGroup注意Margin0,2,0,2是为避免文字紧贴分组头上下边界2px 上下边距是经验值适配 Fluent 主题字体行高。4.2 现象拖拽列宽时分组头宽度不随子列同步变化出现空白裂隙原因GridViewColumnGroup的Width属性默认为Auto不响应子列宽度变更且ColumnGroups集合不监听子列Width属性变化。解决禁用分组头手动拖拽强制其宽度由子列总和驱动。在 XAML 中设置telerik:GridViewColumnGroup Header华东区2024 Q1 CanUserResizeFalse !-- Columns -- /telerik:GridViewColumnGroup并在代码中监听子列宽度变化动态更新分组头宽度需引用Telerik.Windows.Controls.GridView命名空间private void SubscribeToColumnWidthChanges() { foreach (var column in radGridView.Columns) { column.WidthChanged (s, e) { // 重新计算所属分组的总宽度 var group radGridView.ColumnGroups.FirstOrDefault(g g.Columns.Contains(column)); if (group ! null) { group.Width new GridViewLength(group.Columns.Sum(c c.ActualWidth)); } }; } }4.3 现象导出 Excel 后分组头变成普通文本未合并单元格原因RadGridView导出功能默认关闭ColumnGroups支持且GridViewExportOptions需显式配置。解决导出前设置ExportColumnGroups true并确保ExportFormat为ExcelML或Xlsxprivate void ExportToExcel_Click(object sender, RoutedEventArgs e) { var exportOptions new GridViewExportOptions { ExportColumnGroups true, Format ExportFormat.Xlsx, ShowColumnHeaders true }; radGridView.Export(SalesReport.xlsx, exportOptions); }提示ExcelML格式兼容性更好但文件体积大Xlsx需引用Telerik.Windows.Documents.Spreadsheet程序集。4.4 现象启用FrozenColumnCount后分组头冻结错位部分分组头被截断原因FrozenColumnCount仅冻结物理列而ColumnGroups是逻辑层其冻结行为需单独配置IsFrozen属性。解决为需要冻结的分组头显式设置IsFrozenTruetelerik:GridViewColumnGroup Header2024年第一季度销售数据 IsFrozenTrue / telerik:GridViewColumnGroup Header华东区2024 Q1 IsFrozenTrue NameEastGroup !-- Columns -- /telerik:GridViewColumnGroup此时冻结效果为总标题组 华东区分组头固定在左侧右侧滚动时保持可见。5. 进阶技巧动态生成 ColumnGroups 与跨分组排序的底层控制5.1 根据运行时数据结构自动构建 ColumnGroups反射 LINQ 实战当业务要求「按用户选择的维度动态生成表头分组」如切换「按区域」、「按产品线」、「按渠道」硬编码 XAML 显然不可行。此时需在代码中动态构建ColumnGroupsprivate void BuildColumnGroupsByDimension(string dimension) { // 清空现有分组 radGridView.ColumnGroups.Clear(); // 模拟维度配置key分组名value字段列表 var dimensionConfig new Dictionarystring, Liststring { [Region] new Liststring { Region, City }, [Product] new Liststring { ProductName, Category }, [Channel] new Liststring { ChannelName, SubChannel } }; if (!dimensionConfig.TryGetValue(dimension, out var fields)) return; // 创建总标题组 var totalGroup new GridViewColumnGroup { Header $按{dimension}维度汇总 }; radGridView.ColumnGroups.Add(totalGroup); // 为每个字段创建分组此处简化为每字段一个分组实际可按业务规则聚合 for (int i 0; i fields.Count; i) { var field fields[i]; var columnGroup new GridViewColumnGroup { Header GetDisplayName(field), // 从属性特性获取中文名 Name $DynamicGroup_{i} }; // 绑定对应字段的列 var gridColumn new GridViewDataColumn { DataMemberBinding new Binding(field), Header GetDisplayName(field) }; columnGroup.Columns.Add(gridColumn); radGridView.ColumnGroups.Add(columnGroup); } } private string GetDisplayName(string propertyName) { var prop typeof(SalesRecord).GetProperty(propertyName); var attr prop?.GetCustomAttributeDisplayAttribute(); return attr?.GetName() ?? propertyName; }该方法将分组逻辑从 XAML 移至 C#便于与 ViewModel 解耦也方便单元测试验证分组结构。5.2 跨分组排序当点击「销售额万元」列头时如何让「华东区」和「华北区」数据分别排序RadGridView 默认排序作用于整个ItemsSource无法感知分组边界。要实现「分组内独立排序」需拦截Sorting事件并重写排序逻辑private void radGridView_Sorting(object sender, GridViewSortingEventArgs e) { // 取消默认排序 e.Cancel true; // 获取被点击列所属的分组 var clickedColumn e.Column as GridViewDataColumn; var parentGroup radGridView.ColumnGroups.FirstOrDefault(g g.Columns.Contains(clickedColumn)); if (parentGroup null) return; // 按分组提取数据子集此处假设数据源为 ObservableCollectionSalesRecord var source radGridView.ItemsSource as IEnumerableSalesRecord; if (source null) return; // 按分组字段如 Region分组并对每组内数据按点击列排序 var groupedData source.GroupBy(x x.Region); // 此处 Region 即分组依据字段 var sortedList new ListSalesRecord(); foreach (var group in groupedData) { var sortedGroup group.OrderBy(x { // 根据点击列动态取值 var prop typeof(SalesRecord).GetProperty(clickedColumn.DataMemberBinding.Path.Path); return prop?.GetValue(x) ?? null; }).ToList(); sortedList.AddRange(sortedGroup); } // 更新 ItemsSource注意需保证 ObservableCollection 通知机制正常 var observableSource radGridView.ItemsSource as ObservableCollectionSalesRecord; if (observableSource ! null) { observableSource.Clear(); foreach (var item in sortedList) observableSource.Add(item); } }注意此方案要求数据源中存在明确的分组依据字段如Region且该字段值能唯一标识分组。若分组依据为复合条件如Region Year需调整GroupBy表达式。5.3 分组头样式深度定制用 ControlTemplate 替换默认渲染器当HeaderTemplate无法满足设计需求如添加图标、状态徽标、下拉箭头需重写GridViewColumnGroup的ControlTemplate。以下为带「展开/折叠」图标的模板Style TargetTypetelerik:GridViewColumnGroup Setter PropertyTemplate Setter.Value ControlTemplate TargetTypetelerik:GridViewColumnGroup Border Background{TemplateBinding Background} BorderBrush{TemplateBinding BorderBrush} BorderThickness{TemplateBinding BorderThickness} Grid Grid.ColumnDefinitions ColumnDefinition WidthAuto/ ColumnDefinition Width*/ ColumnDefinition WidthAuto/ /Grid.ColumnDefinitions !-- 折叠图标 -- ToggleButton Grid.Column0 IsChecked{Binding IsExpanded, RelativeSource{RelativeSource TemplatedParent}, ModeTwoWay} Width16 Height16 Margin4,0,4,0 ToggleButton.Template ControlTemplate Path DataM0,0 L4,4 L0,8 Z FillGray RenderTransformOrigin0.5,0.5 Path.RenderTransform RotateTransform Angle{Binding IsChecked, RelativeSource{RelativeSource TemplatedParent}, Converter{StaticResource BoolToAngleConverter}}/ /Path.RenderTransform /Path /ControlTemplate /ToggleButton.Template /ToggleButton !-- 分组头文字 -- ContentPresenter Grid.Column1 Content{TemplateBinding Header} VerticalAlignmentCenter HorizontalAlignmentCenter TextBlock.TextWrappingWrap/ !-- 右侧占位 -- Rectangle Grid.Column2 Width16/ /Grid /Border /ControlTemplate /Setter.Value /Setter /Style配套的BoolToAngleConverterpublic class BoolToAngleConverter : IValueConverter { public object Convert(object value, Type targetType, object parameter, CultureInfo culture) { return (bool)value ? 90.0 : 0.0; } public object ConvertBack(object value, Type targetType, object parameter, CultureInfo culture) { throw new NotImplementedException(); } }从那以后我每次做 Telerik 表头分组都会先检查三点ColumnGroups是否按物理列顺序声明、IsFrozen是否为需要固定的分组显式开启、导出前是否设置了ExportColumnGroups true。这三个检查项覆盖了 90% 的交付现场翻车场景——尤其是导出环节客户永远在验收当天才第一次打开 Excel 文件。希望帮到你。本文还有配套的精品资源点击获取
简介本资源是一个面向WPF开发者的技术实践项目聚焦于使用Telerik UI for WPF控件库实现DataGrid多行表头这一典型界面需求适用于中初级WPF开发人员学习高级表格布局与数据绑定技巧。资源包共53个文件包含13个C#逻辑文件、2个XAML界面定义、8个DLL依赖库、8个XML配置与资源文件以及sln/csproj工程文件等完整呈现一个可直接运行的TelerikWpfApp1示例工程压缩包大小为3.34MB。目前已有292人学习下载反映出该场景在实际报表类应用开发中的高频需求。读者可直接导入VS运行调试深入理解RadGridView中HeaderRowTemplate配置、嵌套列组定义、HierarchicalCollectionView数据分组绑定等核心实现并通过源码结构如Vehicle.cs数据模型、MainWindow.xaml视图、App.xaml资源字典掌握Telerik DataGrid多级表头的工程化组织方式。1. WPF 多行表头不是“加个换行符”就能搞定Telerik RadGridView 实现复杂表头合并的真实路径你试过在 WPF DataGrid 里做「销售部2024 Q1」这种两行嵌套表头吗别急着改HeaderTemplate——原生 DataGrid 的列头渲染是单层扁平结构强行塞LineBreak只会让文字挤成一团、对齐错乱、导出 Excel 时彻底崩坏。这个 Telerik RadGridView 多行表头 Demo 就是专治这类“伪多行”玄学的实战样本它用GridViewColumnGroupColumnGroups机制在不碰任何自定义模板的前提下把物理列按逻辑组折叠让「区域」「城市」「销售额万元」「同比%」四列自动归入「华东区2024 Q1」和「华北区2024 Q1」两个顶层分组且支持分组内列宽独立拖拽、分组头冻结、导出时保留层级结构。适合正在用 Telerik 做企业级报表系统、又卡在表头语义化表达上的 WPF 开发者——不是教你怎么写 XAML而是告诉你为什么必须用ColumnGroups而不是HeaderTemplate以及 GroupHeader 模板里那行VerticalContentAlignmentCenter不加就会导致文字悬浮半空的血泪经验。2. 为什么非得用 ColumnGroupsRadGridView 表头分层的底层逻辑与选型依据2.1 原生 DataGrid 的表头模型缺陷单层 Header 属性无法承载层级语义WPF 原生DataGrid的每一列只暴露一个Header属性类型为object。常见做法是传入TextBlock并设置TextWrappingWrap看似能换行但本质仍是单个 UIElement 渲染。问题在于布局失控DataGrid内部用Grid布局表头行所有列头共享同一行高无法为不同分组设置独立高度交互断裂点击分组头无法触发分组折叠/展开原生无此概念也无法响应分组级右键菜单导出失效DataGrid导出到 Excel 时仅读取Header.ToString()换行符\n被转义为普通字符Excel 单元格内不换行。提示有人尝试用HeaderTemplate套StackPanel堆叠两个TextBlock这会导致列头宽度计算异常——StackPanel不参与 Measure 过程实际宽度由最宽子元素决定拖拽列宽时会突然跳变。2.2 Telerik RadGridView 的 ColumnGroups 架构物理列与逻辑组的解耦设计RadGridView 的解决方案是引入ColumnGroups集合将表头划分为三层结构顶层 GroupHeader显示「华东区2024 Q1」这类跨列标题绑定GridViewColumnGroup.Header中层 ColumnGroup容器对象管理所属列及分组样式通过GridViewColumnGroup.Columns关联物理列底层 GridViewDataColumn真实数据列Header属性仅显示末级字段名如「销售额万元」。这种设计使分组头成为独立的 UI 元素拥有自己的Width、IsFrozen、Visibility属性且导出时GridViewExportOptions.ExportColumnGroups true可自动将 GroupHeader 渲染为合并单元格。2.3 本 Demo 的核心结构4 列 × 2 分组 × 1 总标题的完整映射Demo 中数据源为ObservableCollectionSalesRecord含Region、City、SalesAmount、YoYChange四字段。XAML 中的分组声明如下telerik:RadGridView x:NameradGridView AutoGenerateColumnsFalse telerik:RadGridView.ColumnGroups !-- 总标题组覆盖全部4列 -- telerik:GridViewColumnGroup Header2024年第一季度销售数据 / !-- 华东区分组包含前2列 -- telerik:GridViewColumnGroup Header华东区2024 Q1 NameEastGroup telerik:GridViewColumnGroup.Columns telerik:GridViewDataColumn DataMemberBinding{Binding Region} Header区域 / telerik:GridViewDataColumn DataMemberBinding{Binding City} Header城市 / /telerik:GridViewColumnGroup.Columns /telerik:GridViewColumnGroup !-- 华北区分组包含后2列 -- telerik:GridViewColumnGroup Header华北区2024 Q1 NameNorthGroup telerik:GridViewColumnGroup.Columns telerik:GridViewDataColumn DataMemberBinding{Binding SalesAmount} Header销售额万元 / telerik:GridViewDataColumn DataMemberBinding{Binding YoYChange} Header同比% / /telerik:GridViewColumnGroup.Columns /telerik:GridViewColumnGroup /telerik:RadGridView.ColumnGroups /telerik:RadGridView关键点说明ColumnGroups集合中GridViewColumnGroup的声明顺序即为表头从左到右的排列顺序每个GridViewColumnGroup的Columns子集合必须显式指定所含物理列不可遗漏或重复Name属性用于代码后台引用如动态隐藏分组非必需但强烈建议添加。3. 从零搭建可运行 DemoXAML 声明、数据绑定与分组控制三步落地3.1 创建基础项目并引用 Telerik 控件库确保项目已安装Telerik.UI.for.WPFNuGet 包版本 ≥ 2022.1.119。在App.xaml中添加程序集资源Application.Resources ResourceDictionary ResourceDictionary.MergedDictionaries ResourceDictionary Source/Telerik.Windows.Themes.Fluent;component/Themes/System.Windows.xaml/ ResourceDictionary Source/Telerik.Windows.Themes.Fluent;component/Themes/Telerik.Windows.Controls.xaml/ ResourceDictionary Source/Telerik.Windows.Themes.Fluent;component/Themes/Telerik.Windows.Controls.GridView.xaml/ /ResourceDictionary.MergedDictionaries /ResourceDictionary /Application.Resources注意主题资源路径必须与安装的 Telerik 版本严格匹配。若使用VisualStudio2019主题需替换为对应路径否则分组头背景色显示为灰色块。3.2 定义数据模型与模拟数据源创建SalesRecord.cspublic class SalesRecord : INotifyPropertyChanged { private string _region; private string _city; private double _salesAmount; private double _yoYChange; public string Region { get _region; set { _region value; OnPropertyChanged(); } } public string City { get _city; set { _city value; OnPropertyChanged(); } } public double SalesAmount { get _salesAmount; set { _salesAmount value; OnPropertyChanged(); } } public double YoYChange { get _yoYChange; set { _yoYChange value; OnPropertyChanged(); } } public event PropertyChangedEventHandler PropertyChanged; protected virtual void OnPropertyChanged([CallerMemberName] string propertyName null) { PropertyChanged?.Invoke(this, new PropertyChangedEventArgs(propertyName)); } }在MainWindow.xaml.cs中初始化数据public partial class MainWindow : Window { public MainWindow() { InitializeComponent(); var data new ObservableCollectionSalesRecord { new SalesRecord { Region 华东, City 上海, SalesAmount 1250.5, YoYChange 8.2 }, new SalesRecord { Region 华东, City 杭州, SalesAmount 980.3, YoYChange -1.5 }, new SalesRecord { Region 华北, City 北京, SalesAmount 1620.7, YoYChange 12.4 }, new SalesRecord { Region 华北, City 天津, SalesAmount 750.0, YoYChange 3.8 } }; radGridView.ItemsSource data; } }3.3 启用分组头交互折叠/展开与动态显示控制RadGridView 默认不启用分组头折叠功能需手动绑定IsExpanded属性。在 XAML 中为每个GridViewColumnGroup添加telerik:GridViewColumnGroup Header华东区2024 Q1 NameEastGroup IsExpandedTrue !-- Columns -- /telerik:GridViewColumnGroup若需代码后台动态控制例如点击按钮隐藏华东区private void HideEastGroup_Click(object sender, RoutedEventArgs e) { var eastGroup radGridView.ColumnGroups.FirstOrDefault(g g.Name EastGroup); if (eastGroup ! null) { eastGroup.IsExpanded false; // 触发重绘 radGridView.Rebind(); } }逻辑说明Rebind()强制刷新整个 Grid避免仅调用InvalidateVisual()导致分组头状态未同步。这是 Telerik 2022 版本的已知行为旧版本可用Refresh()替代。4. 避坑指南多行表头开发中 4 个高频翻车点与硬核解法4.1 现象分组头文字垂直居中失效始终贴顶显示原因GridViewColumnGroup的默认HeaderTemplate中TextBlock未设置VerticalAlignment且ColumnGroup自身无VerticalContentAlignment属性。解决重写HeaderTemplate显式设置VerticalAlignmentCentertelerik:GridViewColumnGroup Header华东区2024 Q1 telerik:GridViewColumnGroup.HeaderTemplate DataTemplate TextBlock Text{Binding} VerticalAlignmentCenter HorizontalAlignmentCenter TextWrappingWrap Margin0,2,0,2/ /DataTemplate /telerik:GridViewColumnGroup.HeaderTemplate !-- Columns -- /telerik:GridViewColumnGroup注意Margin0,2,0,2是为避免文字紧贴分组头上下边界2px 上下边距是经验值适配 Fluent 主题字体行高。4.2 现象拖拽列宽时分组头宽度不随子列同步变化出现空白裂隙原因GridViewColumnGroup的Width属性默认为Auto不响应子列宽度变更且ColumnGroups集合不监听子列Width属性变化。解决禁用分组头手动拖拽强制其宽度由子列总和驱动。在 XAML 中设置telerik:GridViewColumnGroup Header华东区2024 Q1 CanUserResizeFalse !-- Columns -- /telerik:GridViewColumnGroup并在代码中监听子列宽度变化动态更新分组头宽度需引用Telerik.Windows.Controls.GridView命名空间private void SubscribeToColumnWidthChanges() { foreach (var column in radGridView.Columns) { column.WidthChanged (s, e) { // 重新计算所属分组的总宽度 var group radGridView.ColumnGroups.FirstOrDefault(g g.Columns.Contains(column)); if (group ! null) { group.Width new GridViewLength(group.Columns.Sum(c c.ActualWidth)); } }; } }4.3 现象导出 Excel 后分组头变成普通文本未合并单元格原因RadGridView导出功能默认关闭ColumnGroups支持且GridViewExportOptions需显式配置。解决导出前设置ExportColumnGroups true并确保ExportFormat为ExcelML或Xlsxprivate void ExportToExcel_Click(object sender, RoutedEventArgs e) { var exportOptions new GridViewExportOptions { ExportColumnGroups true, Format ExportFormat.Xlsx, ShowColumnHeaders true }; radGridView.Export(SalesReport.xlsx, exportOptions); }提示ExcelML格式兼容性更好但文件体积大Xlsx需引用Telerik.Windows.Documents.Spreadsheet程序集。4.4 现象启用FrozenColumnCount后分组头冻结错位部分分组头被截断原因FrozenColumnCount仅冻结物理列而ColumnGroups是逻辑层其冻结行为需单独配置IsFrozen属性。解决为需要冻结的分组头显式设置IsFrozenTruetelerik:GridViewColumnGroup Header2024年第一季度销售数据 IsFrozenTrue / telerik:GridViewColumnGroup Header华东区2024 Q1 IsFrozenTrue NameEastGroup !-- Columns -- /telerik:GridViewColumnGroup此时冻结效果为总标题组 华东区分组头固定在左侧右侧滚动时保持可见。5. 进阶技巧动态生成 ColumnGroups 与跨分组排序的底层控制5.1 根据运行时数据结构自动构建 ColumnGroups反射 LINQ 实战当业务要求「按用户选择的维度动态生成表头分组」如切换「按区域」、「按产品线」、「按渠道」硬编码 XAML 显然不可行。此时需在代码中动态构建ColumnGroupsprivate void BuildColumnGroupsByDimension(string dimension) { // 清空现有分组 radGridView.ColumnGroups.Clear(); // 模拟维度配置key分组名value字段列表 var dimensionConfig new Dictionarystring, Liststring { [Region] new Liststring { Region, City }, [Product] new Liststring { ProductName, Category }, [Channel] new Liststring { ChannelName, SubChannel } }; if (!dimensionConfig.TryGetValue(dimension, out var fields)) return; // 创建总标题组 var totalGroup new GridViewColumnGroup { Header $按{dimension}维度汇总 }; radGridView.ColumnGroups.Add(totalGroup); // 为每个字段创建分组此处简化为每字段一个分组实际可按业务规则聚合 for (int i 0; i fields.Count; i) { var field fields[i]; var columnGroup new GridViewColumnGroup { Header GetDisplayName(field), // 从属性特性获取中文名 Name $DynamicGroup_{i} }; // 绑定对应字段的列 var gridColumn new GridViewDataColumn { DataMemberBinding new Binding(field), Header GetDisplayName(field) }; columnGroup.Columns.Add(gridColumn); radGridView.ColumnGroups.Add(columnGroup); } } private string GetDisplayName(string propertyName) { var prop typeof(SalesRecord).GetProperty(propertyName); var attr prop?.GetCustomAttributeDisplayAttribute(); return attr?.GetName() ?? propertyName; }该方法将分组逻辑从 XAML 移至 C#便于与 ViewModel 解耦也方便单元测试验证分组结构。5.2 跨分组排序当点击「销售额万元」列头时如何让「华东区」和「华北区」数据分别排序RadGridView 默认排序作用于整个ItemsSource无法感知分组边界。要实现「分组内独立排序」需拦截Sorting事件并重写排序逻辑private void radGridView_Sorting(object sender, GridViewSortingEventArgs e) { // 取消默认排序 e.Cancel true; // 获取被点击列所属的分组 var clickedColumn e.Column as GridViewDataColumn; var parentGroup radGridView.ColumnGroups.FirstOrDefault(g g.Columns.Contains(clickedColumn)); if (parentGroup null) return; // 按分组提取数据子集此处假设数据源为 ObservableCollectionSalesRecord var source radGridView.ItemsSource as IEnumerableSalesRecord; if (source null) return; // 按分组字段如 Region分组并对每组内数据按点击列排序 var groupedData source.GroupBy(x x.Region); // 此处 Region 即分组依据字段 var sortedList new ListSalesRecord(); foreach (var group in groupedData) { var sortedGroup group.OrderBy(x { // 根据点击列动态取值 var prop typeof(SalesRecord).GetProperty(clickedColumn.DataMemberBinding.Path.Path); return prop?.GetValue(x) ?? null; }).ToList(); sortedList.AddRange(sortedGroup); } // 更新 ItemsSource注意需保证 ObservableCollection 通知机制正常 var observableSource radGridView.ItemsSource as ObservableCollectionSalesRecord; if (observableSource ! null) { observableSource.Clear(); foreach (var item in sortedList) observableSource.Add(item); } }注意此方案要求数据源中存在明确的分组依据字段如Region且该字段值能唯一标识分组。若分组依据为复合条件如Region Year需调整GroupBy表达式。5.3 分组头样式深度定制用 ControlTemplate 替换默认渲染器当HeaderTemplate无法满足设计需求如添加图标、状态徽标、下拉箭头需重写GridViewColumnGroup的ControlTemplate。以下为带「展开/折叠」图标的模板Style TargetTypetelerik:GridViewColumnGroup Setter PropertyTemplate Setter.Value ControlTemplate TargetTypetelerik:GridViewColumnGroup Border Background{TemplateBinding Background} BorderBrush{TemplateBinding BorderBrush} BorderThickness{TemplateBinding BorderThickness} Grid Grid.ColumnDefinitions ColumnDefinition WidthAuto/ ColumnDefinition Width*/ ColumnDefinition WidthAuto/ /Grid.ColumnDefinitions !-- 折叠图标 -- ToggleButton Grid.Column0 IsChecked{Binding IsExpanded, RelativeSource{RelativeSource TemplatedParent}, ModeTwoWay} Width16 Height16 Margin4,0,4,0 ToggleButton.Template ControlTemplate Path DataM0,0 L4,4 L0,8 Z FillGray RenderTransformOrigin0.5,0.5 Path.RenderTransform RotateTransform Angle{Binding IsChecked, RelativeSource{RelativeSource TemplatedParent}, Converter{StaticResource BoolToAngleConverter}}/ /Path.RenderTransform /Path /ControlTemplate /ToggleButton.Template /ToggleButton !-- 分组头文字 -- ContentPresenter Grid.Column1 Content{TemplateBinding Header} VerticalAlignmentCenter HorizontalAlignmentCenter TextBlock.TextWrappingWrap/ !-- 右侧占位 -- Rectangle Grid.Column2 Width16/ /Grid /Border /ControlTemplate /Setter.Value /Setter /Style配套的BoolToAngleConverterpublic class BoolToAngleConverter : IValueConverter { public object Convert(object value, Type targetType, object parameter, CultureInfo culture) { return (bool)value ? 90.0 : 0.0; } public object ConvertBack(object value, Type targetType, object parameter, CultureInfo culture) { throw new NotImplementedException(); } }从那以后我每次做 Telerik 表头分组都会先检查三点ColumnGroups是否按物理列顺序声明、IsFrozen是否为需要固定的分组显式开启、导出前是否设置了ExportColumnGroups true。这三个检查项覆盖了 90% 的交付现场翻车场景——尤其是导出环节客户永远在验收当天才第一次打开 Excel 文件。希望帮到你。本文还有配套的精品资源点击获取
平方复杂度无法被常规优化消除｜TaoToken 统一 Key 通道实测)
