WPF滑块控件(Slider)的自定义样式

前言每次开发滑块控件的样式都要花很久去读样式代码,感觉有点记不牢,所以特此备忘。自定义滑块样式首先创建项目,添加Slider控件。然后获取Slider的Window样式,如下图操作。然后弹出界面如下.我们点击确定。点击确定后,我们的页面的Resources中,增加了一系列样式代码,而滑块代码会被修改为如下样子:<SliderHorizontalAlignment="Left"Width="2...

WPF滑块控件(Slider)的自定义样式

前言

每次开发滑块控件的样式都要花很久去读样式代码,感觉有点记不牢,所以特此备忘。

自定义滑块样式

首先创建项目,添加Slider控件。

然后获取Slider的Window样式,如下图操作。

然后弹出界面如下.我们点击确定。

点击确定后,我们的页面的Resources中,增加了一系列样式代码,而滑块代码会被修改为如下样子:

<Slider HorizontalAlignment="Left"  Width="200" VerticalAlignment="Top" />

可以看到,系统为我们的Slider控件增加了样式——

现在我们查看样式SliderStyle1,F12跟踪到定义。

<Style x:Key="SliderStyle1" TargetType="{x:Type Slider}"> <Setter Property="Stylus.IsPressAndHoldEnabled" Value="false"/> <Setter Property="Background" Value="Transparent"/> <Setter Property="BorderBrush" Value="Transparent"/> <Setter Property="Foreground" Value="{StaticResource SliderThumb.Static.Foreground}"/> <Setter Property="Template" Value="{StaticResource SliderHorizontal}"/> <Style.Triggers>  <Trigger Property="Orientation" Value="Vertical"><Setter Property="Template" Value="{StaticResource SliderVertical}"/>  </Trigger> </Style.Triggers></Style>

上述代码中我们可以看发现Slider使用的模板是SliderHorizontal,但当他的排列方向为Vertical时,则使用SliderVertical模板。

因为Slider控件默认是横向布局,所以我们先修改SliderHorizontal模板,对Slider进行下美化。

同样,我们继续F12跟进SliderHorizontal的定义。

 <ControlTemplate x:Key="SliderHorizontal" TargetType="{x:Type Slider}"><Border x:Name="border" BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}" Background="{TemplateBinding Background}" SnapsToDevicePixels="True"> <Grid>  <Grid.RowDefinitions><RowDefinition Height="Auto"/><RowDefinition Height="Auto" MinHeight="{TemplateBinding MinHeight}"/><RowDefinition Height="Auto"/>  </Grid.RowDefinitions>  <TickBar x:Name="TopTick" Fill="{TemplateBinding Foreground}" Height="4" Margin="0,0,0,2" Placement="Top" Grid.Row="0" Visibility="Collapsed"/>  <TickBar x:Name="BottomTick" Fill="{TemplateBinding Foreground}" Height="4" Margin="0,2,0,0" Placement="Bottom" Grid.Row="2" Visibility="Collapsed"/>  <Border x:Name="TrackBackground" BorderBrush="{StaticResource SliderThumb.Track.Border}" BorderThickness="1" Background="{StaticResource SliderThumb.Track.Background}" Height="4.0" Margin="5,0" Grid.Row="1" VerticalAlignment="center"><Canvas Margin="-6,-1"> <Rectangle x:Name="PART_SelectionRange" Fill="{DynamicResource {x:Static SystemColors.HighlightBrushKey}}" Height="4.0" Visibility="Hidden"/></Canvas>  </Border>  <Track x:Name="PART_Track" Grid.Row="1"><Track.DecreaseRepeatButton> <RepeatButton Command="{x:Static Slider.DecreaseLarge}" /></Track.DecreaseRepeatButton><Track.IncreaseRepeatButton> <RepeatButton Command="{x:Static Slider.IncreaseLarge}" /></Track.IncreaseRepeatButton><Track.Thumb> <Thumb x:Name="Thumb" Focusable="False" Height="18" OverridesDefault Template="{StaticResource SliderThumbHorizontalDefault}" VerticalAlignment="Center" Width="11"/></Track.Thumb>  </Track> </Grid></Border><ControlTemplate.Triggers> <Trigger Property="TickPlacement" Value="TopLeft">  <Setter Property="Visibility" TargetName="TopTick" Value="Visible"/>  <Setter Property="Template" TargetName="Thumb" Value="{StaticResource SliderThumbHorizontalTop}"/>  <Setter Property="Margin" TargetName="TrackBackground" Value="5,2,5,0"/> </Trigger> <Trigger Property="TickPlacement" Value="BottomRight">  <Setter Property="Visibility" TargetName="BottomTick" Value="Visible"/>  <Setter Property="Template" TargetName="Thumb" Value="{StaticResource SliderThumbHorizontalBottom}"/>  <Setter Property="Margin" TargetName="TrackBackground" Value="5,0,5,2"/> </Trigger> <Trigger Property="TickPlacement" Value="Both">  <Setter Property="Visibility" TargetName="TopTick" Value="Visible"/>  <Setter Property="Visibility" TargetName="BottomTick" Value="Visible"/> </Trigger> <Trigger Property="IsSelectionRangeEnabled" Value="true">  <Setter Property="Visibility" TargetName="PART_SelectionRange" Value="Visible"/> </Trigger> <Trigger Property="IsKeyboardFocused" Value="true">  <Setter Property="Foreground" TargetName="Thumb" Value="Blue"/> </Trigger></ControlTemplate.Triggers>  </ControlTemplate>

