WPF DataGrid 通過自定義表頭模擬首行固定

獨立觀察員 2021 年 9 月 25 日

最近工作中要在?WPF?中做個表格，自然首選就是?DataGrid?控件了。問題是，UI 設計的表格是在首行有一個新增按鈕，那一行樣式和其它數(shù)據(jù)行是一樣的，就在表頭下面那行。

一開始，參照了其它界面，這一行還是通過數(shù)據(jù)行來做，只不過綁定的數(shù)據(jù)項中有一個特殊的屬性來表明這是個特殊行，界面上通過數(shù)據(jù)模板選擇器來自動展現(xiàn)出特別的內容（新增按鈕及相關文字，并把其它字段內容隱藏）。做好之后，工作地很好，可惜好景不長，同事提醒說數(shù)據(jù)多的話，出現(xiàn)滾動條，這一行要固定住，不過有個屬性可以直接設置。后來發(fā)現(xiàn)，他記錯了，屬性是有，不過是用來設置前幾列固定的（FrozenColumnCount），而關于行固定，則沒有提供任何相關功能。

經(jīng)過搜索解決方案，發(fā)現(xiàn)沒有能直接方便地使用的，有個國外大佬在問答網(wǎng)站上提供了尾行固定的方案，并且說了一句，首行固定更簡單，只需要自定義表頭就行了。那就聽他的吧，我們來看看怎么通過自定義表頭，來達到模擬首行固定的效果。

先來看看效果：

就是說，有個加號的那行，實際上是屬于表頭的，這個通過滾動條的范圍也能看出（這里滾動條把表頭遮住了，這個也可以改掉，之后再說吧）。

界面代碼結構如下：

可以看到資源里有一個普通表頭樣式、一個用于特殊列的特殊表頭樣式，還有行樣式、單元格樣式等，還有個包含了新增按鈕的控件模板的樣式。最后就是表格控件?DataGrid?了，使用了上面這些資源，默認使用的是普通表頭樣式，所以普通列就不用特地指定樣式了。另外，表格通過 ItemsSource 綁定了數(shù)據(jù)，通過 SelectedItem 綁定了選中項。?

先來看看普通表頭樣式，這里實際是設置表頭中每一格的樣式。主要就是在原來表頭的基礎上新增了一行，第一行還是放原來的表頭內容（基本就是標題文本），然后第二行就是空出來，給有需要的特殊列留好空間，或者說是與特殊列統(tǒng)一，具體見下圖：

?特殊表頭樣式繼承于普通表頭樣式，所以只需要對控件模板進行設置即可。同樣是分為兩行，并保留了普通表頭的框架及樣式，然后把內容占位元素 ContentPresenter 移到外面，并讓它占據(jù)兩行覆蓋在上面（具體內容則由使用的列來設置），如下圖：

順便來看看新增操作的控件樣式，也就是使用 Border 做了個加號，并把 MouseDown 事件轉換成相關命令，整體應用于某個內容控件 ContentControl，如下圖。當然，使用 Button 來做也是可以的。

最后來看 DataGrid 表格的列集合，每列都是 DataGridTemplateColumn 類型。前面也說過 DataGrid 指定了普通表頭樣式作為默認的表頭樣式，所以普通列就不用額外設置了，而且由于內容簡單，所以直接使用 Header 屬性設置表頭內容（列標題）。單元格的數(shù)據(jù)內容，都是設置了數(shù)據(jù)模板 DataTemplate，普通列是綁定了類的某個屬性，特殊列這里是一個刪除按鈕。關鍵的是特殊列的表頭，首先是指定了表頭樣式，然后通過 Header 標簽來設置內容，內容同樣是分為兩行，第一行就是列標題內容，第二行通過一個內容控件 ContentControl 將那個加號加載進來。整個表頭內容占據(jù)的就是特殊表頭樣式中那個同樣跨了兩行的 ContentPresenter，只需要設置內容，不需要設置框架和樣式，因為已經(jīng)在特殊列表頭樣式中設置好了。

?當然，方法有很多，具體細節(jié)每個人寫的可能也不一樣。本文只是設置了一列特殊列，大家可以根據(jù)具體業(yè)務需求自行發(fā)揮。下面給出源碼地址，主要看本文介紹的內容，其它操作邏輯暫時比較簡陋。主項目是 .NET 5 的，然后，克隆下載源碼需注意下載子模塊，可以參考《通過 GitExtensions 來使用 Git 子模塊功能》。?

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

?好了，該去吃飯了，祝大家生活愉快！?

WPF

WPF ComboBox 使用 ResourceBinding 動態(tài)綁定資源鍵并支持語言切換

【翻譯】WPF 中附加行為的介紹 Introduction to Attached Behaviors in WPF

WPF 使用 Expression Design 畫圖導出及使用 Path 畫圖

WPF?MVVM?彈框之等待框

解決 WPF 綁定集合后數(shù)據(jù)變動界面卻不更新的問題（使用 ObservableCollection）

WPF?消息框?TextBox?綁定新數(shù)據(jù)時讓光標和滾動條跳到最下面

真?WPF?按鈕拖動和調整大小

WPF?MVVM?模式下的彈窗

WPF?讓一組 Button 實現(xiàn)?RadioButton?的當前樣式效果

WPF?原生綁定和命令功能使用指南

WPF?用戶控件的自定義依賴屬性在?MVVM?模式下的使用備忘

在WPF的MVVM模式中使用OCX組件

總結

以上是生活随笔為你收集整理的WPF DataGrid 通过自定义表头模拟首行固定的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內容還不錯，歡迎將生活随笔推薦給好友。