当前位置：移动技术网 > IT编程>开发语言>c# > WPF Slider滑动条的颜色修改方法

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

2019年07月18日 | 移动技术网IT编程 | 我要评论

效果如下：

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

您可能感兴趣的文章:

如对本文有疑问，点击进行留言回复！！

C#连接Informix数据库的问题

引言informix 11 与之前版本的 informix 相比，新增了很多特性，如 sql 语句跟踪、非阻断的检查点、sds 辅节点、星型连接、自动存储扩展、... [阅读全文]
C#实现猜数字游戏

本文实例为大家分享了c#实现猜数字游戏具体代码，供大家参考，具体内容如下给定一个0-100的随机数字猜其大小题目样式：电脑产生一个0到100之间的随机数字，并且... [阅读全文]
使用Visual Studio2019创建C#项目(窗体应用程序、控制台应用程序、Web应用程序)

一、vs的开发环境首先你得安装了vs2019，然后确认下下面三个组件是否存在，如果没有要下载一下。vs2019的安装可参考。二、创建c#窗体应用程序打开vs可以... [阅读全文]
C# 可空类型的具体使用

在项目中我们经常会遇到可为空类型，那么到底什么是可为空类型呢？下面我们将从4个方面为大家剖析。1、可空类型基础知识顾名思义，可空类型指的就是某个对象类型可以为空... [阅读全文]
C#存储相同键多个值的Dictionary实例详解

涉及到两个问题：一、访问磁盘中文件夹、文件夹下面的文件夹先看一下磁盘文件夹结构c盘下面有个根文件夹savefile，savefile下面有两个子文件夹分别为，2... [阅读全文]
vs2019安装和使用详细图文教程

vs2019已经在4月2日正式发布，vs2019发布会请看这个链接：vs2019发布活动vs2019和vs2017一样强大，项目兼容，不用互相删除，而且c/c+... [阅读全文]
C#实现猜数字小游戏

本文实例为大家分享了c#实现猜数字小游戏的具体代码，供大家参考，具体内容如下效果如图：代码：using system;using system.collecti... [阅读全文]
Visual Studio 中自定义代码片段的方法

第一步、打开 visual studio code，按ctrl + shift + p，输入：configure user snippets，选择 prefer... [阅读全文]
C#实现简单俄罗斯方块

最近在看《.net游戏编程入门经典 c#篇》第一章介绍了如何制作俄罗斯方块，自己试了试按照书上的步骤，可算是完成了。于是写下这篇文章留作纪念。1.类的设计在充... [阅读全文]
C#实现获取本地内网(局域网)和外网(公网)IP地址的方法分析

本文实例讲述了c#实现获取本地内网(局域网)和外网(公网)ip地址的方法。分享给大家供大家参考，具体如下：1、获取本机的ip地址集合：/// <summa... [阅读全文]

网友评论


验证码：

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

2019年07月18日 | 移动技术网IT编程 | 我要评论

您可能感兴趣的文章:

相关文章:

网友评论