SliderHorizontal模板的定义比较多,这里直接定义到重点内容——轨道。

首先定位到代码【Border x:Name="TrackBackground"】,这里的TrackBackground是控制滑块背景颜色的,我们修改其背景颜色和边框颜色。

 <Border x:Name="TrackBackground" BorderBrush="Red" BorderThickness="1" Background="Yellow" Height="4.0" Margin="5,0" Grid.Row="1" VerticalAlignment="center">  <Canvas Margin="-6,-1"><Rectangle x:Name="PART_SelectionRange" Fill="{DynamicResource {x:Static SystemColors.HighlightBrushKey}}" Height="4.0" Visibility="Hidden"/>  </Canvas> </Border>

得到效果如下:

但我们有时候需要拖动前后颜色不一样,此时就靠背景修改就不够了。

在SliderHorizontal模板中找到DecreaseRepeatButton和IncreaseRepeatButton;这两个一个是拖动前覆盖颜色,一个是拖动后覆盖颜色。

修改代码如下:

<Track x:Name="PART_Track" Grid.Row="1"> <Track.DecreaseRepeatButton>  <RepeatButton Height="4" Background="Gray" Command="{x:Static Slider.DecreaseLarge}" /> </Track.DecreaseRepeatButton> <Track.IncreaseRepeatButton>  <RepeatButton Height="4" Background="Green" Command="{x:Static Slider.IncreaseLarge}" /> </Track.IncreaseRepeatButton>    <Track.Thumb>  <Thumb x:Name="Thumb" Focusable="False" Height="18" OverridesDefault Template="{StaticResource SliderThumbHorizontalDefault}" VerticalAlignment="Center" Width="11"/> </Track.Thumb></Track>

得到效果如下:

注意这里的Height一定要给值。

现在,我们设置好了轨道,可当前的滑块的颜色我们有点不太满意,所以我们再来处理下滑块。

滑块模板的模板是上方代码中粉色标记的代码——Thumb。

可以看到Thumb使用的是SliderThumbHorizontalDefault模板,所以,我们继续F12跟进SliderThumbHorizontalDefault查看它的定义。

<ControlTemplate x:Key="SliderThumbHorizontalDefault" TargetType="{x:T
源文地址:https://www.guoxiongfei.cn/cntech/23298.html