Slider :滑动条控件/滑块控件,表示一个控件,该控件可让用户通过沿 Thumb 移动 Track 控件从一个值范围中进行选择。
滑块控件,MSDN上面是这样说的,
RepeatButton就是点击Thumb两侧空白(实际是RepeatButton背景色是透明色)的实现移动Thumb的效果。
修改Slider样式或者模板时,可以分为如上图所示的三个部分:滑块左侧、滑块、滑块右侧,这里就不做刻度线的显示(tick marks)
**************************************************************************************************************
Slider样式示例代码如下:
<UserControl.Resources>
<LinearGradientBrush x:Key="SliderBackground" StartPoint="0,0" EndPoint="0,1">
<GradientStop Offset="0" Color="#59ccfc"/>
<GradientStop Offset="0.5" Color="#00b3fe"/>
<GradientStop Offset="1" Color="#59ccfc"/>
</LinearGradientBrush>
<LinearGradientBrush x:Key="SliderThumb" StartPoint="0,0" EndPoint="0,1">
<GradientStop Offset="0" Color="#FFD9D3E8"/>
<!--<GradientStop Offset="1" Color="#dfdfdf"/>-->
</LinearGradientBrush>
<LinearGradientBrush x:Key="SliderText" StartPoint="0,0" EndPoint="0,1">
<GradientStop Offset="0" Color="#7cce45"/>
<GradientStop Offset="1" Color="#4ea017"/>
</LinearGradientBrush>
<LinearGradientBrush x:Key="SliderBackground2" StartPoint="0,0" EndPoint="0,1">
<GradientStop Offset="0" Color="Gray"/>
<GradientStop Offset="0.5" Color="Gray"/>
<GradientStop Offset="1" Color="#59ccfc"/>
</LinearGradientBrush>
<!--Slider模板-->
<Style x:Key="Slider_RepeatButton" TargetType="{x:Type RepeatButton}">
<Setter Property="Focusable" Value="false" />
<Setter Property="Height" Value="5"/>
<Setter Property="BorderBrush" Value="Transparent"/>
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type RepeatButton}">
<Border Background="{StaticResource SliderBackground}" Margin="0 0 -1 0"/>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
<Style x:Key="Slider_RepeatButton1" TargetType="{x:Type RepeatButton}">
<Setter Property="Focusable" Value="false" />
<Setter Property="Height" Value="5"/>
<Setter Property="BorderBrush" Value="Transparent"/>
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type RepeatButton}">
<Border Background="Gray" Margin="-1 0 0 0"/>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
<Style x:Key="Slider_Thumb" TargetType="Thumb">
<Setter Property="Focusable" Value="false" />
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="Thumb">
<Grid Height="15">
<Ellipse Stretch="Fill" Fill="{StaticResource SliderThumb}" Width="15" Height="15"/>
</Grid>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
<Style x:Key="Slider_CustomStyle" TargetType="Slider">
<Setter Property="Focusable" Value="false" />
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="Slider">
<Grid>
<Grid.Effect>
<DropShadowEffect BlurRadius="5" ShadowDepth="1" />
</Grid.Effect>
<Border Grid.Column="1" BorderBrush="Red" BorderThickness="0" CornerRadius="0,0,0,0">
<Track Grid.Column="1" Name="PART_Track">
<Track.DecreaseRepeatButton>
<RepeatButton Style="{StaticResource Slider_RepeatButton}" Command="Slider.DecreaseLarge"/>
</Track.DecreaseRepeatButton>
<Track.IncreaseRepeatButton>
<RepeatButton Style="{StaticResource Slider_RepeatButton1}" Command="Slider.IncreaseLarge"/>
</Track.IncreaseRepeatButton>
<Track.Thumb>
<Thumb Style="{StaticResource Slider_Thumb}"/>
</Track.Thumb>
</Track>
</Border>
</Grid>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
</UserControl.Resources>
**************************************************************************************************************
调用代码示例:
<StackPanel Margin="10" HorizontalAlignment="Stretch" VerticalAlignment="Center">
<Slider x:Name="SliderTest" Value="35" Maximum="100" Style="{StaticResource Slider_CustomStyle}" IsMoveToPointEnabled="True" ValueChanged="SliderTest_ValueChanged" IsSnapToTickEnabled="True"/>
<TextBlock Text="{Binding Path=Value,ElementName=SliderTest}" FontFamily="宋体" FontSize="24" FontWeight="Bold" HorizontalAlignment="Center"/>
</StackPanel>
效果图
扩展:
问题:点击Slider控件时,滑块会自动跳到滑动条的最边缘位置,无法跳到鼠标点击的位置上?
方法:给Slider控件设置属性IsMoveToPointEnabled="True"即可!
问题:Slider怎么取整数?
方法:IsSnapToTickEnabled="True"
**************************************************************************************************************