效果如下：

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

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

结合代码发现，Thumb左右两边的ReapeatButton的宽度会随着Thumb的位置会变化。那问题就变得简单很多，修改左RepeatButton的Template就可以达到目的，核心代码如下。
  1.        <Style x:Key="DecreaseBtn" TargetType="{x:Type RepeatButton}">
  2.             <Setter Property="Template">
  3.                 <Setter.Value>
  4.                     <ControlTemplate TargetType="{x:Type RepeatButton}">
  5.                         <Border Background="{TemplateBinding Background}"
  6.                                 Height="{TemplateBinding Height}" Width="{TemplateBinding Width}">
  7.                             <!--轨迹，设置Background-->
  8.                             <Border Margin="0,0,-1,0" Background="{StaticResource SliderThumb.Track.DecreaseBackground}"
  9.                                     VerticalAlignment="center" Height="4.0" />
  10.                         </Border>
  11.                     </ControlTemplate>
  12.                 </Setter.Value>
  13.             </Setter>
  14.         </Style>

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

  1.   1 <ResourceDictionary xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
  2.   2                     xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
  3.   3
  4.   4
  5.   5     <SolidColorBrush x:Key="SliderThumb.Static.Foreground" Color="#FFE5E5E5"/>
  6.   6     <SolidColorBrush x:Key="SliderThumb.MouseOver.Background" Color="Gray"/>
  7.   7     <SolidColorBrush x:Key="SliderThumb.MouseOver.Border" Color="#FF7Eb4EA"/>
  8.   8     <SolidColorBrush x:Key="SliderThumb.Pressed.Background" Color="Gray"/>
  9.   9     <SolidColorBrush x:Key="SliderThumb.Pressed.Border" Color="Gray"/>
  10.  10     <SolidColorBrush x:Key="SliderThumb.Disabled.Background" Color="#FFF0F0F0"/>
  11.  11     <SolidColorBrush x:Key="SliderThumb.Disabled.Border" Color="#FFD9D9D9"/>
  12.  12     <SolidColorBrush x:Key="SliderThumb.Static.Background" Color="#989898"/>
  13.  13
  14.  14     <ControlTemplate x:Key="SliderThumbHorizontalTop" TargetType="{x:Type Thumb}">
  15.  15         <Grid HorizontalAlignment="Center" UseLayoutRounding="True" VerticalAlignment="Center">
  16.  16             <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"
  17.  17                   Fill="{StaticResource SliderThumb.Static.Background}"
  18.  18                   Stretch="Fill" SnapsToDevicePixels="True"
  19.  19                   Stroke="{Binding Path=Fill, RelativeSource={x:Static RelativeSource.Self}}" StrokeThickness="1" UseLayoutRounding="True" VerticalAlignment="Center"/>
  20.  20         </Grid>
  21.  21         <ControlTemplate.Triggers>
  22.  22             <Trigger Property="IsMouseOver" Value="true">
  23.  23                 <Setter Property="Fill" TargetName="grip" Value="{StaticResource SliderThumb.MouseOver.Background}"/>
  24.  24                 <Setter Property="Stroke" TargetName="grip" Value="{StaticResource SliderThumb.MouseOver.Border}"/>
  25.  25             </Trigger>
  26.  26             <Trigger Property="IsDragging" Value="true">
  27.  27                 <Setter Property="Fill" TargetName="grip" Value="{StaticResource SliderThumb.Pressed.Background}"/>
  28.  28                 <Setter Property="Stroke" TargetName="grip" Value="{StaticResource SliderThumb.Pressed.Border}"/>
  29.  29             </Trigger>
  30.  30             <Trigger Property="IsEnabled" Value="false">
  31.  31                 <Setter Property="Fill" TargetName="grip" Value="{StaticResource SliderThumb.Disabled.Background}"/>
  32.  32                 <Setter Property="Stroke" TargetName="grip" Value="{StaticResource SliderThumb.Disabled.Border}"/>
  33.  33             </Trigger>
  34.  34         </ControlTemplate.Triggers>
  35.  35     </ControlTemplate>
  36.  36     <ControlTemplate x:Key="SliderThumbHorizontalBottom" TargetType="{x:Type Thumb}">
  37.  37         <Grid HorizontalAlignment="Center" UseLayoutRounding="True" VerticalAlignment="Center">
  38.  38             <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"
  39.  39                   Fill="{StaticResource SliderThumb.Static.Background}"
  40.  40                   Stretch="Fill"
  41.  41                   SnapsToDevicePixels="True"
  42.  42                   Stroke="{Binding Path=Fill, RelativeSource={x:Static RelativeSource.Self}}" StrokeThickness="1" UseLayoutRounding="True" VerticalAlignment="Center"/>
  43.  43         </Grid>
  44.  44         <ControlTemplate.Triggers>
  45.  45             <Trigger Property="IsMouseOver" Value="true">
  46.  46                 <Setter Property="Fill" TargetName="grip" Value="{StaticResource SliderThumb.MouseOver.Background}"/>
  47.  47                 <Setter Property="Stroke" TargetName="grip" Value="{StaticResource SliderThumb.MouseOver.Border}"/>
  48.  48             </Trigger>
  49.  49             <Trigger Property="IsDragging" Value="true">
  50.  50                 <Setter Property="Fill" TargetName="grip" Value="{StaticResource SliderThumb.Pressed.Background}"/>
  51.  51                 <Setter Property="Stroke" TargetName="grip" Value="{StaticResource SliderThumb.Pressed.Border}"/>
  52.  52             </Trigger>
  53.  53             <Trigger Property="IsEnabled" Value="false">
  54.  54                 <Setter Property="Fill" TargetName="grip" Value="{StaticResource SliderThumb.Disabled.Background}"/>
  55.  55                 <Setter Property="Stroke" TargetName="grip" Value="{StaticResource SliderThumb.Disabled.Border}"/>
  56.  56             </Trigger>
  57.  57         </ControlTemplate.Triggers>
  58.  58     </ControlTemplate>
  59.  59     <SolidColorBrush x:Key="SliderThumb.Track.Background" Color="#b6b6b6"/>
  60.  60     <SolidColorBrush x:Key="SliderThumb.Track.DecreaseBackground" Color="#45db5e"/>
  61.  61     <Style x:Key="RepeatButtonTransparent" TargetType="{x:Type RepeatButton}">
  62.  62         <Setter Property="OverridesDefaultStyle" Value="true"/>
  63.  63         <Setter Property="Background" Value="Transparent"/>
  64.  64         <Setter Property="Focusable" Value="false"/>
  65.  65         <Setter Property="IsTabStop" Value="false"/>
  66.  66     </Style>
  67.  67
  68.  68     <Style x:Key="DecreaseBtn" TargetType="{x:Type RepeatButton}" BasedOn="{StaticResource RepeatButtonTransparent}">
  69.  69         <Setter Property="Template">
  70.  70             <Setter.Value>
  71.  71                 <ControlTemplate TargetType="{x:Type RepeatButton}">
  72.  72                     <Border Background="{TemplateBinding Background}" Height="{TemplateBinding Height}" Width="{TemplateBinding Width}">
  73.  73                         <Border Margin="1,0,-1,0" Background="{StaticResource SliderThumb.Track.DecreaseBackground}"
  74.  74                                 VerticalAlignment="center" Height="4.0" />
  75.  75                     </Border>
  76.  76                 </ControlTemplate>
  77.  77             </Setter.Value>
  78.  78         </Setter>
  79.  79     </Style>
  80.  80
  81.  81     <Style x:Key="IncreaseBtn" TargetType="{x:Type RepeatButton}" BasedOn="{StaticResource RepeatButtonTransparent}">
  82.  82         <Setter Property="Template">
  83.  83             <Setter.Value>
  84.  84                 <ControlTemplate TargetType="{x:Type RepeatButton}">
  85.  85                     <Border Background="{TemplateBinding Background}" Height="{TemplateBinding Height}" Width="{TemplateBinding Width}"/>
  86.  86                 </ControlTemplate>
  87.  87             </Setter.Value>
  88.  88         </Setter>
  89.  89     </Style>
  90.  90
  91.  91     <ControlTemplate x:Key="SliderThumbHorizontalDefault" TargetType="{x:Type Thumb}">
  92.  92         <Grid HorizontalAlignment="Center" UseLayoutRounding="True" VerticalAlignment="Center">
  93.  93             <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"
  94.  94                       StrokeThickness="1" Fill="{StaticResource SliderThumb.Static.Background}" Stroke="{Binding Path=Fill, RelativeSource={x:Static RelativeSource.Self}}"
  95.  95                       Width="18" Height="{Binding Path=Width, RelativeSource={x:Static RelativeSource.Self}}"
  96.  96                       Stretch="Fill" SnapsToDevicePixels="True" UseLayoutRounding="True" VerticalAlignment="Center"/>
  97.  97         </Grid>
  98.  98         <ControlTemplate.Triggers>
  99.  99             <Trigger Property="IsMouseOver" Value="true">
  100. 100                 <Setter Property="Fill" TargetName="grip" Value="{StaticResource SliderThumb.MouseOver.Background}"/>
  101. 101             </Trigger>
  102. 102             <Trigger Property="IsDragging" Value="true">
  103. 103                 <Setter Property="Fill" TargetName="grip" Value="{StaticResource SliderThumb.Pressed.Background}"/>
  104. 104                 <Setter Property="Stroke" TargetName="grip" Value="{StaticResource SliderThumb.Pressed.Border}"/>
  105. 105             </Trigger>
  106. 106             <Trigger Property="IsEnabled" Value="false">
  107. 107                 <Setter Property="Fill" TargetName="grip" Value="{StaticResource SliderThumb.Disabled.Background}"/>
  108. 108                 <Setter Property="Stroke" TargetName="grip" Value="{StaticResource SliderThumb.Disabled.Border}"/>
  109. 109             </Trigger>
  110. 110         </ControlTemplate.Triggers>
  111. 111     </ControlTemplate>
  112. 112
  113. 113     <ControlTemplate x:Key="SliderHorizontal" TargetType="{x:Type Slider}">
  114. 114         <Border x:Name="border" BorderBrush="{TemplateBinding BorderBrush}"
  115. 115                     BorderThickness="{TemplateBinding BorderThickness}" Background="{TemplateBinding Background}" SnapsToDevicePixels="True">
  116. 116             <Grid>
  117. 117                 <Grid.RowDefinitions>
  118. 118                     <RowDefinition Height="15"/>
  119. 119                     <RowDefinition Height="Auto" MinHeight="{TemplateBinding MinHeight}"/>
  120. 120                     <RowDefinition Height="15"/>
  121. 121                 </Grid.RowDefinitions>
  122. 122                 <TickBar x:Name="TopTick" Fill="{TemplateBinding Foreground}" Height="4" Margin="0,0,0,2" Placement="Top" Grid.Row="0"
  123. 123                              Visibility="Collapsed"/>
  124. 124                 <TickBar x:Name="BottomTick" Fill="{TemplateBinding Foreground}" Height="4" Margin="0,2,0,0" Placement="Bottom" Grid.Row="2"
  125. 125                              Visibility="Collapsed"/>
  126. 126
  127. 127                 <Border x:Name="TrackBackground" BorderBrush="{StaticResource SliderThumb.Track.Background}"
  128. 128                         BorderThickness="1" Background="{Binding Path=BorderBrush, RelativeSource={x:Static RelativeSource.Self}}"
  129. 129                         Height="4.0" Margin="5,0" Grid.Row="1" VerticalAlignment="center">
  130. 130                     <Canvas HorizontalAlignment="Stretch" Margin="0,-1">
  131. 131                         <Rectangle x:Name="PART_SelectionRange" Fill="{DynamicResource {x:Static SystemColors.HighlightBrushKey}}"
  132. 132                                    Height="{Binding Path=Height, ElementName=TrackBackground}" Visibility="Hidden"/>
  133. 133                     </Canvas>
  134. 134                 </Border>
  135. 135                 <Track x:Name="PART_Track" Grid.Row="1">
  136. 136                     <Track.DecreaseRepeatButton>
  137. 137                         <RepeatButton Command="{x:Static Slider.DecreaseLarge}" Style="{StaticResource DecreaseBtn}"/>
  138. 138                     </Track.DecreaseRepeatButton>
  139. 139                     <Track.IncreaseRepeatButton>
  140. 140                         <RepeatButton Command="{x:Static Slider.IncreaseLarge}" Style="{StaticResource IncreaseBtn}"/>
  141. 141                     </Track.IncreaseRepeatButton>
  142. 142                     <Track.Thumb>
  143. 143                         <Thumb x:Name="Thumb" Focusable="False" Height="20" OverridesDefaultStyle="True"
  144. 144                                Template="{StaticResource SliderThumbHorizontalDefault}" VerticalAlignment="Center"
  145. 145                                Width="{Binding Path=Height, RelativeSource={x:Static RelativeSource.Self}}"/>
  146. 146                     </Track.Thumb>
  147. 147                 </Track>
  148. 148             </Grid>
  149. 149         </Border>
  150. 150         <ControlTemplate.Triggers>
  151. 151             <Trigger Property="TickPlacement" Value="TopLeft">
  152. 152                 <Setter Property="Visibility" TargetName="TopTick" Value="Visible"/>
  153. 153                 <Setter Property="Template" TargetName="Thumb" Value="{StaticResource SliderThumbHorizontalTop}"/>
  154. 154                 <Setter Property="Margin" TargetName="TrackBackground" Value="5,2,5,0"/>
  155. 155             </Trigger>
  156. 156             <Trigger Property="TickPlacement" Value="BottomRight">
  157. 157                 <Setter Property="Visibility" TargetName="BottomTick" Value="Visible"/>
  158. 158                 <Setter Property="Template" TargetName="Thumb" Value="{StaticResource SliderThumbHorizontalBottom}"/>
  159. 159                 <Setter Property="Margin" TargetName="TrackBackground" Value="5,0,5,2"/>
  160. 160             </Trigger>
  161. 161             <Trigger Property="TickPlacement" Value="Both">
  162. 162                 <Setter Property="Visibility" TargetName="TopTick" Value="Visible"/>
  163. 163                 <Setter Property="Visibility" TargetName="BottomTick" Value="Visible"/>
  164. 164             </Trigger>
  165. 165             <Trigger Property="IsSelectionRangeEnabled" Value="true">
  166. 166                 <Setter Property="Visibility" TargetName="PART_SelectionRange" Value="Visible"/>
  167. 167             </Trigger>
  168. 168         </ControlTemplate.Triggers>
  169. 169     </ControlTemplate>
  170. 170
  171. 171     <Style x:Key="SliderStyle" TargetType="{x:Type Slider}">
  172. 172         <Setter Property="Stylus.IsPressAndHoldEnabled" Value="false"/>
  173. 173         <Setter Property="Background" Value="Transparent"/>
  174. 174         <Setter Property="BorderBrush" Value="Transparent"/>
  175. 175         <Setter Property="Template" Value="{StaticResource SliderHorizontal}"/>
  176. 176     </Style>
  177. 177 </ResourceDictionary>

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

