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
好了，该去吃饭了，祝大家生活愉快！
WPF
WPF ComboBox 使用 ResourceBinding 动态绑定资源键并支持语言切换
【翻译】WPF 中附加行为的介绍 Introduction to Attached Behaviors in WPF
WPF 使用 Expression Design 画图导出及使用 Path 画图
解决 WPF 绑定集合后数据变动界面却不更新的问题（使用 ObservableCollection）
WPF 消息框 TextBox 绑定新数据时让光标和滚动条跳到最下面
WPF 让一组 Button 实现 RadioButton 的当前样式效果
扫一扫
537
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
