WPF 快速了解并实现美观的Slider自定义控件|Slider详解|示例|效果

Nita.

已于 2024-08-19 21:35:37 修改

阅读量2.4k

点赞数 27

分类专栏： .NET WPF WPF自定义控件文章标签： wpf c# microsoft

于 2024-08-19 21:17:31 首次发布

本文链接：https://blog.csdn.net/qq_42399932/article/details/141334811

版权

效果

进度条样式

设置Thumb为圆点，被拖拽时和鼠标悬浮时设置颜色效果

刻度

鼠标悬浮时展示固定刻度
鼠标移动时展示当前刻度
刻度支持展示在进度条上下左右
支持设置刻度的单位，例如%

了解Slider、Tracker、Thumb、TickBar

在 WPF 中，Slider 控件用于表示一个范围内的值，并允许用户通过拖动滑块来选择该值。Slider 由以下几个主要部分组成：

Track：这是滑块的轨道，表示值的范围。Track 包含两个部分：
- DecreaseRepeatButton：表示轨道的左侧或下侧部分，用于减少值。
- IncreaseRepeatButton：表示轨道的右侧或上侧部分，用于增加值。
Thumb：这是用户可以拖动的滑块，用于选择具体的值。Thumb 通常是一个可视化的元素，用户可以通过鼠标或触摸来拖动它。
TickBar：这是一个可选的部分，用于显示刻度标记。TickBar 可以帮助用户更精确地选择值。刻度标记可以是离散的点，也可以是连续的线。

这些部分共同工作，使得 Slider 控件能够直观地表示和选择值。可以通过自定义这些部分的样式和模板来改变 Slider 的外观和行为。他们的关系如下图：
在这里插入图片描述

1. Slider 快速入门

Slider

概念

Slider 控件是一种双向交互式控件，允许用户在两个方向上拖动滑块以选择一个值。

它通常用于处理连续的数值数据，如音量、亮度或温度等。

常用属性

Value：指定滑块当前的值。
Minimum：指定滑块的最小值。
Maximum：指定滑块的最大值。
LargeChange：指定每次鼠标滚动时Value属性的变化量。
SmallChange：指定每次按箭头键时Value属性的变化量。
Orientation：指定Slider控件的方向，可以是Horizontal或Vertical。
IsSnapToTickEnabled：指定是否使滑块 snap 到最近的刻度线。
TickFrequency：指定刻度线的间隔。
Ticks：指定刻度线的集合。

事件处理

Slider控件触发以下事件，可以在这些事件中执行特定的操作：

ValueChanged：当滑块的值发生变化时触发。
DragStarted：当开始拖动滑块时触发。
DragCompleted：当完成拖动滑块时触发。

使用方法、示例、效果

<Slider 
    Minimum="0" 
    Maximum="100" 
    Value="50" 
    Orientation="Horizontal" 
    TickPlacement="BottomRight" 
    TickFrequency="10" 
    IsSnapToTickEnabled="True"
/>

Slide基本样式

1.1 Track

概念

Track是Slider控件的一部分，它作为滑块移动的路径容器。它的主要功能是限定Thumb（滑块）的移动范围，并可以提供视觉上的引导。

功能和应用

Track不仅作为Thumb的滑动路径，还可以通过样式和模板进行自定义设计。例如，可以通过修改**ControlTemplate**来改变Track的外观，使其更具吸引力和实用性。

1.2 Thumb

概念

Thumb是Slider控件中的可移动部分，用户可以直接拖动它来改变Slider的值。Thumb的外观和行为也可以通过样式和模板进行自定义。

使用方法、示例、效果

通过设置Thumb的样式，可以改变其外观，例如大小、形状和颜色。以下是一个简单的Thumb样式示例：

