前言

本篇是《C# wpf ScrollBar自定义详解》的示例。按照文中的方法实现一个音量调节样式的滚动条。音量调节控件一般用Slider会更合适，只是Slider好ScrollBar的构造几乎一样，继承了同一个基类RangeBase，样式可以相互使用，所以这里统一以ScrollBar为例子来说明。

一、步骤

1.确定参数

对于一个音量调节滚动条，可以定义的参数是：
（1）滚动条宽度
（2）轨道宽度
（3）轨道圆角
（4）轨道颜色
（5）滑块宽
（6）滑块高
（7）滑块圆角
（8）滑块颜色

2.定义style

style的名称就叫ScrollStyle_Volume，其他与《C# wpf ScrollBar自定义详解》中通用模板一致。

3.定义template

在template中显示滚动条的样式。在《C# wpf ScrollBar自定义详解》中通用模板的基础上，去除行按钮，页按钮透明，滑块设为圆角矩形。绑定滚动条宽度、轨道宽度、轨道圆角参数等。

二、完整代码

<ResourceDictionaryxmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"xmlns:sys="clr-namespace:System;assembly=mscorlib"> <!--  1.确定参数  --><!--纵向滚动条宽度--><sys:Double   x:Key="VerticalScrollBarThickness">16</sys:Double><!--纵向轨道宽度--><sys:Double   x:Key="VerticalTrackThickness">4</sys:Double><!--纵向轨道圆角--><CornerRadius   x:Key="VerticalTrackCornerRadius">2</CornerRadius><!--纵向轨道颜色--><SolidColorBrush x:Key="VerticalTrackBackground" Color="#cccccc"></SolidColorBrush><!--纵向滑块宽--><sys:Double x:Key="VerticalThumbWidth" >16</sys:Double><!--纵向滑块高--><sys:Double x:Key="VerticalThumbHeight" >16</sys:Double><!--纵向滑块圆角--><CornerRadius x:Key="VerticalThumbCornerRadius">8</CornerRadius><!--纵向滑块颜色--><SolidColorBrush x:Key="VerticalThumbBackground" Color="#cccccc"> </SolidColorBrush><!--横向滚动条宽度--><sys:Double   x:Key="HorizontalScrollBarThickness">16</sys:Double><!--横向轨道宽度--><sys:Double   x:Key="HorizontalTrackThickness">4</sys:Double><!--横向轨道圆角--><CornerRadius   x:Key="HorizontalTrackCornerRadius">2</CornerRadius><!--横向轨道颜色--><SolidColorBrush x:Key="HorizontalTrackBackground" Color="#cccccc"></SolidColorBrush><!--横向滑块宽--><sys:Double x:Key="HorizontalThumbWidth" >16</sys:Double><!--横向滑块高--><sys:Double x:Key="HorizontalThumbHeight" >16</sys:Double><!--横向滑块圆角--><CornerRadius x:Key="HorizontalThumbCornerRadius">8</CornerRadius><!--横向滑块颜色--><SolidColorBrush x:Key="HorizontalThumbBackground" Color="#cccccc"></SolidColorBrush><!-- 2.定义Style  --><Style x:Key="ScrollStyle_Volume" TargetType="ScrollBar"><Setter Property="OverridesDefaultStyle" Value="true" /><Style.Triggers><Trigger Property="Orientation" Value="Horizontal"><Setter Property="Width" Value="Auto" /><Setter Property="Height" Value="{DynamicResource HorizontalScrollBarThickness}" /><Setter Property="Template" Value="{DynamicResource HorizontalScrollBar}" /></Trigger><Trigger Property="Orientation" Value="Vertical"><Setter Property="Width" Value="{DynamicResource VerticalScrollBarThickness}" /><Setter Property="Height" Value="Auto" /><Setter Property="Template" Value="{DynamicResource VerticalScrollBar}" /></Trigger></Style.Triggers></Style><!-- 3.定义template  --><!-- 纵向滚动条template  --><ControlTemplate x:Key="VerticalScrollBar" TargetType="{x:Type ScrollBar}"><Grid><Border    Width="{DynamicResource VerticalTrackThickness}"  CornerRadius="{DynamicResource VerticalTrackCornerRadius}"  Background="{DynamicResource VerticalTrackBackground}"></Border><!--如果想要Thumb固定长度，直接设置是没有效果的，必须先将Track的ViewportSize设置为NaN--><Track    Name="PART_Track"  IsDirectionReversed="true" ViewportSize="NaN"><Track.DecreaseRepeatButton><RepeatButton Command="ScrollBar.PageUpCommand" Focusable="False"  Width="{DynamicResource VerticalTrackThickness}"><RepeatButton.Template><ControlTemplate><Border Background="Transparent"></Border></ControlTemplate></RepeatButton.Template></RepeatButton></Track.DecreaseRepeatButton><Track.Thumb><Thumb  Width="{DynamicResource VerticalThumbWidth}"  Height="{DynamicResource VerticalThumbHeight}"  Focusable="False"  ><Thumb.Template><ControlTemplate><Border   Background="{DynamicResource VerticalThumbBackground}"   CornerRadius="{DynamicResource VerticalThumbCornerRadius}" /></ControlTemplate></Thumb.Template></Thumb></Track.Thumb><Track.IncreaseRepeatButton><RepeatButton Command="ScrollBar.PageDownCommand" Focusable="False"  Width="{DynamicResource VerticalTrackThickness}"><RepeatButton.Template><ControlTemplate><Border Background="Transparent"></Border></ControlTemplate></RepeatButton.Template></RepeatButton></Track.IncreaseRepeatButton></Track></Grid></ControlTemplate><!-- 横向滚动条template  --><ControlTemplate x:Key="HorizontalScrollBar" TargetType="{x:Type ScrollBar}"><Grid><Border    Height="{DynamicResource HorizontalTrackThickness}"  CornerRadius="{DynamicResource HorizontalTrackCornerRadius}"  Background="{DynamicResource HorizontalTrackBackground}"></Border><!--如果想要Thumb固定长度，直接设置是没有效果的，必须先将Track的ViewportSize设置为NaN--><Track    Name="PART_Track"  IsDirectionReversed="False"  ViewportSize="NaN"><Track.DecreaseRepeatButton><RepeatButton Command="ScrollBar.PageLeftCommand" Focusable="False"  Height="{DynamicResource HorizontalTrackThickness}"><RepeatButton.Template><ControlTemplate><Border Background="Transparent"></Border></ControlTemplate></RepeatButton.Template></RepeatButton></Track.DecreaseRepeatButton><Track.Thumb><Thumb  Width="{DynamicResource HorizontalThumbWidth}"  Height="{DynamicResource HorizontalThumbHeight}"  Focusable="False"  ><Thumb.Template><ControlTemplate><Border   Background="{DynamicResource HorizontalThumbBackground}"   CornerRadius="{DynamicResource HorizontalThumbCornerRadius}" /></ControlTemplate></Thumb.Template></Thumb></Track.Thumb><Track.IncreaseRepeatButton><RepeatButton Command="ScrollBar.PageRightCommand" Focusable="False"  Height="{DynamicResource HorizontalTrackThickness}"><RepeatButton.Template><ControlTemplate><Border Background="Transparent"></Border></ControlTemplate></RepeatButton.Template></RepeatButton></Track.IncreaseRepeatButton></Track></Grid></ControlTemplate>
</ResourceDictionary>

