WPF Slider滑动条的颜色修改方法

效果如下：

鄙人虽然开发wpf有些时间，但之前一直是一些简单template和style改改之类的工作，并没有深入研究过。此次为了完成工作，首先也是网上搜了半天，没有找到合适的代码直接拷贝（搜索能力待提高），干脆就直接静下心来琢磨琢磨。

一开始在界面上就放了slider，挠挠头，怎么修改template才能达到效果呢？后来想到了blend，之前一直听说很强大的界面设计工具，但是一直没有用过，就趁此机会就简单运用了一下。blend中很牛逼的就是编辑模板，通过创建模板副本，可以看到slider结构

结合代码发现，thumb左右两边的reapeatbutton的宽度会随着thumb的位置会变化。那问题就变得简单很多，修改左repeatbutton的template就可以达到目的，核心代码如下。

?

<style x:key= "decreasebtn" targettype= "{x:type repeatbutton}" >

   <setter property= "template" >

     <setter.value>

       <controltemplate targettype= "{x:type repeatbutton}" >

         <border background= "{templatebinding background}"

             height= "{templatebinding height}" width= "{templatebinding width}" >

           <!--轨迹，设置background-->

           <border margin= "0,0,-1,0" background= "{staticresource sliderthumb.track.decreasebackground}"

               verticalalignment= "center" height= "4.0" />

         </border>

       </controltemplate>

     </setter.value>

   </setter>

</style>

完整代码(只是考虑水平的slider)：

?

