前言

每次開發(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模板，對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)在，我們設(shè)置好了軌道，可當(dāng)前的滑塊的顏色我們有點(diǎn)不太滿意，所以我們再來處理下滑塊。

滑塊模板的模板是上方代碼中粉色標(biāo)記的代碼——Thumb。

可以看到Thumb使用的是SliderThumbHorizontalDefault模板，所以，我們繼續(xù)F12跟進(jìn)SliderThumbHorizontalDefault查看它的定義。

從上述代碼中可以看到，滑塊定義很簡單，布局就是一個(gè)Grid里放了一個(gè)Path，事件響應(yīng)只有3個(gè)。

下面為修改Path的Fill填充色和Stroke的劃線顏色如下：

得到效果如下：

現(xiàn)在，我們覺得矩形的滑塊不好看，需要用橢圓形的滑塊，那么，我們再來處理下滑塊。

首先刪除Thumb里定義的寬和高，因?yàn)椴粍h除它們，模板里的寬高會(huì)受此限制。

刪除后如下：

現(xiàn)在我們再來修改SliderThumbHorizontalDefault模板。

在模板里找到Path，修改他的Data，之前他的Data是自己畫的一個(gè)矩形，現(xiàn)在我們給他改為橢圓形，并且給Path重新設(shè)置寬高，如下：

我們得到效果如下：

可以看到，圖中的滑塊是個(gè)圓形，而我們需要的是一個(gè)橢圓形。

處理很簡單，修改Path的Width即可，我們該為14，得到效果如下：

當(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)的自定義樣式,希望對大家有所幫助，如果大家有任何疑問請給我留言，小編會(huì)及時(shí)回復(fù)大家的。在此也非常感謝大家對腳本之家網(wǎng)站的支持！
如果你覺得本文對你有幫助，歡迎轉(zhuǎn)載，煩請注明出處，謝謝！

最新評論