引言

上一篇中 WPF --- 重寫DataGrid樣式，因新產品UI需要，重寫了一下微軟 WPF 原生的 DataGrid 的樣式，包含如下內容：

• 基礎設置，一些基本背景色，字體顏色等。
• 滾動條樣式。
• 實現圓角表格，重寫表格的一些基礎樣式，例如 CellStyle ，RowStyle,RowHeaderStyle, ColumnHeaderStyle等。

重寫過程中，遇到了兩個問題：

1. 如何獲取 WPF 原生的 DataGrid 的樣式？
2. 滾動條樣式中，如何固定滾動條長度？

本篇文章分享一下這兩個問題的解決辦法。

解決方法

我來分別分享一下我遇到的這兩個問題。

問題1

第一個，如何獲取 WPF 原生的 DataGrid 的樣式？

這個問題不限于原生的 DataGrid 的樣式，其他的一些樣式比如 checkBox,RadioButton, ComboBox。

這些控件對于一些初學者來說，很難理解他是怎么實現的。

比如 ComboBox 控件，我剛開始學習WPF時的時候，我就不理解這個是怎么實現的，我后來還是通過查詢微軟官方文檔 [1]ComboBox Styles and Templates ，文檔里給出了 ComboBox Styles 和 ComboBox Templates ，看完設計代碼之后才明白原生的ComBox控件是怎么實現的。

那么用翻閱官方文檔的方式效率太低了，所以我這回找了一個效率很高的方法嗎，就是是通過 Blend（全稱：Microsoft Blend for Visual Studio），這個是跟隨 Visual Studio 一起安裝的，平常我也使用 Blend ，做一些自定義控件和動畫效果等，十分好用。接下來演示一下如何獲取 ComboBox 的原生樣式。

第一步：

使用 Blend 創建一個 WPF 項目，再窗體中添加一個 ComboBox 。

第二步：

選中 ComboBox ，在設計視圖左上角點擊 ComboBox 下拉框，再點擊“編輯模板”，再點擊“編輯副本”。

這時會彈出創建資源的窗體，可以選擇你創建樣式的形式是什么。

• 關鍵字選項：可以選擇你創建的樣式是否帶 Key，若不帶 Key 則默認應用在所有該類型控件上。
• 定義位置選項：“應用程序”選項會將該樣式創建到 App.xaml 文件中。“此文檔”選項會將該樣式創建到當前窗體的 Window.Resources 中，最后一個“資源字典”選項，則會創建一個新的資源字典文件或者添加到已有資源字典文件。

第三步：

我這里選擇，生成到當前文件 Window.Resources 中且帶 Key 的樣式，然后他就會生成原生的樣式代碼。如下所示，這里代碼太多，折疊展示。

第四步：

可以看到它生成了一堆的資源，這時候我們只需要找我們想要的那一部分，比如 ComboBoxTemplate ，從代碼中就可以看出，ComboBox 主要有三部分組成

• Popup：它的作用就是當 ToggleButton 的 IsChecked 為true時，展開其內容，它的內容就是 ScrollViewer，就是我們看到的下拉彈出的內容了。
• ToggleButton： 這個就是右側那個上下尖括號符號按鈕，用于打開或關閉 Popup 內容。
• ContentPresenter：內容容器，可以自定義任何控件模板、數據模板或樣式在其中展示。

所以，到此為止，我們就明白了原生的 ComboBox 是怎么實現的了，而且有了這個原生樣式，就可以在此基礎之上進行修改，美化，從而演變成我們想要的樣子。

問題2

第二個問題， 滾動條樣式中，如何固定滾動條長度？

在原生的滾動條樣式中，縱方向上的滾動條的高度是跟隨你窗口的大小和內容的多少而改變的，窗口大內容少，滾動條的高度就越大，反之亦然。

我調試了很久，包括重寫 Thumb 的樣式，修改 Thumb 的高度，都一直不生效，最后在官方文檔 [2]How to: Customize the Thumb Size on a ScrollBar 中找到了解決方案，就是通過設置HorizontalScrollBarButtonWidthKey 來固定滾動條長度。文中將其

小結

Blend 本身就是一個專業級的界面設計工具，可以大大提高我們創建豐富、交互式的用戶界面（UI）和用戶體驗（UX）設計的效率。

而通過 Blend 獲取原生樣式，閱讀原生樣式，非常有利于理解控件設計的，在此基礎上進行修改，美化也是能夠事半功倍的，強烈建議大家學會。

參考

[1] https://learn.microsoft.com/en-us/dotnet/desktop/wpf/controls/combobox-styles-and-templates?view=netframeworkdesktop-4.8&viewFallbackFrom=netdesktop-6.0

[2] https://learn.microsoft.com/en-us/dotnet/desktop/wpf/controls/how-to-customize-the-thumb-size-on-a-scrollbar?view=netframeworkdesktop-4.8&viewFallbackFrom=netdesktop-6.0

總結

以上是生活随笔為你收集整理的WPF --- 如何重写WPF原生控件样式的全部內容，希望文章能夠幫你解決所遇到的問題。

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