前言
每次開發(fā)滑塊控件的樣式都要花很久去讀樣式代碼，感覺有點(diǎn)記不牢，所以特此備忘。
自定義滑塊樣式
首先創(chuàng)建項(xiàng)目，添加Slider控件。
然后獲取Slider的Window樣式，如下圖操作。
然后彈出界面如下.我們點(diǎn)擊確定。
點(diǎn)擊確定后，我們的頁面的Resources中，增加了一系列樣式代碼，而滑塊代碼會(huì)被修改為如下樣子：
可以看到，系統(tǒng)為我們的Slider控件增加了樣式——Style="{DynamicResource SliderStyle1}"
現(xiàn)在我們查看樣式SliderStyle1，F(xiàn)12跟蹤到定義。
上述代碼中我們可以看發(fā)現(xiàn)Slider使用的模板是SliderHorizontal，但當(dāng)他的排列方向?yàn)閂ertical時(shí)，則使用SliderVertical模板。
因?yàn)镾lider控件默認(rèn)是橫向布局，所以我們先修改SliderHorizontal模板，對(duì)Slider進(jìn)行下美化。
同樣，我們繼續(xù)F12跟進(jìn)SliderHorizontal的定義。
SliderHorizontal模板的定義比較多，這里直接定義到重點(diǎn)內(nèi)容——軌道。
首先定位到代碼【Border x:Name="TrackBackground"】，這里的TrackBackground是控制滑塊背景顏色的，我們修改其背景顏色和邊框顏色。
得到效果如下：
但我們有時(shí)候需要拖動(dòng)前后顏色不一樣，此時(shí)就靠背景修改就不夠了。
在SliderHorizontal模板中找到DecreaseRepeatButton和IncreaseRepeatButton；這兩個(gè)一個(gè)是拖動(dòng)前覆蓋顏色，一個(gè)是拖動(dòng)后覆蓋顏色。
修改代碼如下：
得到效果如下：
注意這里的Height一定要給值。
現(xiàn)在，我們?cè)O(shè)置好了軌道，可當(dāng)前的滑塊的顏色我們有點(diǎn)不太滿意，所以我們?cè)賮硖幚硐禄瑝K。
滑塊模板的模板是上方代碼中粉色標(biāo)記的代碼——Thumb。
可以看到Thumb使用的是SliderThumbHorizontalDefault模板，所以，我們繼續(xù)F12跟進(jìn)SliderThumbHorizontalDefault查看它的定義。
從上述代碼中可以看到，滑塊定義很簡(jiǎn)單，布局就是一個(gè)Grid里放了一個(gè)Path，事件響應(yīng)只有3個(gè)。
下面為修改Path的Fill填充色和Stroke的劃線顏色如下：
得到效果如下：
現(xiàn)在，我們覺得矩形的滑塊不好看，需要用橢圓形的滑塊，那么，我們?cè)賮硖幚硐禄瑝K。
首先刪除Thumb里定義的寬和高，因?yàn)椴粍h除它們，模板里的寬高會(huì)受此限制。
刪除后如下：
現(xiàn)在我們?cè)賮硇薷腟liderThumbHorizontalDefault模板。
在模板里找到Path，修改他的Data，之前他的Data是自己畫的一個(gè)矩形，現(xiàn)在我們給他改為橢圓形，并且給Path重新設(shè)置寬高，如下：
我們得到效果如下：
可以看到，圖中的滑塊是個(gè)圓形，而我們需要的是一個(gè)橢圓形。
處理很簡(jiǎn)單，修改Path的Width即可，我們?cè)摓?4，得到效果如下：
當(dāng)然，我們既然可以通過修改樣式設(shè)計(jì)橢圓形滑塊，就也可以設(shè)計(jì)其他形狀滑塊，比如，我們修改Path如下，獲得斜角四邊形滑塊：
效果圖如下：
修改代碼如下，設(shè)置三角形滑塊：
效果圖如下：
----------------------------------------------------------------------------------------------------
上述代碼設(shè)置的都是水平方向的滑塊樣式，垂直方向的滑塊樣式設(shè)置同理，只要從模板SliderVertical開始，以此處理修改即可。
----------------------------------------------------------------------------------------------------
到此WPF滑塊控件(Slider)的自定義樣式就已經(jīng)講解完成了。
代碼已經(jīng)傳到Github上了，歡迎大家下載。
Github地址：https://github.com/kiba518/WpfSlider
----------------------------------------------------------------------------------------------------
總結(jié)
以上所述是小編給大家介紹的WPF滑塊控件(Slider)的自定義樣式,希望對(duì)大家有所幫助，如果大家有任何疑問請(qǐng)給我留言，小編會(huì)及時(shí)回復(fù)大家的。在此也非常感謝大家對(duì)腳本之家網(wǎng)站的支持！
如果你覺得本文對(duì)你有幫助，歡迎轉(zhuǎn)載，煩請(qǐng)注明出處，謝謝！
您可能感興趣的文章:- WPF自定義控件和樣式之自定義按鈕（Button）
- WPF如何自定義TabControl控件樣式示例詳解
- WPF的ListView控件自定義布局用法實(shí)例
- WPF自定義TreeView控件樣式實(shí)現(xiàn)QQ聯(lián)系人列表效果
- WPF自定義選擇年月控件詳解
- WPF自定義實(shí)現(xiàn)IP地址輸入控件
- 自定義WPF分頁控件的全過程記錄
