WPF Slider样式
Posted
tags:
篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了WPF Slider样式相关的知识,希望对你有一定的参考价值。
简述
?? WPF中Slider分为三部分,滑块类型为Thumb;进度条类型为RepeatButton,其中:位于滑块左侧或下侧部分为DecreaseRepeatButton,位于滑块右侧或上侧部分为IncreaseRepeatButton。
?? 设置Slider样式时,一般单独设置三部分的样式(Style),然后在Sldier的样式(Style)中引用它们。
代码示例
<Style TargetType="{x:Type Thumb}" x:Key="SliderThumbStyle">
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type Thumb}">
<Ellipse Width="25" Height="25" Fill="Black"/>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
<Style TargetType="RepeatButton" x:Key="Slider_DecreaseRepeatBtnStyle">
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="RepeatButton">
<Border SnapsToDevicePixels="True" Background="DeepSkyBlue" BorderThickness="1"
CornerRadius="5" BorderBrush="DeepSkyBlue" Height="10"/>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
<Style TargetType="{x:Type Slider}">
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="Slider">
<Grid>
<Border Name="PART_Border" BorderBrush="Black" BorderThickness="1" CornerRadius="5"
Padding="2" Width="{TemplateBinding Width}" Height="10" Background="LightGray"
HorizontalAlignment="Stretch" VerticalAlignment="Center">
</Border>
<Track Name="PART_Track">
<Track.DecreaseRepeatButton>
<RepeatButton Style="{StaticResource Slider_DecreaseRepeatBtnStyle}">
</RepeatButton>
</Track.DecreaseRepeatButton>
<Track.Thumb>
<Thumb Style="{StaticResource SliderThumbStyle}" />
</Track.Thumb>
</Track>
</Grid>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
结果演示
补充
- Thumb样式可改为图片显示方式,将Ellipse的Fill属性改为使用ImageBrush填充即可;
- 代码中未引用IncreaseRepeatButton样式,在Slider样式中按DecreaseRepeatButton方式添加。
以上是关于WPF Slider样式的主要内容,如果未能解决你的问题,请参考以下文章