【WPF】DataGrid多表头的样式设计
需求
在使用WPF开发时，使用DataGrid列表显示数据时，有些字段可以进行分组显示，用于更好的表达它们之间存在的某种关系，因此就考虑到要对DataGrid的表头进行扩展，可以显示多行表头，让这些有关联的字段内容显示的更加明了简洁。
自定义样式
这段自定义样式可以放在MainWindow.xaml文件中，或者自己定义一个存放样式文件的xaml进行存放。
这里在模版里面使用的第一个Grid，是用于总的显示，还有右侧边竖线分割线，嵌入的Grid用于显示多表头的处理显示功能：第一行为总的信息，第二行为第一行和第三行的分割线，第三行显示的省、市和县。
<Style x:Key="CityStyle" TargetType="DataGridColumnHeader">
<Setter Property="Template">
<Setter.Value>
<ControlTemplate>
<Grid x:Name="Root">
<Grid.ColumnDefinitions>
<ColumnDefinition>
</ColumnDefinition>
<ColumnDefinition Width="Auto">
</ColumnDefinition>
</Grid.ColumnDefinitions>
<Grid
Grid.Column="0"
HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}"
VerticalAlignment="{TemplateBinding VerticalContentAlignment}">
<Grid.RowDefinitions>
<RowDefinition Height="30">
</RowDefinition>
<RowDefinition Height="Auto"></RowDefinition>
<RowDefinition Height="30">
</RowDefinition>
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="100">
</ColumnDefinition>
<ColumnDefinition Width="Auto">
</ColumnDefinition>
<ColumnDefinition Width="100">
</ColumnDefinition>
<ColumnDefinition Width="Auto">
</ColumnDefinition>
<ColumnDefinition Width="100">
</ColumnDefinition>
</Grid.ColumnDefinitions>
<ContentPresenter
Grid.Row="0"
Grid.Column="0"
Grid.ColumnSpan="5"
HorizontalAlignment="Center"
VerticalAlignment="Center"
Content="户籍信息">
</ContentPresenter>
<Rectangle
Grid.Row="1"
Grid.Column="0"
Grid.ColumnSpan="5"
VerticalAlignment="Stretch" Height="1"
Fill="Black"
Visibility="Visible">
</Rectangle>
<ContentPresenter
Grid.Row="2"
Grid.Column="0"
HorizontalAlignment="Center"
VerticalAlignment="Center"
Content="省">
</ContentPresenter>
<Rectangle
Grid.Row="2"
Grid.Column="1"
Width="1"
VerticalAlignment="Stretch"
Fill="#ccc"
Visibility="Visible">
</Rectangle>
<ContentPresenter
Grid.Row="2"
Grid.Column="2"
HorizontalAlignment="Center"
VerticalAlignment="Center"
Content="市">
</ContentPresenter>
<Rectangle
Grid.Row="2"
Grid.Column="3"
Width="1"
VerticalAlignment="Stretch"
Fill="#ccc"
Visibility="Visible">
</Rectangle>
<ContentPresenter
Grid.Row="2"
Grid.Column="4"
HorizontalAlignment="Center"
VerticalAlignment="Center"
Content="县">
</ContentPresenter>
</Grid>
<Rectangle
Grid.Column="1"
Width="1"
VerticalAlignment="Stretch"
Fill="#ccc"
Visibility="Visible">
</Rectangle>
</Grid>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
窗体布局
<Grid>
<DataGrid
AutoGenerateColumns="False"
CanUserAddRows="False"
ItemsSource="{Binding UserInformations}">
<DataGrid.Columns>
<DataGridTextColumn Width="100" Binding="{Binding UserName}">
<DataGridTextColumn.HeaderTemplate>
<DataTemplate>
<Grid HorizontalAlignment="Stretch" VerticalAlignment="Center">
<TextBlock
Margin="5,0,5,0"
HorizontalAlignment="Center"
VerticalAlignment="Center"
Text="姓名"
TextAlignment="Center"
TextWrapping="Wrap">
</TextBlock>
</Grid>
</DataTemplate>
</DataGridTextColumn.HeaderTemplate>
<DataGridTextColumn.ElementStyle>
<Style>
<Setter Property="TextBlock.TextAlignment" Value="Center">
</Setter>
<Setter Property="TextBlock.TextWrapping" Value="Wrap">
</Setter>
<Setter Property="TextBlock.HorizontalAlignment" Value="Center">
</Setter>
<Setter Property="TextBlock.VerticalAlignment" Value="Center">
</Setter>
</Style>
</DataGridTextColumn.ElementStyle>
</DataGridTextColumn>
<DataGridTemplateColumn HeaderStyle="{StaticResource CityStyle}">
<DataGridTemplateColumn.CellTemplate>
<DataTemplate>
<StackPanel Orientation="Horizontal">
<TextBlock
Width="100"
Margin="0"
HorizontalAlignment="Center"
VerticalAlignment="Center"
Text="{Binding Province}"
TextAlignment="Center">
</TextBlock>
<Rectangle Width="1" Fill="Black">
</Rectangle>
<TextBlock
Width="100"
HorizontalAlignment="Center"
VerticalAlignment="Center"
Text="{Binding City}"
TextAlignment="Center">
</TextBlock>
<Rectangle Width="1" Fill="Black">
</Rectangle>
<TextBlock
Width="100"
HorizontalAlignment="Center"
VerticalAlignment="Center"
Text="{Binding County}"
TextAlignment="Center">
</TextBlock>
</StackPanel>
</DataTemplate>
</DataGridTemplateColumn.CellTemplate>
</DataGridTemplateColumn>
<DataGridTextColumn
Width="100"
Binding="{Binding Motto}"
Header="格言">
<DataGridTextColumn.HeaderStyle>
<Style>
<Setter Property="TextBlock.HorizontalAlignment" Value="Stretch">
</Setter>
<Setter Property="TextBlock.TextAlignment" Value="Center">
</Setter>
</Style>
</DataGridTextColumn.HeaderStyle>
<DataGridTextColumn.HeaderTemplate>
<DataTemplate>
<TextBlock
HorizontalAlignment="Center"
VerticalAlignment="Center"
Text="格言"
TextAlignment="Center"
TextWrapping="Wrap">
</TextBlock>
</DataTemplate>
</DataGridTextColumn.HeaderTemplate>
<DataGridTextColumn.ElementStyle>
<Style>
<Setter Property="TextBlock.TextAlignment" Value="Center">
</Setter>
<Setter Property="TextBlock.TextWrapping" Value="Wrap">
</Setter>
<Setter Property="TextBlock.HorizontalAlignment" Value="Center">
</Setter>
<Setter Property="TextBlock.VerticalAlignment" Value="Center">
</Setter>
</Style>
</DataGridTextColumn.ElementStyle>
</DataGridTextColumn>
</DataGrid.Columns>
</DataGrid>
</Grid>
在这里的窗体布局中，同时对姓名和格言的表头样式和Cell里面的样式进行了修改。其中DataGridTextColumn.HeaderTemplate包括的是头部的样式；DataGridTextColumn.ElementStyle宝开的是Cell的样式。
定义的实体类
public class UserInformation
{
public string UserName { get; set; }
public string Province { get; set; }
public string City { get; set; }
public string County { get; set; }
public int Age { get; set; }
public string Motto { get; set; }
}
ViewModel类的定义
public class MainViewModel:ViewModelBase
{
private string _title;
public string Title
{
get { return _title; }
set { Set(ref _title, value); }
}
private ObservableCollection<UserInformation> _userInformations;
public ObservableCollection<UserInformation> UserInformations
{
get { return _userInformations; }
set { Set(ref _userInformations, value); }
}
public MainViewModel()
{
Title = Guid.NewGuid().ToString();
UserInformations = new ObservableCollection<UserInformation>(new List<UserInformation>()
{
new UserInformation()
{
UserName = "Bob",Age = 32,Province = "山东",City = "济南",County = "天桥",Motto = "会当云绝顶，\r\n一览众山小。"
},
new UserInformation()
{
UserName = "Bob",Age = 32,Province = "山东",City = "济南",County = "天桥",Motto = "会当云绝顶，\r\n一览众山小。"
},
new UserInformation()
{
UserName = "Bob",Age = 32,Province = "山东",City = "济南",County = "天桥",Motto = "会当云绝顶，\r\n一览众山小。"
}
});
}
}
本实例使用了.netcore 3.1版本进行的开发，但是对于.net framework同样适用。
MVVM模式是使用MVVMLightstd10，可以从nuget上面进行下载。
本示例已上传至GITHUB：https://github.com/mzy666888/MultiHeaderOfDataGridWpfApp
【WPF】DataGrid多表头的样式设计的更多相关文章
- WPF DataGrid 复合表头 （实现表头合并，自定义表头）
功能说明: 将 DataGrid嵌套在本控件内,使用Label自定义表头,如果需要上下左右滚动 需要在控件外围添加 ScrollViewer 并且设置 ScrollVisibility 为Auto ...
- WPF DataGrid多表头/列头，多行头，合并单元格，一列占据多行
先上效果图: 思路说明:这是两个DataGrid,没有嵌套,位置和高度保持一致,在加上ScrollViewer滚动条,这就像是在一个DataGrid中. 缺点: 因为最外层有透明的Border,所以没 ...
- WPF datagrid 设置表头线与颜色、透明度
<!--数据网格的列标题样式属性--> <DataGrid.ColumnHeaderStyle> <!--样式类型:DataGridColumnHeader(数据网格列标 ...
- WPF DataGrid 样式设置
隔行换色,鼠标单击,悬浮样式都有,其具体效果如图 1 所示. 图 1 WPF DataGrid 样式设置效果图 其中: 界面设计代码下所示 ? + 查看代码 1 2 3 4 5 6 7 8 9 10 ...
- WPF DataGrid自定义样式
微软的WPF DataGrid中有很多的属性和样式,你可以调整,以寻找合适的(如果你是一名设计师).下面,找到我的小抄造型的网格.它不是100%全面,但它可以让你走得很远,有一些非常有用的技巧和陷阱. ...
- WPF DataGrid 样式分享
原文:WPF DataGrid 样式分享 隔行换色,鼠标单击,悬浮样式都有 先看效果: 代码: <DataGrid AutoGenerateColumns="False" N ...
- WPF DataGrid 自动生成行号的方法（通过修改RowHeaderTemplate的方式）
WPF中的DataGrid自动生成行号的方法有很多,这里记录了一种通过修改 RowHeaderTemplate的方式来生成行号: 方法一: xaml界面: <Window ... xmlns:l ...
- ASP.NET Aries DataGrid 配置表头说明文档
DataGrid 配置表头 字段 中文 说明 Field 字段 注意:mg_ 开头的字段为层级表头 Title 列称 OrderNum 序号 显示的顺序(冻结和非冻结列是两个组的序号) Width 列 ...
- WPF DataGrid常用属性记录
WPF DataGrid常用属性记录 组件常用方法: BeginEdit:使DataGrid进入编辑状态. CancelEdit:取消DataGrid的编辑状态. CollapseRowGroup:闭 ...
随机推荐
- 使用ADMT和PES实现window AD账户跨域迁移-介绍篇
使用 ADMT 和 pwdmig 实现 window AD 账户跨域迁移系列: 介绍篇 ADMT 安装 PES 的安装 ADMT:迁移组 ADMT:迁移用户 ADMT:计算机迁移 ADMT:报告生成 ...
- Java实现 LeetCode 594 最长和谐子序列（滑动窗口）
594. 最长和谐子序列 和谐数组是指一个数组里元素的最大值和最小值之间的差别正好是1. 现在,给定一个整数数组,你需要在所有可能的子序列中找到最长的和谐子序列的长度. 示例 1: 输入: [1,3, ...
- Java实现打印回型嵌套
*********** * * * ******* * * * * * * * *** * * * * * * * * * * *** * * * * * * * ******* * * * **** ...
- （七）DVWA之SQL Injection--SQLMap测试（Low）
目录结构 一.测试需求分析 二.SQLMap利用SQL注入漏洞,获取数据库信息 1.判断是否存在注入点 2.获取DBMS中所有的数据库名称 3.获取Web应用当前连接的数据库 4.列出数据库中的所有用 ...
- 4k壁纸
4k
- 别人开发三年30k，而我才12K，看完他面试前狂刷的面试题，我惊了
朋友做Java开发三年多的时间了,在老东家勤勤恳恳工作了三年多,工资也就是从刚开始的8K涨到了12K,天天给我吐槽他的工资低.2019年中下旬开始就一直在各种地方找资源,刷面试题,想要“骑驴找马”,所 ...
- SpringCloud Alibaba (一)：序言
为什么要转用SpringCloud Alibaba? Spring Cloud Netflix项目进入维护模式 在2018年底时,Netflix宣布Hystrix进入维护模式.自2016年以来,Rib ...
- （一）TestNG-常用注解参数
原文:https://www.cnblogs.com/starstarstar/p/11305733.html 注解@Test标签 package com.course.testng; import ...
- 01---eclipse使用
一.eclipse快捷键 1.alt+? 或 alt+/:自动补全代码或者提示代码,可用于main函数(main).输出函数(syso)等 2.ctrl+1:错误提示 3.ctrl+/:自动注释当前行 ...
- python反向遍历一个可迭代对象
我们通常情况下都是正向遍历一个列表,下面是一种简单的反向遍历一个列表的方式. ## 正向遍历 >>>A = [9, 8, 7] >>>for index, a in ...