【WPF】DataGrid多表头的样式设计

最新推荐文章于 2024-06-17 18:00:01 发布
最新推荐文章于 2024-06-17 18:00:01 发布
阅读量1.6k 收藏 8
点赞数 1
分类专栏： .Net相关 WPF
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_42930928/article/details/107006167
版权

需求

在使用WPF开发时，使用DataGrid列表显示数据时，有些字段可以进行分组显示，用于更好的表达它们之间存在的某种关系，因此就考虑到要对DataGrid的表头进行扩展，可以显示多行表头，让这些有关联的字段内容显示的更加明了简洁。

image

自定义样式

这段自定义样式可以放在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

芝麻麻雀
关注
  • 1
    点赞
  • 踩
  • 8
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
WPF之Datagrid表头样式的修改
u014489598的博客
01-02 1123
WPF的dataGrid控件表头样式设置，包括表头居中、换行、背景色。
wpf DataGrid复合表头
12-10
总结来说，实现WPF DataGrid的复合表头功能涉及视图模型的设计、数据模板的定义、列的配置以及对列拖放事件的处理。通过这些步骤，我们可以创建出既能清晰展示数据结构，又支持用户交互的复合表头。在实际项目中，...
示例:WPF中DataGrid简单设置合并列头
最新发布
HeBianGu的博客
06-17 822
应用DataGridTemplateColumn自定义列头信息和单元格信息。
WPF中DataGrid动态生成列及自定义表头结构
羽木落凡的博客
08-11 9905
DataGrid动态生成列并实现数据绑定，以及如何实现复杂的表头和列内容
WPF DataGrid 多表头
yb305
01-29 3201
--> -->   /// /// MainWindow.xaml 的交互逻辑 /// pu
WPF DataGrid columns表头根据数据集动态动态生成Demo
qq_33435149的博客
08-16 1628
思路是这样的，数组集合装表头的信息，遍历这个集合，遍历过程中处理一下数据，然后就把每表头信息添加到dataGrid2.Columns.Add(templateColumn);3，声明表头数据集合，再遍历。
WPF自定义datagrid样式单元格样式行列表头Style
上山的人啊，请不要嘲讽下山的神
07-04 2081
WPF DATAGRID通用Style设置
WPF DataGrid 表头筛选
qq_36791193的博客
06-05 1851
WPF DataGrid 表头筛选 DataGridExtensions
WPF之DataGrid表格，自定义表头、自定义单元格
qq_3517289697的博客
05-02 1971
DataGrid控件在WPF中担任着表格的角色，大多用于展现数据，他有着自定义表头、单元格，和数据绑定等效果。
WPF实战之DataGrid隐藏表头
甫式人生
04-07 4160
<DataGrid x:Name="grid1" AutoGenerateColumns="False" HorizontalAlignment="Left" Margin="22,60,0,0" HeadersVisibility="None" VerticalAlignment="Top" Height="136" Width="1326" ItemsSo
WPF多表头技术的实现，支持多行表头
09-16
WPF多表头技术的实现主要涉及到DataGrid控件的自定义，以实现多级分类和多行表头的功能。在实际应用中，这种技术通常用于展现层次结构的数据，例如，表格的第一行可能是类别，第二行是子类别，而列则对应具体的数据...
wpf datagrid排序列表头文字右边的升降箭头
07-05
在Windows Presentation Foundation (WPF) 中，`DataGrid` 是一个强大的控件，常用于显示和操作表格数据。本教程将深入讲解如何实现`DataGrid`的列头排序功能，即点击列表头文字右边的升降箭头进行升序或降序排序。...
wpf DataGrid分组、排序、筛选
02-02
在`DataGrid`中，可以使用`DataGrid.GroupStyle`属性来定义分组样式，而`CollectionViewSource`则是实现数据分组的关键。首先，创建一个`CollectionViewSource`对象，并设置其`GroupDescriptions`属性，指定要基于...
DataGrid 复杂表头
06-05
通过自定义DataGridColumnHeader的样式和使用HierarchicalDataTemplate，我们可以创建出复杂的WPF DataGrid表头，以适应多层次的数据展示需求。这种自定义方法灵活性高，可以根据实际项目的需求进行扩展和调整，从而...
“System.TypeInitializationException”类型的未经处理的异常在 mscorlib.dll 中发生
热门推荐
芝麻麻雀-Asp.Net学习之路
09-04 2万+
今天在程序中需要添加mqttnet的引用，所以项目需要从.netframework 4.0升级到.netframework 4.5.2，把需要在nuget上引用的库也进行了升级，其中升级了Common.Logging.Log4Net1215到Common.Logging.Log4Net208版本。 项目编译没有报错，遂进行CTRL+F5运行，发现项目不能启动，心里一阵发慌，哪里出错了呢？ 使用...
AutoFac在WinForm中的使用
芝麻麻雀-Asp.Net学习之路
09-19 1万+
新建winform项目，命名为WfaAutoFacDemo，使用nuget添加autofac的引用，最新版为4.8.1，直接安装即可  添加一个服务接口：IService和ISecondService，定义如下： namespace WfaAutoFacDemo.Interface { public interface IService { string Do...
OxyPlot在WinForm中的应用
芝麻麻雀-Asp.Net学习之路
08-15 1万+
1、简介（从GitHub上复制） Getting started Use the NuGet package manager to add a reference to OxyPlot (see details below if you want to use pre-release packages) Add a PlotView to your user interface Cre...
wpf datagrid 多层表头
06-02
WPF DataGrid 支持多层表头，可以使用 DataGrid 的 ColumnHeaderStyle 属性来自定义表头样式。 首先，你需要定义表头的层次结构。可以使用 DataGrid 的 ColumnGroups 属性来定义多层表头。例如，下面的代码定义了两个层次的表头： ``` <DataGrid.ColumnHeaderStyle> <Style TargetType="{x:Type DataGridColumnHeader}"> <Setter Property="ContentTemplate"> <Setter.Value> <DataTemplate> <TextBlock Text="{Binding}"/> </DataTemplate> </Setter.Value> </Setter> </Style> </DataGrid.ColumnHeaderStyle> <DataGrid.ColumnGroups> <DataGridGroupHeader x:Name="GroupHeader1" Header="Group 1" FontWeight="Bold"/> <DataGridGroupHeader x:Name="GroupHeader2" Header="Group 2" FontWeight="Bold" ParentGroupHeader="{Binding ElementName=GroupHeader1}"/> </DataGrid.ColumnGroups> ``` 在这个例子中，第一列的表头为 "Group 1"，第二列的表头为 "Group 2"，它们都是加粗的。第二列的表头是第一列的子表头，所以它们之间有一个缩进。 然后，你需要为每个表头单元格定义样式。可以使用 DataGrid 的 ColumnHeaderStyle 属性来定义默认样式，也可以为每个表头单元格定义不同的样式。例如，下面的代码定义了一个简单的表头样式： ``` <Style x:Key="HeaderCellStyle" TargetType="{x:Type DataGridColumnHeader}"> <Setter Property="Background" Value="#CCCCCC"/> <Setter Property="Foreground" Value="Black"/> <Setter Property="HorizontalContentAlignment" Value="Center"/> <Setter Property="VerticalContentAlignment" Value="Center"/> <Setter Property="BorderBrush" Value="#888888"/> <Setter Property="BorderThickness" Value="1"/> <Setter Property="Padding" Value="4"/> </Style> ``` 最后，将表头样式应用到 DataGrid 的每个列上。例如，下面的代码定义了两个列，并将表头样式应用到它们的表头单元格： ``` <DataGrid.Columns> <DataGridTextColumn Header="Column 1" Binding="{Binding Property1}" HeaderStyle="{StaticResource HeaderCellStyle}"/> <DataGridTextColumn Header="Column 2" Binding="{Binding Property2}" HeaderStyle="{StaticResource HeaderCellStyle}"/> </DataGrid.Columns> ``` 这样，你就可以创建一个具有多层表头的 WPF DataGrid 了。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值