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

最新推荐文章于 2024-06-17 18:00:01 发布
最新推荐文章于 2024-06-17 18:00:01 发布
阅读量1k 收藏 6
点赞数 1

需求

在使用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

— END —

「扩展阅读」

[GitHub] 75+的 C# 数据结构和算法实现

谁说.NET不适合搞BD，ML、AI

推荐一个集录屏、截图、音频于一体的软件给大家

10个用于C＃.NET开发的基本调试工具

Xamarin.Forms 二维码扫描实践

在Asp.Net Core MVC 开发过程中遇到的问题总结

前端小白在asp.net core mvc中使用ECharts

基于Asp.Net Core MVC和AdminLTE的响应式管理后台之侧边栏处理

[译]如何在C#中调试LINQ查询

C# 语言性能提升方法

使用MQTTnet搭建Mqtt服务器

OxyPlot在WinForm中的应用

「公众号推荐」

回复：「redis」 获取5.0.9版的Windows安装包（exe）

回复：「ca」 获取  截图、GIF等工具三件套，便携版和安装版全部包括

回复：「新书」 获取《ASP.NET Core 3框架揭秘》

回复：「进阶」 获取 《CLR via C#（第4版）》购书链接

回复：「本质论」获取 《C# 7.0本质论》购书链接

回复：「WPF」获取 WPF 电子书

dotNET跨平台
关注
  • 1
    点赞
  • 踩
  • 6
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
WPF之Datagrid表头样式的修改
u014489598的博客
01-02 1127
WPF的dataGrid控件表头样式设置，包括表头居中、换行、背景色。
WPF设置DataGrid的表头样式
weixin_33722405的博客
04-28 3805
ColumnHeaderStyle 属性 一般来讲列表头是用户首先注意的内容，那么如何在DataGrid 中设计一个美观的表头呢。我们既可以在<DataGrid>中通过<DataGrid.ColumnHeaderStyle>来全局定义；也可以针对个别列在<DataGrid.Columns>中通过<DataGridColumn.Hea...
WPF多表头技术的实现，支持多行表头
09-16
该方案是现在项目中已使用的方案。实现起来比较简单，但不具有通用性，不同数据DataGrid需要指定不同的TextBlock跨不同列。实现起来局限性，目前不能冻结列。而且对列只可以是全部已知。
示例:WPF中DataGrid简单设置合并列头
最新发布
HeBianGu的博客
06-17 830
应用DataGridTemplateColumn自定义列头信息和单元格信息。
【WPF学习手记】 DataGrid表头和内容样式
Taosy
08-10 9284
表头样式、内容居中样式和多行显示样式。 表头样式和内容居中样式 <Controls:MetroWindow.Resources> <!-- 表头样式 --> <Style x:Key="dataGridHeaderStyle" TargetType="DataGridColumnHeader"> &...
WPF 自定义DataGrid控件样式模板5个
03-09 9495
要实现表头拖动，使用上面的样式代码是不行的，上面的样式代码去掉了拖动的控件。上面的代码实现了隔行换色的效果，但是没有鼠标选中效果。CanUserReorderColumns：获取或设置一个值用来判断是否允许用户重新排列表列的位置。AreRowGroupHeadersFrozen：获取或设置一个值用来判断是否冻结分组行的头部。AreRowDetailsFrozen：获取或设置一个值用来判断是否冻结每行内容的详细信息。RowDetailsTemplate：获取或设置被用于显示行详细部分的内容的模板。
WPF中DataGrid动态生成列及自定义表头结构
羽木落凡的博客
08-11 9916
DataGrid动态生成列并实现数据绑定，以及如何实现复杂的表头和列内容
WPF （DataGridRowHeaderStyle）实现自义定行样式 并绑定数据
时意
10-08 5480
功能阐述 就上面那图片 刚开始 考虑使用 RowHeaderTemplate 来实现 发现总绑定不上数据 上官网查了一下 不支持上下文绑定 fffffffffffff 只能考虑样式了 经验不足 经验不足~ 直接上前后台源码了 XAML <Window xmlns="http://schemas.microsoft.com/win...
WPF DataGrid多表头/列头，多行头，合并单元格，一列占据多行
08-15 1756
先上效果图： 思路说明：这是两个DataGrid，没有嵌套，位置和高度保持一致，在加上ScrollViewer滚动条，这就像是在一个DataGrid中。 缺点： 因为最外层有透明的Border，所以没有办法去点击任何一个单元格，也选中不了。 也可以将最层的Border去掉，但是这样一来，鼠标便不能在窗体的任意位置进行滚动。选中单元格的时候不会选择到两个Datagrid的...
WPF自定义datagrid样式单元格样式行列表头Style
上山的人啊，请不要嘲讽下山的神
07-04 2082
WPF DATAGRID通用Style设置
WPF DataGrid 多表头
yb305
01-29 3201
--> -->   /// /// MainWindow.xaml 的交互逻辑 /// pu
datagrid wpf 刷新数据_【WPF】DataGrid多表头的样式设计
weixin_30131105的博客
12-30 120
需求在使用WPF开发时，使用DataGrid列表显示数据时，有些字段可以进行分组显示，用于更好的表达它们之间存在的某种关系，因此就考虑到要对DataGrid的表头进行扩展，可以显示多行表头，让这些有关联的字段内容显示的更加明了简洁。自定义样式这段自定义样式可以放在MainWindow.xaml文件中，或者自己定义一个存放样式文件的xaml进行存放。 这里在模版里面使用的第一个Grid，是用于总的显...
wpf DataGrid复合表头
12-10
总结来说，实现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多表头表格实现
u013319633的博客
12-25 839
该控件基于ListView标准模板开发，可以在模板中自由修改控件外观，也可以使用第三方UI库，以下为使用MaterialDesign库的效果。
WPF Grid + DataGrid多表头 动态列实现
u014311306的博客
12-19 2246
使用了Grid + DataGrid 显示 Grid部分（表头部分）用了GridSplitter作为列的区分，可以调节列宽，（未实现自动排序） DataGrid部分，隐藏DataGrid的Header部分 界面部分： <Grid> <Grid.RowDefinitions> <RowDefinition Height="6
WPF DataGrid自定义样式模板 列表头分隔线 滚动条滑块大小设定 动态数据绑定和更新
qq_20758141的博客
06-28 8299
[ 效果图回去放，代码在后面 ][ 用到的一些定义如果没有附代码可以随便写个看下效果，因为直接从项目中copy出来的，难免漏掉点点... ]首先，有几点需要注意：1.表头样式 [ DataGridColumnHeader ]  默认带分割线，但每列表头左右分割线都占1px，也就是说假如有三列：a.  表格最左、右边应该不需要分割线，但默认的有1pxb.  中间需要1px分割线，但默认有2px（相邻...
wpf datagrid 多层表头
06-02
WPF DataGrid 支持多层表头，可以使用 DataGrid 的 ColumnHeaderStyle 属性来自定义表头样式。 首先，你需要定义表头的层次结构。可以使用 DataGrid 的 ColumnGroups 属性来定义多层表头。例如，下面的代码定义了两...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值