WPF 控件专题 Slider样式模板二

Slider ：滑动条控件/滑块控件，表示一个控件，该控件可让用户通过沿 Thumb 移动 Track 控件从一个值范围中进行选择。

滑块控件，MSDN上面是这样说的，

RepeatButton就是点击Thumb两侧空白（实际是RepeatButton背景色是透明色）的实现移动Thumb的效果。

修改Slider样式或者模板时，可以分为如上图所示的三个部分：滑块左侧、滑块、滑块右侧，这里就不做刻度线的显示（tick marks）

**************************************************************************************************************

Slider样式示例代码如下：

XML 复制代码

<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>

**************************************************************************************************************

调用代码示例：

XML 复制代码

<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"

**************************************************************************************************************