WPF Datagrid合并表头的思路
在使用datagrid的时候,有很多情况下,都需要合并表头,多行表头之类的操作。这就需要我们自定义列了。
本文给出一个思路,可以实现此需要,只是本人对这个研究不很明白,只是只是实现,仅此而已。
下面是效果图:
下面就看看代码:
直接在MainWindow实现:
<Window x:Class="wpfcore.MainWindow"xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"xmlns:d="http://schemas.microsoft.com/expression/blend/2008"xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"xmlns:local="clr-namespace:wpfcore" xmlns:controls="http://metro.mahapps.com/winfx/xaml/controls"mc:Ignorable="d"Background="LightBlue"UseLayoutRounding="True"Title="MainWindow" Width="600" Height="340"><Grid><DataGrid ItemsSource="{Binding Students}" AutoGenerateColumns="False" GridLinesVisibility="All" FontSize="18"HorizontalGridLinesBrush="Red" VerticalGridLinesBrush="Red" ColumnHeaderHeight="60"><DataGrid.Columns><DataGridTemplateColumn Width="150"><DataGridTemplateColumn.HeaderStyle><Style TargetType="DataGridColumnHeader"><Setter Property="HorizontalContentAlignment" Value="Center"/><Setter Property="Height" Value="60"/><Setter Property="Template"><Setter.Value><ControlTemplate TargetType="DataGridColumnHeader"><Border Grid.Column="0" Grid.Row="1" BorderBrush="Red" BorderThickness="1"><TextBlock Text="姓名" HorizontalAlignment="Center" VerticalAlignment="Center"/></Border></ControlTemplate></Setter.Value></Setter>
</Style></DataGridTemplateColumn.HeaderStyle><DataGridTemplateColumn.CellTemplate><DataTemplate><TextBlock Grid.Column="0" Text="{Binding Name}" HorizontalAlignment="Center" VerticalAlignment="Center"/></DataTemplate></DataGridTemplateColumn.CellTemplate></DataGridTemplateColumn><DataGridTemplateColumn Width="150"><DataGridTemplateColumn.HeaderStyle><Style TargetType="DataGridColumnHeader"><Setter Property="HorizontalContentAlignment" Value="Center"/><Setter Property="Height" Value="60"/><Setter Property="Template"><Setter.Value><ControlTemplate TargetType="DataGridColumnHeader"><Border Grid.Column="0" Grid.Row="1" BorderBrush="Red" BorderThickness="0 1 1 1"><TextBlock Text="年龄" HorizontalAlignment="Center" VerticalAlignment="Center"/></Border></ControlTemplate></Setter.Value></Setter>
</Style></DataGridTemplateColumn.HeaderStyle><DataGridTemplateColumn.CellTemplate><DataTemplate><TextBlock Grid.Column="0" Text="{Binding Age}" HorizontalAlignment="Center" VerticalAlignment="Center"/></DataTemplate></DataGridTemplateColumn.CellTemplate></DataGridTemplateColumn><DataGridTemplateColumn x:Name="baseInfoColumn" Width="150"><DataGridTemplateColumn.HeaderStyle><Style TargetType="DataGridColumnHeader"><Setter Property="HorizontalContentAlignment" Value="Center"/><Setter Property="Height" Value="60"/><Setter Property="VerticalAlignment" Value="Top"/><Setter Property="Template"><Setter.Value><ControlTemplate TargetType="DataGridColumnHeader"><Grid><Grid.ColumnDefinitions><ColumnDefinition/><ColumnDefinition/><ColumnDefinition/></Grid.ColumnDefinitions><Grid.RowDefinitions><RowDefinition/><RowDefinition/></Grid.RowDefinitions> <Border Grid.Column="0" Grid.ColumnSpan="3" BorderBrush="Red" BorderThickness="0 1 1 0"><TextBlockHorizontalAlignment="Center" VerticalAlignment="Center"Text="基本信息"/></Border><Border Grid.Column="0" Grid.Row="1" BorderBrush="Red" BorderThickness="0 1 1 1"><TextBlock Text="身高" HorizontalAlignment="Center" VerticalAlignment="Center"/></Border><Border Grid.Column="1" Grid.Row="1" BorderBrush="Red" BorderThickness="0 1 1 1"><TextBlock Text="体重" HorizontalAlignment="Center" VerticalAlignment="Center"/></Border><Border Grid.Column="2" Grid.Row="1" BorderBrush="Red" BorderThickness="0 1 1 1"><TextBlock Text="性别" HorizontalAlignment="Center" VerticalAlignment="Center"/></Border></Grid></ControlTemplate></Setter.Value></Setter>
</Style></DataGridTemplateColumn.HeaderStyle><DataGridTemplateColumn.CellTemplate><DataTemplate><Grid><Grid.ColumnDefinitions><ColumnDefinition/><ColumnDefinition/><ColumnDefinition/></Grid.ColumnDefinitions><TextBlock Grid.Column="0" Text="{Binding Stature}" HorizontalAlignment="Center" VerticalAlignment="Center"/><TextBlock Grid.Column="1" Text="{Binding Weight}" HorizontalAlignment="Center" VerticalAlignment="Center"/><TextBlock Grid.Column="2" Text="{Binding Gender}" HorizontalAlignment="Center" VerticalAlignment="Center"/></Grid></DataTemplate></DataGridTemplateColumn.CellTemplate></DataGridTemplateColumn><DataGridTemplateColumn Width="150"><DataGridTemplateColumn.HeaderStyle><Style TargetType="DataGridColumnHeader"><Setter Property="HorizontalContentAlignment" Value="Center"/><Setter Property="Height" Value="60"/><Setter Property="Template"><Setter.Value><ControlTemplate TargetType="DataGridColumnHeader"><Border Grid.Column="0" Grid.Row="1" BorderBrush="Red" BorderThickness="0 1 1 1"><TextBlock Text="年龄" HorizontalAlignment="Center" VerticalAlignment="Center"/></Border></ControlTemplate></Setter.Value></Setter>
</Style></DataGridTemplateColumn.HeaderStyle><DataGridTemplateColumn.CellTemplate><DataTemplate><TextBlock Grid.Column="0" Text="{Binding Age}" HorizontalAlignment="Center" VerticalAlignment="Center"/></DataTemplate></DataGridTemplateColumn.CellTemplate></DataGridTemplateColumn></DataGrid.Columns></DataGrid></Grid>
</Window>
MainWindow.cs,定义了三行数据的VM:
using System;
using System.Collections.ObjectModel;
using System.Windows;
using System.Windows.Input;namespace wpfcore
{public partial class MainWindow : Window{public ObservableCollection<Student> Students { get; set; } = new ObservableCollection<Student>();public MainWindow(){InitializeComponent();Students.Add(new Student(){Name="张三",Age=18,Stature=188,Weight=95,Gender="男"});Students.Add(new Student(){Name = "李四",Age = 18,Stature = 188,Weight = 95,Gender = "男"});Students.Add(new Student(){Name = "小红",Age = 18,Stature = 188,Weight = 95,Gender = "男"});DataContext = this;} }public class Student{public string Name { get; set; }public int Age { get; set; }public int Stature { get; set; }public int Weight { get; set; }public string Gender { get; set; }}
}
OK,全部代码就是这样,思路就是使用DataGridTemplateColumn,需要合并的时候,就定义一个,然后在每个列再分出多列,绑定的数据还是原来的row的数据。这样就能拐着弯实现合并表头了。。。
如果喜欢,点个赞呗~
WPF Datagrid合并表头的思路相关推荐
- el-table合并表头handerMethod
项目中使用element的table表格,总是需要一些自定义的要求,虽然element已经提供了很多方法,但是如何使用还是需要自己探索 先上效果截图 这里主要使用到:header-cell-style ...
- WPF DataGrid 通过自定义表头模拟首行固定
WPF DataGrid 通过自定义表头模拟首行固定 独立观察员 2021 年 9 月 25 日 最近工作中要在 WPF 中做个表格,自然首选就是 DataGrid 控件了.问题是,UI 设计的表格是 ...
- 【WPF】DataGrid多表头的样式设计
需求 在使用WPF开发时,使用DataGrid列表显示数据时,有些字段可以进行分组显示,用于更好的表达它们之间存在的某种关系,因此就考虑到要对DataGrid的表头进行扩展,可以显示多行表头,让这些有 ...
- WPF DataGrid 表头筛选
我用DataGridExtensions 拓展包后,发现他筛选是进行内容变更后就直接筛选,这样会吃掉大量的内存,我想看看其他的方法或者它写有进行键盘回车再进行筛选,发现没找到(如果大佬了解的话,麻烦教 ...
- WPF DataGrid 如何将被选中行带到视野中
WPF DataGrid 如何将被选中行带到视野中 目录 前言 准备工作 方法一 方法二 总结 独立观察员 2021 年 12 月 11 日 前言 在 WPF 开发中,显示表格一般使用 DataGri ...
- wpf DataGrid主从表,DataGrid嵌套DataGrid主从结构rowdetailtemplate实现,绑定DataTable数据源,使用Visual Studio 2017
wpf DataGrid主从表,DataGrid嵌套DataGrid主从结构rowdetailtemplate实现,绑定DataTable数据源,使用Visual Studio 2017 . 子表绑定 ...
- DataGrid固定表头,实现滑动效果
DataGrid固定表头,实现滑动效果 找固定表头的功能找了半天,尝试过了但都不行,后来看到一个思路,说隐藏第一行表头,然后自己写固定位置的文本当表头,确实可行,就是调整位置有点麻烦-- 1.Data ...
- EasyUI DataGrid 多级表头设置
使用EasyUI做一个报表统计,需要合并表头为多级表头,核心代码如下: $('#dg').datagrid({ url:'datagrid_data.action', fit : true,fitCo ...
- WPF Datagrid with some read-only rows - Stack Overflow
原文:WPF Datagrid with some read-only rows - Stack Overflow up vote 21 down vote accepted I had the sa ...
最新文章
- C语言基础知识(自己做个笔记,云储存一下)
- Linux开发 python引用自定义的模块
- MTK 添加自定义PMS权限 Patch
- ×××S 2012 聚合函数 -- 介绍
- 数据结构之线性存储结构
- 内存迟迟下不去,可能你就差一个GC.Collect
- KingPaper初探ThinkPHP3.1.2之扩展函数库和类库的使用(四)
- 企业微信怎么输入服务器id,系统账号绑定企业微信成员id
- office 2013安装试用简单报告
- oracle 生成随机姓名_Oracle生成随机日期时间
- 谁要GMAIL和Orkut的邀请?
- CSU2104: Extra Judicial Operation-Tarjan边双联通分量缩点两种方法-难受的bug
- mysql 主键查询性能_MySQL查询性能优化(精)
- PyCharm Plugins
- skywalking-6.0.0-GA安装及配置
- 解决 soctherm: OC ALARM 0x00000001 错误
- 一体化Mbus物联网主机上线问题总结
- 生鲜卖菜小程序怎么做
- Python installer生成exe文件常用命令
- android预置资源到data分区,Android R 如何访问Android/data目录?