需求

在使用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多表头的样式设计的更多相关文章

  1. WPF DataGrid 复合表头 （实现表头合并，自定义表头）

    功能说明: 将 DataGrid嵌套在本控件内,使用Label自定义表头,如果需要上下左右滚动 需要在控件外围添加  ScrollViewer 并且设置  ScrollVisibility 为Auto ...

  2. WPF DataGrid多表头/列头，多行头，合并单元格，一列占据多行

    先上效果图: 思路说明:这是两个DataGrid,没有嵌套,位置和高度保持一致,在加上ScrollViewer滚动条,这就像是在一个DataGrid中. 缺点: 因为最外层有透明的Border,所以没 ...

  3. WPF datagrid 设置表头线与颜色、透明度

    <!--数据网格的列标题样式属性--> <DataGrid.ColumnHeaderStyle> <!--样式类型:DataGridColumnHeader(数据网格列标 ...

  4. WPF DataGrid 样式设置

    隔行换色,鼠标单击,悬浮样式都有,其具体效果如图 1 所示. 图 1 WPF DataGrid 样式设置效果图 其中: 界面设计代码下所示 ? + 查看代码 1 2 3 4 5 6 7 8 9 10 ...

  5. WPF DataGrid自定义样式

    微软的WPF DataGrid中有很多的属性和样式,你可以调整,以寻找合适的(如果你是一名设计师).下面,找到我的小抄造型的网格.它不是100%全面,但它可以让你走得很远,有一些非常有用的技巧和陷阱. ...

  6. WPF DataGrid 样式分享

    原文:WPF DataGrid 样式分享 隔行换色,鼠标单击,悬浮样式都有 先看效果: 代码: <DataGrid AutoGenerateColumns="False" N ...

  7. WPF DataGrid 自动生成行号的方法（通过修改RowHeaderTemplate的方式）

    WPF中的DataGrid自动生成行号的方法有很多,这里记录了一种通过修改 RowHeaderTemplate的方式来生成行号: 方法一: xaml界面: <Window ... xmlns:l ...

  8. ASP.NET Aries DataGrid 配置表头说明文档

    DataGrid 配置表头 字段 中文 说明 Field 字段 注意:mg_ 开头的字段为层级表头 Title 列称 OrderNum 序号 显示的顺序(冻结和非冻结列是两个组的序号) Width 列 ...

  9. WPF DataGrid常用属性记录

    WPF DataGrid常用属性记录 组件常用方法: BeginEdit:使DataGrid进入编辑状态. CancelEdit:取消DataGrid的编辑状态. CollapseRowGroup:闭 ...

随机推荐

  1. Java分层经验

    在学习和使用Java的过程中,我们时常要用到各种工具与技术,它们在某些时候可以大幅度地简化编程,利用好它们,可以让代码更强壮.下面的表格是我总结的关于java开发可能会用到的工具与它们在项目中扮演的角 ...

  2. Rocket - diplomacy - BaseNode

    https://mp.weixin.qq.com/s/eOgNLi_MJ8HJOpepGaaW8Q   简单介绍BaseNode的实现.   ​​   1. You cannot create a n ...

  3. Java实现 LeetCode 685 冗余连接 II（并查集+有向图）

    685. 冗余连接 II 在本问题中,有根树指满足以下条件的有向图.该树只有一个根节点,所有其他节点都是该根节点的后继.每一个节点只有一个父节点,除了根节点没有父节点. 输入一个有向图,该图由一个有着 ...

  4. Java实现 蓝桥杯 算法训练 寻找数组中最大值

    算法训练 寻找数组中最大值 时间限制:1.0s 内存限制:512.0MB 提交此题 问题描述 对于给定整数数组a[],寻找其中最大值,并返回下标. 输入格式 整数数组a[],数组元素个数小于1等于10 ...

  5. Java实现 蓝桥杯VIP 算法训练 字符串逆序

    问题描述 给定一个字符串,将这个串的所有字母逆序后输出. 输入格式 输入包含一个字符串,长度不超过100,字符串中不含空格. 输出格式 输出包含一个字符串,为上面字符串的逆序. 样例输入 tsinse ...

  6. 记一次discuz修改首页图片路径问题

    1.找到图片路径拼装文件 首先打开根目录下的template目录找到首页文件 打开后找到图片列表的拼装位置 // 链接示例: <!--{eval $imagelistkey = getforum ...

  7. 深入剖析AQS

    目录 摘要 AbstractQueuedSynchronizer实现一把锁 ReentrantLock ReentrantLock的特点 Synchronized的基础用法 ReentrantLock ...

  8. 关于领域驱动设计 DDD(Domain-Driven Design)

    以下旨在 理解DDD. 1.     什么是领域? 妈妈好是做母婴新零售的产品,应该属于电商平台,那么电商平台就是一个领域. 同一个领域的系统都有相同的核心业务. eg: 电商领域都有:商品浏览.购物 ...

  9. 跨域问题 - Nginx反向代理

    Nginx反向代理的思路,就是通过Nginx解析URL地址的时候进行判断,将请求转发的具体的服务器上. 解决思路 跨域问题,是由于JavaScript出于安全方面的考虑,不允许跨域调用其他页面的对象. ...

  10. EIGRP-15-其他和高级的EIGRP特性-1-路由器ID

    与很多协议一样, EIGRP也使用了路由器ID (RTD)的概念,用一个4字节的编号来标识某个路由器实例.每个地址家族实例拥有自已独立的RID.工程师可以在一台路由器上,为多个EIGRP进程和地址家族 ...