需求

在使用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. Rocket - util - IDPool

    https://mp.weixin.qq.com/s/Pe7FGKzfRufzzYDrl0fQ7g   介绍IDPool的实现.   ​​   1. 基本介绍   实现从ID池中分配和释放ID的功能. ...

  2. 带你学够浪：Go语言基础系列-环境配置和 Hello world

    文章每周持续更新,原创不易,「三连」让更多人看到是对我最大的肯定.可以微信搜索公众号「 后端技术学堂 」第一时间阅读(一般比博客早更新一到两篇) 前面几周陆陆续续写了一些后端技术的文章,包括数据库.微 ...

  3. Spring Boot笔记(三) springboot 集成 Quartz 定时任务

    个人博客网:https://wushaopei.github.io/    (你想要这里多有) 1. 在 pom.xml 中 添加 Quartz 所需要 的 依赖 <!--定时器 quartz- ...

  4. Java实现 LeetCode 521 最长特殊序列 Ⅰ(出题人：“就是喜欢看你们不敢相信那么简单，又不敢提交的样子。”)

    521. 最长特殊序列 Ⅰ 给定两个字符串,你需要从这两个字符串中找出最长的特殊序列.最长特殊序列定义如下:该序列为某字符串独有的最长子序列(即不能是其他字符串的子序列). 子序列可以通过删去字符串中 ...

  5. Java实现 蓝桥杯 历届真题 稍大的串

    串可以按照字典序进行比较.例如: abcd 小于 abdc 如果给定一个串,打乱组成它的字母,重新排列,可以得到许多不同的串,在这些不同的串中,有一个串刚好给定的串稍微大一些.科学地说:它是大于已知串 ...

  6. Java实现格子取数问题

    1 问题描述 有n*n个格子,每个格子里有正数或者0,从最左上角往最右下角走,只能向下和向右走,一共走两次(即从左上角往右下角走两趟),把所有经过的格子里的数加起来,求总和的最大值.如果两次经过同一个 ...

  7. 【JAVA习题十九】利用递归方法求5!。

    package erase; public class 用递归法求5的阶乘 { public static void main(String[] args) { // TODO Auto-genera ...

  8. 使用wrk进行http压力测试

    Posted by 微博@Yangsc_o 原创文章,版权声明:自由转载-非商用-非衍生-保持署名 | Creative Commons BY-NC-ND 3.0 最近做了一些服务器的工作,在做htt ...

  9. 关于wifi营销的看过来

    亲测可用.对于一个开发者来说,终于如获至宝.详情联系qq2455994690.源码可二开.包括微信一键关注上网,手机验证码上网.

  10. 用turtle画蛇

    import turtle def drawSnake(rad,angle,len,nackrad): for i in range(len): turtle.circle(rad,angle) #画 ...