需求

在使用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. 数字电路建模 - jchdl

    https://mp.weixin.qq.com/s/uWU6i30_q7wJT3yVJ8yqnQ   jchdl:Jianchang Constructed Hardware Description ...

  2. Java实现 LeetCode 999 车的可用捕获量（简单搜索）

    999. 车的可用捕获量 在一个 8 x 8 的棋盘上,有一个白色车(rook).也可能有空方块,白色的象(bishop)和黑色的卒(pawn).它们分别以字符 "R"," ...

  3. Java实现 蓝桥杯 算法训练 矩阵乘法

    算法训练 矩阵乘法 时间限制:1.0s 内存限制:512.0MB 提交此题 问题描述 输入两个矩阵,分别是ms,sn大小.输出两个矩阵相乘的结果. 输入格式 第一行,空格隔开的三个正整数m,s,n(均 ...

  4. Java实现 LeetCode 546 移除盒子（递归，vivo秋招）

    546. 移除盒子 给出一些不同颜色的盒子,盒子的颜色由数字表示,即不同的数字表示不同的颜色. 你将经过若干轮操作去去掉盒子,直到所有的盒子都去掉为止.每一轮你可以移除具有相同颜色的连续 k 个盒子( ...

  5. Java实现 LeetCode 303 区域和检索 - 数组不可变

    303. 区域和检索 - 数组不可变 给定一个整数数组 nums,求出数组从索引 i 到 j (i ≤ j) 范围内元素的总和,包含 i, j 两点. 示例: 给定 nums = [-2, 0, 3, ...

  6. Java实现蓝桥杯墓地雕塑

    墓地雕塑 问题描述 在一个周长为10000的圆上等距分布着n个雕塑.现在又有m个新雕塑加入(位置可以随意放), 希望所有n+m个雕塑在圆周上均匀分布.这就需要移动其中一些原有的雕塑.要求n个雕塑移动的 ...

  7. Java实现 LeetCode 337 打家劫舍 III（三）

    337. 打家劫舍 III 在上次打劫完一条街道之后和一圈房屋后,小偷又发现了一个新的可行窃的地区.这个地区只有一个入口,我们称之为"根". 除了"根"之外,每 ...

  8. Java实现 蓝桥杯VIP 算法提高 3000米排名预测

    算法提高 3000米排名预测 时间限制:1.0s 内存限制:256.0MB 问题描述 3000米长跑时,围观党们兴高采烈地预测着最后的排名.因为他们来自不同的班,对所有运动员不一定都了解,于是他们分别 ...

  9. java实现第五届蓝桥杯信号匹配

    信号匹配 从X星球接收了一个数字信号序列. 现有一个已知的样板序列.需要在信号序列中查找它首次出现的位置.这类似于串的匹配操作. 如果信号序列较长,样板序列中重复数字较多,就应当注意比较的策略了.可以 ...

  10. postman接口超时设置，用于debug等断点调试

    Settings->General->Request Timeout in ms(0 for infinity):设置请求超时的时间,默认为0