三、效果预览

1.默认参数

<ScrollBar  Orientation="Horizontal"  Width="200" Height="200"   Minimum="0"   Value="50"  Maximum="100"  Style="{DynamicResource ScrollStyle_Volume}"/>

2.设置大小

<ScrollBar   Orientation="Horizontal"  Width="200" Height="200"   Minimum="0"   Value="50"  Maximum="100"  Style="{DynamicResource ScrollStyle_Volume}"><ScrollBar.Resources><!--横向滑块宽--><sys:Double x:Key="HorizontalThumbWidth" >10</sys:Double><!--横向滑块高--><sys:Double x:Key="HorizontalThumbHeight" >28</sys:Double><!--横向滑块圆角--><CornerRadius x:Key="HorizontalThumbCornerRadius">5</CornerRadius></ScrollBar.Resources>
</ScrollBar>

3.设置颜色

<ScrollBar   Orientation="Horizontal"  Width="200" Height="200"   Minimum="0"   Value="50"  Maximum="100"  Style="{DynamicResource ScrollStyle_Volume}"><ScrollBar.Resources><!--横向滑块颜色--><SolidColorBrush x:Key="HorizontalThumbBackground" Color="LightBlue"></SolidColorBrush></ScrollBar.Resources>
</ScrollBar>

