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>

结果演示

WPF:Slider样式

补充

  • Thumb样式可改为图片显示方式,将Ellipse的Fill属性改为使用ImageBrush填充即可;
  • 代码中未引用IncreaseRepeatButton样式,在Slider样式中按DecreaseRepeatButton方式添加。

转载于:https://blog.51cto.com/weiyuqingcheng/2320594

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值