<resourcedictionary xmlns= "http://schemas.microsoft.com/winfx/2006/xaml/presentation"

           xmlns:x= "http://schemas.microsoft.com/winfx/2006/xaml" >

   <solidcolorbrush x:key= "sliderthumb.static.foreground" color= "#ffe5e5e5" />

   <solidcolorbrush x:key= "sliderthumb.mouseover.background" color= "gray" />

   <solidcolorbrush x:key= "sliderthumb.mouseover.border" color= "#ff7eb4ea" />

   <solidcolorbrush x:key= "sliderthumb.pressed.background" color= "gray" />

   <solidcolorbrush x:key= "sliderthumb.pressed.border" color= "gray" />

   <solidcolorbrush x:key= "sliderthumb.disabled.background" color= "#fff0f0f0" />

   <solidcolorbrush x:key= "sliderthumb.disabled.border" color= "#ffd9d9d9" />

   <solidcolorbrush x:key= "sliderthumb.static.background" color= "#989898" />

   <controltemplate x:key= "sliderthumbhorizontaltop" targettype= "{x:type thumb}" >

     <grid horizontalalignment= "center" uselayoutrounding= "true" verticalalignment= "center" >

       <path x:name= "grip" data= "m 0,6 c0,6 5.5,0 5.5,0 5.5,0 11,6 11,6 11,6 11,18 11,18 11,18 0,18 0,18 0,18 0,6 0,6 z"

          fill= "{staticresource sliderthumb.static.background}"

          stretch= "fill" snapstodevicepixels= "true"

          stroke= "{binding path=fill, relativesource={x:static relativesource.self}}" strokethickness= "1" uselayoutrounding= "true" verticalalignment= "center" />

     </grid>

     <controltemplate.triggers>

       <trigger property= "ismouseover" value= "true" >

         <setter property= "fill" targetname= "grip" value= "{staticresource sliderthumb.mouseover.background}" />

         <setter property= "stroke" targetname= "grip" value= "{staticresource sliderthumb.mouseover.border}" />

       </trigger>

       <trigger property= "isdragging" value= "true" >

         <setter property= "fill" targetname= "grip" value= "{staticresource sliderthumb.pressed.background}" />

         <setter property= "stroke" targetname= "grip" value= "{staticresource sliderthumb.pressed.border}" />

       </trigger>

       <trigger property= "isenabled" value= "false" >

         <setter property= "fill" targetname= "grip" value= "{staticresource sliderthumb.disabled.background}" />

         <setter property= "stroke" targetname= "grip" value= "{staticresource sliderthumb.disabled.border}" />

       </trigger>

     </controltemplate.triggers>

   </controltemplate>

   <controltemplate x:key= "sliderthumbhorizontalbottom" targettype= "{x:type thumb}" >

     <grid horizontalalignment= "center" uselayoutrounding= "true" verticalalignment= "center" >

       <path x:name= "grip" data= "m 0,12 c0,12 5.5,18 5.5,18 5.5,18 11,12 11,12 11,12 11,0 11,0 11,0 0,0 0,0 0,0 0,12 0,12 z"

          fill= "{staticresource sliderthumb.static.background}"

          stretch= "fill"

          snapstodevicepixels= "true"

          stroke= "{binding path=fill, relativesource={x:static relativesource.self}}" strokethickness= "1" uselayoutrounding= "true" verticalalignment= "center" />

     </grid>

     <controltemplate.triggers>

       <trigger property= "ismouseover" value= "true" >

         <setter property= "fill" targetname= "grip" value= "{staticresource sliderthumb.mouseover.background}" />

         <setter property= "stroke" targetname= "grip" value= "{staticresource sliderthumb.mouseover.border}" />

       </trigger>

       <trigger property= "isdragging" value= "true" >

         <setter property= "fill" targetname= "grip" value= "{staticresource sliderthumb.pressed.background}" />

         <setter property= "stroke" targetname= "grip" value= "{staticresource sliderthumb.pressed.border}" />

       </trigger>

       <trigger property= "isenabled" value= "false" >

         <setter property= "fill" targetname= "grip" value= "{staticresource sliderthumb.disabled.background}" />

         <setter property= "stroke" targetname= "grip" value= "{staticresource sliderthumb.disabled.border}" />

       </trigger>

     </controltemplate.triggers>

   </controltemplate>

   <solidcolorbrush x:key= "sliderthumb.track.background" color= "#b6b6b6" />

   <solidcolorbrush x:key= "sliderthumb.track.decreasebackground" color= "#45db5e" />

   <style x:key= "repeatbuttontransparent" targettype= "{x:type repeatbutton}" >

     <setter property= "overridesdefaultstyle" value= "true" />

     <setter property= "background" value= "transparent" />

     <setter property= "focusable" value= "false" />

     <setter property= "istabstop" value= "false" />

   </style>

   <style x:key= "decreasebtn" targettype= "{x:type repeatbutton}" basedon= "{staticresource repeatbuttontransparent}" >

     <setter property= "template" >

       <setter.value>

         <controltemplate targettype= "{x:type repeatbutton}" >

           <border background= "{templatebinding background}" height= "{templatebinding height}" width= "{templatebinding width}" >

             <border margin= "1,0,-1,0" background= "{staticresource sliderthumb.track.decreasebackground}"

                 verticalalignment= "center" height= "4.0" />

           </border>

         </controltemplate>

       </setter.value>

     </setter>

   </style>

   <style x:key= "increasebtn" targettype= "{x:type repeatbutton}" basedon= "{staticresource repeatbuttontransparent}" >

     <setter property= "template" >

       <setter.value>

         <controltemplate targettype= "{x:type repeatbutton}" >

           <border background= "{templatebinding background}" height= "{templatebinding height}" width= "{templatebinding width}" />

         </controltemplate>

       </setter.value>

     </setter>

   </style>

   <controltemplate x:key= "sliderthumbhorizontaldefault" targettype= "{x:type thumb}" >

     <grid horizontalalignment= "center" uselayoutrounding= "true" verticalalignment= "center" >

       <path x:name= "grip" data= "m0 512c0 229.230208 229.805588 0 512 0 794.769792 0 1024 229.805588 1024 512 1024 794.769792 794.194412 1024 512 1024 229.230208 1024 0 794.194412 0 512z"

            strokethickness= "1" fill= "{staticresource sliderthumb.static.background}" stroke= "{binding path=fill, relativesource={x:static relativesource.self}}"

            width= "18" height= "{binding path=width, relativesource={x:static relativesource.self}}"

            stretch= "fill" snapstodevicepixels= "true" uselayoutrounding= "true" verticalalignment= "center" />

     </grid>

     <controltemplate.triggers>

       <trigger property= "ismouseover" value= "true" >

         <setter property= "fill" targetname= "grip" value= "{staticresource sliderthumb.mouseover.background}" />

       </trigger>

       <trigger property= "isdragging" value= "true" >

         <setter property= "fill" targetname= "grip" value= "{staticresource sliderthumb.pressed.background}" />

         <setter property= "stroke" targetname= "grip" value= "{staticresource sliderthumb.pressed.border}" />

       </trigger>

       <trigger property= "isenabled" value= "false" >

         <setter property= "fill" targetname= "grip" value= "{staticresource sliderthumb.disabled.background}" />

         <setter property= "stroke" targetname= "grip" value= "{staticresource sliderthumb.disabled.border}" />

       </trigger>

     </controltemplate.triggers>

   </controltemplate>

   <controltemplate x:key= "sliderhorizontal" targettype= "{x:type slider}" >

     <border x:name= "border" borderbrush= "{templatebinding borderbrush}"

           borderthickness= "{templatebinding borderthickness}" background= "{templatebinding background}" snapstodevicepixels= "true" >

       <grid>

         <grid.rowdefinitions>

           <rowdefinition height= "15" />

           <rowdefinition height= "auto" minheight= "{templatebinding minheight}" />

           <rowdefinition height= "15" />

         </grid.rowdefinitions>

         <tickbar x:name= "toptick" fill= "{templatebinding foreground}" height= "4" margin= "0,0,0,2" placement= "top" grid.row= "0"

                visibility= "collapsed" />

         <tickbar x:name= "bottomtick" fill= "{templatebinding foreground}" height= "4" margin= "0,2,0,0" placement= "bottom" grid.row= "2"

                visibility= "collapsed" />

         <border x:name= "trackbackground" borderbrush= "{staticresource sliderthumb.track.background}"

             borderthickness= "1" background= "{binding path=borderbrush, relativesource={x:static relativesource.self}}"

             height= "4.0" margin= "5,0" grid.row= "1" verticalalignment= "center" >

           <canvas horizontalalignment= "stretch" margin= "0,-1" >

             <rectangle x:name= "part_selectionrange" fill= "{dynamicresource {x:static systemcolors.highlightbrushkey}}"

                   height= "{binding path=height, elementname=trackbackground}" visibility= "hidden" />

           </canvas>

         </border>

         <track x:name= "part_track" grid.row= "1" >

           <track.decreaserepeatbutton>

             <repeatbutton command= "{x:static slider.decreaselarge}" style= "{staticresource decreasebtn}" />

           </track.decreaserepeatbutton>

           <track.increaserepeatbutton>

             <repeatbutton command= "{x:static slider.increaselarge}" style= "{staticresource increasebtn}" />

           </track.increaserepeatbutton>

           <track.thumb>

             <thumb x:name= "thumb" focusable= "false" height= "20" overridesdefaultstyle= "true"

                 template= "{staticresource sliderthumbhorizontaldefault}" verticalalignment= "center"

                 width= "{binding path=height, relativesource={x:static relativesource.self}}" />

           </track.thumb>

         </track>

       </grid>

     </border>

     <controltemplate.triggers>

       <trigger property= "tickplacement" value= "topleft" >

         <setter property= "visibility" targetname= "toptick" value= "visible" />

         <setter property= "template" targetname= "thumb" value= "{staticresource sliderthumbhorizontaltop}" />

         <setter property= "margin" targetname= "trackbackground" value= "5,2,5,0" />

       </trigger>

       <trigger property= "tickplacement" value= "bottomright" >

         <setter property= "visibility" targetname= "bottomtick" value= "visible" />

         <setter property= "template" targetname= "thumb" value= "{staticresource sliderthumbhorizontalbottom}" />

         <setter property= "margin" targetname= "trackbackground" value= "5,0,5,2" />

       </trigger>

       <trigger property= "tickplacement" value= "both" >

         <setter property= "visibility" targetname= "toptick" value= "visible" />

         <setter property= "visibility" targetname= "bottomtick" value= "visible" />

       </trigger>

       <trigger property= "isselectionrangeenabled" value= "true" >

         <setter property= "visibility" targetname= "part_selectionrange" value= "visible" />

       </trigger>

     </controltemplate.triggers>

   </controltemplate>

   <style x:key= "sliderstyle" targettype= "{x:type slider}" >

     <setter property= "stylus.ispressandholdenabled" value= "false" />

     <setter property= "background" value= "transparent" />

     <setter property= "borderbrush" value= "transparent" />

     <setter property= "template" value= "{staticresource sliderhorizontal}" />

   </style>

</resourcedictionary>

其实最重要的还是控件的结构，只要对此很熟悉，做出理想的控件应该不难。

总结

以上所述是小编给大家介绍的wpf slider滑动条的颜色修改方法，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对服务器之家网站的支持！

原文链接：https://www.cnblogs.com/hbatjzyb/archive/2018/08/01/9401218.html

dy("nrwz");

查看更多关于WPF Slider滑动条的颜色修改方法的详细内容...