<Style x:Key="SliderThumbStyle" TargetType="{x:Type Thumb}">
    <Setter Property="SnapsToDevicePixels" Value="true"/>
    <Setter Property="OverridesDefaultStyle" Value="true"/>
    <Setter Property="Height" Value="14"/>
    <Setter Property="Width" Value="14"/>
    <Setter Property="Template">
        <Setter.Value>
            <ControlTemplate TargetType="{x:Type Thumb}">
                <Ellipse x:Name="Ellipse" StrokeThickness="1" 
                            Fill="Red">
                    <Ellipse.Stroke>
                        <LinearGradientBrush StartPoint="0,0" EndPoint="0,1">
                            <LinearGradientBrush.GradientStops>
                                <GradientStop Color="{DynamicResource BorderLightColor}" Offset="0.0"/>
                                <GradientStop Color="{DynamicResource BorderDarkColor}" Offset="1.0"/>
                            </LinearGradientBrush.GradientStops>
                        </LinearGradientBrush>
                    </Ellipse.Stroke>
                </Ellipse>
            </ControlTemplate>
        </Setter.Value>
    </Setter>
</Style>

在这个示例中，Thumb被定义为一个圆，具有线性渐变的描边效果。
在这里插入图片描述

1.3.TickBar

概念

TickBar是Slider控件的一部分，主要负责显示刻度线。当设置TickPlacement属性为非None值时，TickBar将会显示出来。

使用方法、示例、效果

TickBar的位置和频率可以通过TickPlacement和TickFrequency属性来控制。例如，以下示例展示了如何创建一个带有显示刻度线的TickBar的Slider：

 <Slider Width="300" Height="50" 
                Minimum="0" Maximum="10" 
                TickPlacement="BottomRight" 
                TickFrequency="1" 
                IsSnapToTickEnabled="True" 
                AutoToolTipPlacement="BottomRight" 
                AutoToolTipPrecision="1" 
                HorizontalAlignment="Center" 
                VerticalAlignment="Center"/>

在这里插入图片描述

2. Slider自定义控件实现

1. 重写Thumb样式

这里分别给出鼠标悬浮样式、默认样式、拖拽样式

 <!--#region ThumbEffect-->
 <DropShadowEffect
     x:Key="UnhoverThumbEffect"
     BlurRadius="5"
     Opacity="0.3"
     ShadowDepth="0"
     Color="{StaticResource MainMediaColor}" />
 <DropShadowEffect
     x:Key="HoverThumbEffect"
     BlurRadius="5"
     Opacity="0.5"
     ShadowDepth="0"
     Color="{StaticResource MainMediaColor}" />
 <DropShadowEffect
     x:Key="DragThumbEffect"
     BlurRadius="8"
     Opacity="1"
     ShadowDepth="0"
     Color="{StaticResource MainMediaColor}" />

 <Style
     x:Key="DefaultSliderThumbStyle"
     TargetType="Thumb">
     <Setter Property="Width" Value="15" />
     <Setter Property="Height" Value="15" />
     <Setter Property="Background" Value="White" />
     <Setter Property="SnapsToDevicePixels" Value="True" />
     <Setter Property="Template">
         <Setter.Value>
             <ControlTemplate TargetType="Thumb">
                 <Ellipse
                     Width="{TemplateBinding Width}"
                     Height="{TemplateBinding Height}"
                     Panel.ZIndex="2"
                     Effect="{StaticResource UnhoverThumbEffect}"
                     Fill="{TemplateBinding Background}" />
                 <ControlTemplate.Triggers>
                     <Trigger Property="IsMouseOver" Value="True">
                         <Setter Property="Effect" Value="{StaticResource HoverThumbEffect}" />
                         <Setter Property="Cursor" Value="Hand" />
                     </Trigger>
                     <Trigger Property="IsDragging" Value="True">
                         <Setter Property="Effect" Value="{StaticResource DragThumbEffect}" />
                     </Trigger>
                 </ControlTemplate.Triggers>
             </ControlTemplate>
         </Setter.Value>
     </Setter>
 </Style>
 <!--#endregion-->

2. 重写RepeatButton

这里主要设置了进度条圆角样式和已完成部分的颜色和未完成部分的颜色设定。

<Style
    x:Key="DecreaseRepeatButtonStyle"
    TargetType="RepeatButton">
    <Setter Property="Height" Value="4" />
    <Setter Property="Margin" Value="0" />
    <Setter Property="Opacity" Value="0.5" />
    <Setter Property="Background" Value="{StaticResource MainColor}" />
    <Setter Property="Template">
        <Setter.Value>
            <ControlTemplate TargetType="RepeatButton">
                <Border
                    Background="{TemplateBinding Background}"
                    CornerRadius="2">
                    <Conten