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滑动条的颜色修改方法，希望对大家有所帮助