WPF Slider滑动条的颜色修改的更多相关文章

  1. 关于Unity中NGUI的Checkbox复选框、Slider滑动条和Button的6种触发回调事件的方式

    Checkbox复选框 1.创建一个NGUI背景Sprite1节点 2.打开NGUI---->Open---->Prefab Toolbar---->选择一个复选框节点,拖拽到背景节 ...

  2. Slider( 滑动条) 组件

    本节课重点了解 EasyUI 中 Slider(滑动条)组件的使用方法,这个组件依赖于Draggable(拖动)组件. 一． 加载方式//class 加载方式<input class=" ...

  3. 第二百二十节，jQuery EasyUI，Slider(滑动条)组件

    jQuery EasyUI,Slider(滑动条)组件 学习要点: 1.加载方式 2.属性列表 3.事件列表 4.方法列表 本节课重点了解 EasyUI 中 Slider(滑动条)组件的使用方法,这个 ...

  4. Slider 滑动条效果

    转载自:http://www.cnblogs.com/cloudgamer/archive/2008/12/24/Slider.html 这个滑动条(拖动条)效果,一开始是参考了BlueDestiny ...

  5. easyUI之slider滑动条框

    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <hea ...

  6. wpf slider进度条的样式模板，带有进度颜色显示

    效果图: 仅仅需在前台加上这段代码就可以: <UserControl.Resources> <!--笔刷--> <LinearGradientBrush x:Key=&q ...

  7. Slider滑动条

    Slider的Value Changed事件一般与Label结合让其显示数值 int mySlider = (int)sender.value; self.sliderLabel.text = [NS ...

  8. 利用OpenCV和MFC对话框建设一个有滑动条控制的播放器--转

    (一)问题的提出: OpenCV有一个很简单的播放视频文件并加载滑动条的程序,但是如何用MFC对话框来创建一个有滑动条控制的播放器呢,网络上四处搜索都没有代码可以参考,下的都是些骗子链接文件,很过分, ...

  9. 实现滑动条与表单中的input中的value交互

    最近在写一个考试系统的项目,遇到一些比较有意思的小知识,在这里分享给大家 下面是一个滑动条与input中的value值的交互,即滑动条的颜色会跟随给定input的value值实时变化,虽然表单中的ra ...

随机推荐

  1. android 使用webview 加载网页

    1. <WebView android:id="@+id/webView" android:layout_width="fill_parent" andr ...

  2. Servlet 知识点 中文乱码的本质与解决

    本质原因:在servlet中出现中文乱码的原因编码和解码采用的不是一个编码表或者两个编码表不是兼容 例如UTF-8编码.GBK编码都可以读取中文,那么如果采用UTF-8编码保存文件,但是采用GBK编码 ...

  3. 2018.10.25 洛谷P4187 [USACO18JAN]Stamp Painting（计数dp）

    传送门 其实本来想做组合数学的2333. 谁知道是道dpdpdp. 唉只能顺手做了 还是用真难则反的思想. 这题我们倒着考虑,只需要求出不合法方案数就行了. 这个显然是随便dpdpdp的. f[i]f ...

  4. SimpleDateFormat转换时间，12,24时间格式[转]

    SimpleDateFormat转换时间,12,24时间格式 来自:http://blog.csdn.net/dongguang1082/article/details/4387165 在使用Simp ...

  5. react native项目的创建和运行

    1.创建项目 react-native init projectName 2.运行项目 在AndroidStudio上运行安卓模拟器 cd projectName react-native run-a ...

  6. Codeforces Round #548 (Div. 2) D 期望dp + 莫比乌斯反演

    https://codeforces.com/contest/1139/problem/D 题意 每次从1,m中选一个数加入队列,假如队列的gcd==1停止,问队列长度的期望 题解 概率正着推,期望反 ...

  7. Lagrange 乘子法求最优解

    clc clear syms x y z r1 r2 w f=x^+y^+z^+w^; g1=*x-y+z-w-; g2=x+y-z+w-; h=f-r1*g1 -r2*g2; hx=diff(h,x ...

  8. mount 移动硬盘出现的各种小问题

    1.fdisk -l 查看硬盘是否存在 2.新建要挂载硬盘的文件夹 mkdir  /disk   (如果想要挂载到已存在的目录就不要新建了) 3.挂载硬盘:mount /dev/sdc /disk 4 ...

  9. VMware Authorization Service不能启动 VMware虚拟机状态已挂起无法恢复解决方案

    在网上看说在服务里面启动 但也是不能用 电脑上说是WINDOWS无法启动VMware Authorization Service服务(位于本地计算机上)错误:1068 依赖服务或组无法启动 这个很简单 ...

  10. hadoop sqoop的常用名命令

    1 列出所有的ambari数据库中所有的表 Sqoop list-tables -connect  jdbc:mysql://localhost:3306/ambari -username ambar ...