WPF DataGrid 通过自定义表头模拟首行固定

WPF DataGrid 通过自定义表头模拟首行固定

WPF DataGrid 通过自定义表头模拟首行固定

独立观察员 2021 年 9 月 25 日

 

最近工作中要在 WPF 中做个表格,自然首选就是 DataGrid 控件了。问题是,UI 设计的表格是在首行有一个新增按钮,那一行样式和其它数据行是一样的,就在表头下面那行。

一开始,参照了其它界面,这一行还是通过数据行来做,只不过绑定的数据项中有一个特殊的属性来表明这是个特殊行,界面上通过数据模板选择器来自动展现出特别的内容(新增按钮及相关文字,并把其它字段内容隐藏)。做好之后,工作地很好,可惜好景不长,同事提醒说数据多的话,出现滚动条,这一行要固定住,不过有个属性可以直接设置。后来发现,他记错了,属性是有,不过是用来设置前几列固定的(FrozenColumnCount),而关于行固定,则没有提供任何相关功能。

经过搜索解决方案,发现没有能直接方便地使用的,有个国外大佬在问答网站上提供了尾行固定的方案,并且说了一句,首行固定更简单,只需要自定义表头就行了。那就听他的吧,我们来看看怎么通过自定义表头,来达到模拟首行固定的效果。

 

先来看看效果:

%title插图%num

%title插图%num

 

就是说,有个加号的那行,实际上是属于表头的,这个通过滚动条的范围也能看出(这里滚动条把表头遮住了,这个也可以改掉,之后再说吧)。

 

界面代码结构如下:

%title插图%num

 

可以看到资源里有一个普通表头样式、一个用于特殊列的特殊表头样式,还有行样式、单元格样式等,还有个包含了新增按钮的控件模板的样式。最后就是表格控件 DataGrid 了,使用了上面这些资源,默认使用的是普通表头样式,所以普通列就不用特地指定样式了。另外,表格通过 ItemsSource 绑定了数据,通过 SelectedItem 绑定了选中项。

 

先来看看普通表头样式,这里实际是设置表头中每一格的样式。主要就是在原来表头的基础上新增了一行,第一行还是放原来的表头内容(基本就是标题文本),然后第二行就是空出来,给有需要的特殊列留好空间,或者说是与特殊列统一,具体见下图:

%title插图%num

 

特殊表头样式继承于普通表头样式,所以只需要对控件模板进行设置即可。同样是分为两行,并保留了普通表头的框架及样式,然后把内容占位元素 ContentPresenter 移到外面,并让它占据两行覆盖在上面(具体内容则由使用的列来设置),如下图:

%title插图%num

 

顺便来看看新增操作的控件样式,也就是使用 Border 做了个加号,并把 MouseDown 事件转换成相关命令,整体应用于某个内容控件 ContentControl,如下图。当然,使用 Button 来做也是可以的。

%title插图%num

 

最后来看 DataGrid 表格的列集合,每列都是 DataGridTemplateColumn 类型。前面也说过 DataGrid 指定了普通表头样式作为默认的表头样式,所以普通列就不用额外设置了,而且由于内容简单,所以直接使用 Header 属性设置表头内容(列标题)。单元格的数据内容,都是设置了数据模板 DataTemplate,普通列是绑定了类的某个属性,特殊列这里是一个删除按钮。关键的是特殊列的表头,首先是指定了表头样式,然后通过 Header 标签来设置内容,内容同样是分为两行,第一行就是列标题内容,第二行通过一个内容控件 ContentControl 将那个加号加载进来。整个表头内容占据的就是特殊表头样式中那个同样跨了两行的 ContentPresenter,只需要设置内容,不需要设置框架和样式,因为已经在特殊列表头样式中设置好了。

%title插图%num

 

当然,方法有很多,具体细节每个人写的可能也不一样。本文只是设置了一列特殊列,大家可以根据具体业务需求自行发挥。下面给出源码地址,主要看本文介绍的内容,其它操作逻辑暂时比较简陋。主项目是 .NET 5 的,然后,克隆下载源码需注意下载子模块,可以参考《通过 GitExtensions 来使用 Git 子模块功能》。

 

源码地址:https://gitee.com/dlgcy/DLGCY_WPFPractice/tree/Blog20210925

%title插图%num

 

好了,该去吃饭了,祝大家生活愉快!

 

原创文章,转载请注明: 转载自 独立观察员(dlgcy.com)

本文链接地址: [WPF DataGrid 通过自定义表头模拟首行固定](https://dlgcy.com/wpf-datagrid-custom-header-as-fixed-first-row/)

关注微信公众号 独立观察员博客(DLGCY_BLOG) 第一时间获取最新文章

%title插图%num

发表评论