欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

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

程序员文章站 2023-12-13 11:10:52
效果如下: 鄙人虽然开发wpf有些时间,但之前一直是一些简单template和style改改之类的工作,并没有深入研究过。此次为了完成工作,首先也是网上搜了半天,没有...

效果如下:

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

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

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

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

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

上一篇:

下一篇: