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

最新推荐文章于 2024-05-02 21:49:27 发布
最新推荐文章于 2024-05-02 21:49:27 发布
阅读量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
    评论
专栏目录
DataGrid 自定义DataGridColumnheader
SpringDou的博客
12-02 6007
学习WPF 中的DataGrid, 自定义其中的Header，column模板。
WPF的DataGrid设置标题头
ultramand的博客
03-01 1854
上述示例中，BorderThickness属性设置为"0,0,0,2"表示只显示底部的分割线，厚度为2个像素；在给定的代码中，列头的内容将水平居中对齐，背景和前景颜色分别为白色和黑色，边框厚度为 1 像素，边框颜色为浅灰色。要设置DataGrid标题头的分割线、背景色和前景色等属性，您可以使用DataGrid的样式和模板来自定义标题头的外观。上述示例中，Foreground属性设置为"#FFFFFF"表示标题头的前景色（文字颜色）为白色。：设置列头的前景颜色（文字颜色）为黑色 (#000000)。
WPF之DataGrid表格，自定义表头、自定义单元格
最新发布
qq_3517289697的博客
05-02 1672
DataGrid控件在WPF中担任着表格的角色，大多用于展现数据，他有着自定义表头、单元格，和数据绑定等效果。
WPF多表头技术探索总结
weixin_34197488的博客
10-31 163
方案一：Grid+TextBlock嵌套DataGrid方式。 该方案是现在项目中已使用的方案。实现起来比较简单，但不具有通用性，不同数据DataGrid需要指定不同的TextBlock跨不同列。实现起来局限性，目前不能冻结列。    http://social.msdn.microsoft.com/Forums/en-US/wpf/thread/1e414159-70f6-4be3-9be5...
WPF DataGrid 多表头
yb305
01-29 3179
--> -->   /// /// MainWindow.xaml 的交互逻辑 /// pu
WPF中DataGrid动态生成列及自定义表头结构
羽木落凡的博客
08-11 9742
DataGrid动态生成列并实现数据绑定，以及如何实现复杂的表头和列内容
wpf DataGrid复合表头
12-10
总结来说，实现WPF DataGrid的复合表头功能涉及视图模型的设计、数据模板的定义、列的配置以及对列拖放事件的处理。通过这些步骤，我们可以创建出既能清晰展示数据结构，又支持用户交互的复合表头。在实际项目中，...
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表头，以适应多层次的数据展示需求。这种自定义方法灵活性高，可以根据实际项目的需求进行扩展和调整，从而...
WPF设置DataGrid的表头样式
weixin_33722405的博客
04-28 3800
ColumnHeaderStyle 属性 一般来讲列表头是用户首先注意的内容，那么如何在DataGrid 中设计一个美观的表头呢。我们既可以在<DataGrid>中通过<DataGrid.ColumnHeaderStyle>来全局定义；也可以针对个别列在<DataGrid.Columns>中通过<DataGridColumn.Hea...
WPF多表头技术探索
yguang_zh的专栏
09-16 4496
Grid+Lable+border嵌套DataGrid方式。 该方案是现在项目中已使用的方案。实现起来比较简单，但不具有通用性，不同数据DataGrid需要指定不同的TextBlock跨不同列。实现起来局限性，目前不能冻结列。而且列名必须是已知的列名。   直接上图：   图为我实现的简单的例子。源码在下面将贴出，可能有点多，有兴趣的朋友也可以去   CSDN  进行下载（http:/
WPF DataGrid多表头/列头，多行头，合并单元格，一列占据多行
weixin_30507269的博客
08-30 660
WPF DataGrid多表头/列头，多行头，合并单元格，一列占据多行 原文:WPF DataGrid多表头/列头，多行头，合并单元格，一列占据多行 先上效果图： 思路说明：这是两个DataGrid，没有嵌套，位置和高度保持一致，在加上ScrollViewer滚动条，这就像是在一个DataGrid中。 缺点： 因为最外层有透明的B...
WPF DATAGRID 双重标题
xz_bin的博客
10-25 1800
本人新手，想要实现WPF DATAGRID 双重标题 ，在网上百度了好久，都没有发现合适的，只能自己想办法实现， 大体说一下我的实现方式： 在datagrid上方增加一个grid，grid的列宽binding    datagrid的列宽，然后将grid的列进行合并，这样就做成了双重表头的效果，为了实现下面datagrid与上方grid的联动效果，我将上方grid嵌套进入ScrollViewe
EasyUI-Datagrid二维表格：多表头
一支穿云箭
04-24 9006
人力资源管理有个做二维表格的需求，客户的需求是这样的，如图：        由于是从零开始，没有参考，我就想用easyui 做一下。分析需求，其实难点就三个：1、是将上表头的部分单元格合并。2、是在左侧显示标题。3、是页内单元格可以编辑。          对于easyui来说，单元格合并比较简单，写table时的核心的代码就两句：rowspan 和colspan。其中，
C# DataGridView实现二维表头
m0_67599428的博客
03-23 3002
VS2022 C# windowForm自定义控件DataGridView实现二维表头
WPF Datagrid后台合并表头并数据绑定
IT界的小菜比
04-03 955
效果图 UI页面 <Window x:Class="WpfApplication2.MainWindow" xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" Title="MainWindow" Height="350" Width="525">..
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、付费专栏及课程。

余额充值