总结

wpf实现的音量调节控件效果还是比较好的，虽然上述的代码用的是ScrollBar，但可以通过修改Style的TargetType以及Template的TargeTyle后将样式赋给Slider，但它们实现原理一致，所以示例统一用ScrollBar。

C# wpf ScrollBar自定义音量调节样式滚动条相关推荐

C# wpf ScrollBar自定义样式详解
文章目录前言一.ScrollBar的组成 1.结构说明 2.具体组成行按钮页按钮滑块轨道二.如何自定义? 1.确定参数 2.定义Style 3.定义Template 四.使用方法 1.继 ...
android 自定义音量调节,Android——自定义音量调节控件
今天我们要实现一个上图中音量调节的效果.主要有两种实现方式自定义RatingBar和自定义View. 自定义RatingBar volume_rating.xml main.xml android:i ...
WPF TreeView自定义可视化树样式
目前项目中效果(没上传,需要的留言) 以下例子最终效果: TreeView 折叠箭头,带垂直方向.水平方向层级线条(如图) 来看看怎么一步步实现吧~ 补充一点,代码本地试过,现剪切的所以可能部分运行 ...
WPF Calendar 日历控件样式自定义
原文:WPF Calendar 日历控件样式自定义粗略的在代码上做了些注释 blend 生成出来的模版有的时候会生成跟 vs ui界面不兼容的代码会导致可视化设计界面报错崩溃掉但是确不 ...
Android安卓仿IOS音量调节-自定义view系列（4）
Android安卓仿IOS音量调节-自定义view系列功能简介主要实现步骤 xml相关属性设置 java代码 Android技术生活交流更多其他页面-自定义View-实用功能合集:点击查看 Gi ...
Unity 3D 游戏通用系统设置页面,自定义按键设置,背景虚化,图像设置,亮度对比度饱和度音量调节,分辨率窗口化,帧率垂直同步,抗锯齿,阴影质量,纹理质量设置
简易的游戏通用设置页面本文章包含所有代码及UI结构页面效果: UI结构(便于管理): 代码: 思路: 整个页面的父物体SettingPanel上挂载管理代码,用于获取设置页面中所有的功能按钮,拖动 ...
WPF绘制自定义窗口
原文:WPF绘制自定义窗口 WPF是制作界面的一大利器,下面就用WPF模拟一下360的软件管理界面,360软件管理界面如下: 界面不难,主要有如下几个要素: 窗体的圆角自定义标题栏及按钮自定义状态 ...
WPF设计の自定义窗体
原文:WPF设计の自定义窗体效果图如下: 实现思路: 1.继承Window类 2.为自定义的CustomWindow类设计窗体样式(使用Blend很方便!) 3.为窗体增加最大最小化和关闭按钮,并实 ...
安卓音量阶数修改_16款手机UI随便用，音量调节原来可以这样玩
今日分享:手机美化教程适用系统:安卓自从小雷开设玩机专栏之后,从之前的手机美化到现在微信隐藏玩法,涉足领域可谓不少,由于后期聚焦在手机美化这块较少,于是小雷打算接下来做一个关于手机主题美化系列的专 ...
都客音量调节助手v2.1(win7专用)发布了
最新版下载地址:点击此处下载(官方下载)只支持win7 vista系统软件介绍: 你还在为游戏时切换窗口调节音量而苦恼么? 你还在因为躺在沙发听音乐声音太小而起身挨冻发愁么? 音量调节助手,从小事做 ...

C# wpf ScrollBar自定义音量调节样式滚动条

文章目录

前言