前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >WPF DataGrid 通过自定义表头模拟首行固定

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

作者头像
独立观察员
发布2022-12-06 19:02:59
2.3K0
发布2022-12-06 19:02:59
举报

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

独立观察员 2021 年 9 月 25 日

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

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

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

先来看看效果:

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

界面代码结构如下:

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

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

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

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

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

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

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

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

本文参与 腾讯云自媒体同步曝光计划,分享自微信公众号。
原始发表:2021-09-25,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 独立观察员博客 微信公众号,前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体同步曝光计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档