继续聊WPF——Slider控件

Slider控件，讲行通俗一点就是我们很常见的滑块，控件的外观上显示一系例刻度值，并存在一个可以被拖动的滑块，用户可以通过拖动滑块来控制控件的值。

如下图所示，是Windows系统的音量调节滑块。

下图所示为QQ音频聊天设置窗口中的音量调节滑块。

这样，我们就以很直观的方式认识了Slider控件。

接下来看看该控件的构成：

然后，查看Slider类的定义，从中找出主体部分。

[LocalizabilityAttribute(LocalizationCategory.Ignore)] [TemplatePartAttribute(Name = "PART_SelectionRange", Type = typeof(FrameworkElement))] [TemplatePartAttribute(Name = "PART_Track", Type = typeof(Track))] public class Slider : RangeBase

其中，我们看到有一个部件很重要，那就是命名为PART_Track的部件，它是一个Track控件，在前面自定义滚动条的时候我们用到它，它由两个RepeatButton和一个Thumb组成，RepeatButton与普通的Button没太大区别，只不过它可以记录单击次数和设置响应延迟时间罢了，这里完全只把它当作按钮来用。

整个Track控件就是通过改变Thumb的位置和两RepeatButton的大小来动态显示该控件的外观的。

为了显示刻度线，一个TickBar控件是必须，这个控件很简单，它没有模板也不需要设置样式，只需用好几个属性就行了。

Maximum——最大值，与进度条类似；

Minimum——对应的，表示最小值；

Ticks——设置刻度线的位置，可以设置多个值，如果刻度需要不均匀显示的情况下可以使用该属性；

TickFrequency——刻度间隔，就是刻度线之间的间距，如果最小值是0，最大值是100，TickFrequency设置为5，那么，该刻度条将均匀地显示20处刻度线。

注意：TickFrequency与Ticks不能同时使用，因为它们一个是均匀分布，一个是不均匀分布，同时设置会发生冲突。

Placement——Tick在Slider控件中的位置，如果Slider是水平的，那么就是上或下，如果Slider控件是垂直的，那么就是左或右。

下面看一个Tick控件的例子，这只是演示，Tick单独使用没有意义。

<TickBar Height="15" Width="180" Ticks="10,35,50,70" Maximum="100" Minimum="0" Fill="DarkMagenta" Placement="Top" />

好了，现在我们可以自定义一个Slider，这个例子是水平的，它用一个Grid来布局，共三行，最上和最下行分别放一个TickBar用于显示刻度，中间放一个Track为主体部分。

为了能动态显示刻度值，我们把Slider的Value属性绑定到TextBlock的Text属性，这样，只要Slider控件的值发生改变，TextBlock中就能动态显示，前面我们说过了，WPF的属性系统都是依赖项属性，因此可以动态关联。

<Window x:Class="Sample_TickBar.Win2" xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" Title="Win2" Height="300" Width="550"> <Window.Resources> <Style x:Key="StyleForRepeatButton" TargetType="{x:Type RepeatButton}"> <Style.Setters> <Setter Property="Background"> <Setter.Value> <LinearGradientBrush StartPoint="0.5,0" EndPoint="0.5,1"> <GradientStop Color="LightGreen" Offset="0"/> <GradientStop Color="Yellow" Offset="1"/> </LinearGradientBrush> </Setter.Value> </Setter> <Setter Property="Height" Value="10"/> <Setter Property="BorderBrush" Value="Transparent"/> <Setter Property="Focusable" Value="False"/> </Style.Setters> <Style.Triggers> <Trigger Property="IsPressed" Value="True"> <Setter Property="Background"> <Setter.Value> <LinearGradientBrush StartPoint="0.5,0" EndPoint="0.5,1"> <GradientStop Color="LightBlue" Offset="0"/> <GradientStop Color="SkyBlue" Offset="1"/> </LinearGradientBrush> </Setter.Value> </Setter> </Trigger> </Style.Triggers> </Style> <ControlTemplate x:Key="tmpThumb" TargetType="{x:Type Thumb}"> <Ellipse Name="e" Width="13" MinHeight="20" Fill="Blue"/> <ControlTemplate.Triggers> <Trigger Property="IsMouseOver" Value="True"> <Setter TargetName="e" Property="Fill" Value="Red"/> </Trigger> </ControlTemplate.Triggers> </ControlTemplate> <ControlTemplate x:Key="tmp" TargetType="{x:Type Slider}"> <Grid> <Grid.RowDefinitions> <RowDefinition Height="auto"/> <RowDefinition Height="auto" MinHeight="25"/> <RowDefinition Height="auto"/> </Grid.RowDefinitions> <TickBar x:Name="top" Fill="Magenta" Grid.Row="0" HorizontalAlignment="Stretch" Placement="Top" Height="8" Visibility="Collapsed"/> <Track x:Name="PART_Track" Grid.Row="1" HorizontalAlignment="Stretch"> <Track.IncreaseRepeatButton> <RepeatButton Style="{StaticResource StyleForRepeatButton}" Command="Slider.IncreaseLarge"/> </Track.IncreaseRepeatButton> <Track.DecreaseRepeatButton> <RepeatButton Style="{StaticResource StyleForRepeatButton}" Command="Slider.DecreaseLarge"/> </Track.DecreaseRepeatButton> <Track.Thumb> <Thumb Height="20" Template="{StaticResource tmpThumb}"/> </Track.Thumb> </Track> <TickBar x:Name="Bottom" Grid.Row="2" Fill="Magenta" HorizontalAlignment="Stretch" Visibility="Collapsed" Placement="Bottom" Height="8"/> </Grid> <ControlTemplate.Triggers> <Trigger Property="TickPlacement" Value="TopLeft"> <Setter TargetName="top" Property="Visibility" Value="Visible"/> </Trigger> <Trigger Property="TickPlacement" Value="BottomRight"> <Setter Property="Visibility" TargetName="Bottom" Value="Visible"/> </Trigger> <Trigger Property="TickPlacement" Value="Both"> <Setter TargetName="top" Property="Visibility" Value="Visible"/> <Setter TargetName="Bottom" Property="Visibility" Value="Visible"/> </Trigger> </ControlTemplate.Triggers> </ControlTemplate> </Window.Resources> <Grid> <Grid.RowDefinitions> <RowDefinition Height="50"/> <RowDefinition Height="auto"/> </Grid.RowDefinitions> <Slider x:Name="SliderTest" Grid.Row="0" Margin="10,5,10,5" Maximum="100" Minimum="0" TickFrequency="1" Template="{StaticResource tmp}" Value="20" TickPlacement="BottomRight"/> <TextBlock Grid.Row="1" Text="{Binding Path=Value,ElementName=SliderTest}" FontFamily="宋体" FontSize="24" FontWeight="Bold" Margin="150,0,150,0" HorizontalAlignment="Center"/> </Grid> </Window>