需求

在使用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. Chisel3 - Tutorial - Tbl

    https://mp.weixin.qq.com/s/e8vJ8claauBtiuedxYYaJw   实现可以动态索引的表.   参考链接: https://github.com/ucb-bar/c ...

  2. Mysql安装与设置用户名、密码

    个人博客网:https://wushaopei.github.io/    (你想要这里多有) 关于MySQL程序中数据库调度的流程图解: ​ 1-MySql数据库的安装 ​ 安装前要注意,看看当前系 ...

  3. 第五届蓝桥杯JavaA组国(决)赛真题

    解题代码部分来自网友,如果有不对的地方,欢迎各位大佬评论 题目1.海盗分金币 有5个海盗,相约进行一次帆船比赛. 比赛中天气发生突变,他们被冲散了. 恰巧,他们都先后经过途中的一个无名的荒岛,并且每个 ...

  4. java实现排座位

    ** 排座位** 要安排:3个A国人,3个B国人,3个C国人坐成一排. 要求不能使连续的3个人是同一个国籍. 求所有不同方案的总数? 参考答案: 283824 public class Main1 { ...

  5. DEV控件之TreeList使用

    绑定DataTable 直接设置DataSource即可,同时需要设置KeyFieldName和ParentFieldName两个属性,好处就是,无需像TreeView一样去递归节点,设置了这两个属性 ...

  6. win7 64位系统怎么使用debug

    安装DOSbox软件 下载个debug.exe然后把这放到D盘或E盘的根目录下 然后启动dosbox软件,在下面输入 mount c d:\ enter键 c: enter键 输入debug命令就ok ...

  7. 利用mitmproxy实现抖音Cookie，设备ID获取(一)

    先讲解一下思路,是利用mitmproxy代理https协议,从而判定抖音个人信息接口,在个人信息接口的返回体接收时将用户信息数据,以及Header头(主要是Cookie),Query体(包含设备ID) ...

  8. 数据结构与算法-python描述-双向链表

    # coding:utf-8 # 双向链表的相关操作: # is_empty() 链表是否为空 # length() 链表长度 # travel() 遍历链表 # add(item) 链表头部添加 # ...

  9. PAT1040 Longest Symmetric String (25分) 中心扩展法+动态规划

    题目 Given a string, you are supposed to output the length of the longest symmetric sub-string. For ex ...

  10. VS2019制作的安装包，默认安装到C盘快捷方式无法打开

    先讲讲如何制作安装包 1.下载Visual Studio Installer 1)下载链接https://marketplace.visualstudio.com/items?itemName=Vis ...