WPF：重写Slider滑动条模板，美化样式设计

于 2020-12-09 16:03:46 发布
阅读量5.4k 收藏 21
点赞数 14
分类专栏： WPF 文章标签： wpf ui
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/pandawangyt/article/details/110917668
版权
默认的Slider

看一下默认的Slider样式

<Style x:Key="BaseSliderStyle" TargetType="Slider">
    <Setter Property="Width" Value="500"/>
    <Setter Property="Margin" Value="20"/>
    <Setter Property="Maximum" Value="10"/>
    <Setter Property="IsSnapToTickEnabled" Value="True"/>
    <Setter Property="TickPlacement" Value="Both"/>
    <Setter Property="TickFrequency" Value="1"/>
    <Setter Property="SnapsToDevicePixels" Value="True"/>
</Style>

在这里插入图片描述
设置了最大值是10，上下的Tick指针都显示，间隔是1。
上图从上往下分析一下结构就是：上TickBar + 包含Thumb、RepeatButton的Track + 下TickBar，即
在这里插入图片描述
MSDN上面是这样的：
在这里插入图片描述

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

重新设计Slider

由上面的结构分析，不难写出Template样式

<Style x:Key="DefaultSliderStyle" TargetType="Slider" BasedOn="{StaticResource BaseSliderStyle}">
   <Setter Property="Template">
        <Setter.Value>
            <ControlTemplate TargetType="Slider">
                <Grid>
                    <Grid.RowDefinitions>
                        <RowDefinition Height="Auto"/>
                        <RowDefinition Height="Auto"/>
                        <RowDefinition Height="Auto"/>
                    </Grid.RowDefinitions>
                    <TickBar Name="TopTick"
                             Grid.Row="0"
                             Placement="Top"
                             Height="4"
                             Visibility="Visible"
                             Fill="Red"/>
                    <Border Name="TrackBackground" 
                            Grid.Row="1"
                            Height="4"
                            Background="Green"/>
                    <Track Name="PART_Track" Grid.Row="1">
                        <Track.DecreaseRepeatButton>
                            <RepeatButton Style="{StaticResource DefaultRepeatButtonStyle}" Command="Slider.DecreaseLarge"/>
                        </Track.DecreaseRepeatButton>
                        <Track.Thumb>
                            <Thumb Style="{StaticResource DefaultSliderThumbStyle}"/>
                        </Track.Thumb>
                        <Track.IncreaseRepeatButton>
                            <RepeatButton Style="{StaticResource DefaultRepeatButtonStyle}" Command="Slider.IncreaseLarge"/>
                        </Track.IncreaseRepeatButton>
                    </Track>
                    <TickBar Name="BottomTick"
                             Grid.Row="2"
                             Placement="Bottom"
                             Height="4"
                             Visibility="Visible"
                             Fill="Red"/>
                </Grid>
            </ControlTemplate>
        </Setter.Value>
    </Setter>
</Style>

模板包括三行，分别放上TickBar、Track、下TickBar

1、用一个Border做背景色；
2、TickBar都设置了可见（为了演示），一开始可设置都不可见；然后添加Trigger，判断TickPlacement的值取设置那个可见；
3、Thumb 是一个圆形按钮；
4、RepeatButton设置成透明；
5、Track的Name一定要设置为PART_Track，不然就不能拖动Thumb了。（在其他地方看到的解释了，微软写内部模板，这类命名方式不能改，个人经验是类似PART_XXX这类名称。）

Thumb的样式是，一个圆：

<Style x:Key="DefaultSliderThumbStyle" TargetType="Thumb">
    <Setter Property="Width" Value="15"/>
    <Setter Property="Height" Value="15"/>
    <Setter Property="Background" Value="Blue"/>
    <Setter Property="SnapsToDevicePixels" Value="True"/>
    <Setter Property="Template">
        <Setter.Value>
            <ControlTemplate TargetType="Thumb">
                <Ellipse Width="{TemplateBinding Width}" 
                         Height="{TemplateBinding Height}"
                         Fill="{TemplateBinding Background}"/>
            </ControlTemplate>
        </Setter.Value>
    </Setter>
</Style>

RepeateButton透明：

<Style x:Key="DefaultRepeatButtonStyle" TargetType="RepeatButton">
    <Setter Property="Template">
        <Setter.Value>
            <ControlTemplate TargetType="RepeatButton">
                <Border Background="Transparent"/>
            </ControlTemplate>
        </Setter.Value>
    </Setter>
</Style>

效果图：

在这里插入图片描述

美化Slider

样式：

<Window.Resources>
    <DropShadowEffect x:Key="UnhoverThumbEffect" BlurRadius="5" ShadowDepth="0" Opacity="0.3" Color="RoyalBlue"/>
    <DropShadowEffect x:Key="HoverThumbEffect" BlurRadius="5" ShadowDepth="0" Opacity="0.5" Color="RoyalBlue"/>
    <DropShadowEffect x:Key="DragThumbEffect" BlurRadius="8" ShadowDepth="0" Opacity="1" Color="RoyalBlue"/>
    <Style x:Key="DefaultSliderThumbStyle" TargetType="Thumb">
        <Setter Property="Width" Value="15"/>
        <Setter Property="Height" Value="15"/>
        <Setter Property="Background" Value="White"/>
        <Setter Property="SnapsToDevicePixels" Value="True"/>
        <Setter Property="Template">
            <Setter.Value>
                <ControlTemplate TargetType="Thumb">
                    <Ellipse Width="{TemplateBinding Width}" 
                             Height="{TemplateBinding Height}"
                             Fill="{TemplateBinding Background}"
                             Effect="{StaticResource UnhoverThumbEffect}">
                    </Ellipse>
                    <ControlTemplate.Triggers>
                        <Trigger Property="IsMouseOver" Value="True">
                            <Setter Property="Effect" Value="{StaticResource HoverThumbEffect}"/>
                            <Setter Property="Cursor" Value="Hand"/>
                        </Trigger>
                        <Trigger Property="IsDragging" Value="True">
                            <Setter Property="Effect" Value="{StaticResource DragThumbEffect}"/>
                        </Trigger>
                    </ControlTemplate.Triggers>
                </ControlTemplate>
            </Setter.Value>
        </Setter>
    </Style>
    <Style x:Key="DefaultLeftRepeatButtonStyle" TargetType="RepeatButton">
        <Setter Property="IsTabStop" Value="False"/>
        <Setter Property="Template">
            <Setter.Value>
                <ControlTemplate TargetType="RepeatButton">
                	<Border Background="RoyalBlue" Height="4"/>
                </ControlTemplate>
            </Setter.Value>
        </Setter>
    </Style>
    <Style x:Key="DefaultRightRepeatButtonStyle" TargetType="RepeatButton">
        <Setter Property="IsTabStop" Value="False"/>
        <Setter Property="Template">
            <Setter.Value>
                <ControlTemplate TargetType="RepeatButton">
                    <Border Background="Transparent"/>
                </ControlTemplate>
            </Setter.Value>
        </Setter>
    </Style>
    <Style x:Key="BaseSliderStyle" TargetType="Slider">
        <Setter Property="Width" Value="500"/>
        <Setter Property="MinHeight" Value="30"/>
        <Setter Property="Margin" Value="20"/>
        <Setter Property="Maximum" Value="100"/>
        <Setter Property="IsSnapToTickEnabled" Value="True"/>
        <!--移到鼠标点击的指定刻度点-->
        <Setter Property="IsMoveToPointEnabled" Value="True"/>
        <!--移动的最大最小距离。
            由于设置了IsMoveToPointEnabled=True，下面两个属性就没发挥作用了。
            点击RepeatButton时直接就移动到了指定位置。
            如果为False，那么由于RepeatButton绑定了Slider.DecreaseLarge命令，
            那点击左右的RepeatButton一次，就移动10个单位距离。
            同样的还有Slider.DecreaseSmall命令，移动1个单位距离-->
        <Setter Property="LargeChange" Value="10"/>
        <Setter Property="SmallChange" Value="1"/>
        <Setter Property="Background" Value="LightGray"/>
        <Setter Property="Foreground" Value="RoyalBlue"/>
        <Setter Property="SnapsToDevicePixels" Value="True"/>
    </Style>
    <Style x:Key="BeautifySliderStyle" TargetType="Slider" BasedOn="{StaticResource BaseSliderStyle}">
        <Setter Property="Template">
            <Setter.Value>
                <ControlTemplate TargetType="Slider">
                    <Grid>
                        <Grid.RowDefinitions>
                            <RowDefinition Height="Auto"/>
                            <RowDefinition MinHeight="{TemplateBinding MinHeight}" Height="Auto"/>
                            <RowDefinition Height="Auto"/>
                        </Grid.RowDefinitions>
                        <TickBar Name="TopTick"
                                 Grid.Row="0"
                                 Placement="Top"
                                 Height="4"
                                 Visibility="Collapsed"
                                 Fill="{TemplateBinding Foreground}"/>
                        <Border Name="TrackBackground" 
                                Grid.Row="1"
                                Height="4"
                                Background="{TemplateBinding Background}"/>
                        <Track Name="PART_Track" Grid.Row="1">
                            <Track.DecreaseRepeatButton>
                                <RepeatButton Style="{StaticResource DefaultLeftRepeatButtonStyle}" Command="Slider.DecreaseLarge"/>
                            </Track.DecreaseRepeatButton>
                            <Track.Thumb>
                                <Thumb Style="{StaticResource DefaultSliderThumbStyle}"/>
                            </Track.Thumb>
                            <Track.IncreaseRepeatButton>
                                <RepeatButton Style="{StaticResource DefaultRightRepeatButtonStyle}" Command="Slider.IncreaseLarge"/>
                            </Track.IncreaseRepeatButton>
                        </Track>
                        <TickBar Name="BottomTick"
                                 Grid.Row="2"
                                 Placement="Bottom"
                                 Height="4"
                                 Visibility="Collapsed"
                                 Fill="{TemplateBinding Foreground}"/>
                    </Grid>
                    <ControlTemplate.Triggers>
                        <Trigger Property="TickPlacement" Value="Both">
                            <Setter TargetName="TopTick" Property="Visibility" Value="Visible"/>
                            <Setter TargetName="BottomTick" Property="Visibility" Value="Visible"/>
                        </Trigger>
                        <Trigger Property="TickPlacement" Value="BottomRight">
                            <Setter TargetName="BottomTick" Property="Visibility" Value="Visible"/>
                        </Trigger>
                        <Trigger Property="TickPlacement" Value="TopLeft">
                            <Setter TargetName="TopTick" Property="Visibility" Value="Visible"/>
                        </Trigger>
                    </ControlTemplate.Triggers>
                </ControlTemplate>
            </Setter.Value>
        </Setter>
    </Style>
</Window.Resources>

<Grid Background="White">
    <StackPanel Orientation="Vertical" HorizontalAlignment="Center">
        <Slider Style="{StaticResource BaseSliderStyle}"/>
        <Slider Name="slider" Style="{StaticResource BeautifySliderStyle}" TickPlacement="BottomRight"/>
        <TextBlock Text="{Binding ElementName=slider, Path=Value}"/>
    </StackPanel>
</Grid>

效果图：
在这里插入图片描述

有个问题

我不想要下面那共101个刻度线，我只想要11个代表0、10、20、30、40、50、60、70、80、90、100的刻度线就行了。虽然可以设置

<Setter Property="TickFrequency" Value="10"/>
或者
<Setter Property="Ticks" Value="0,10,20,30,40,50,60,70,80,90,100"/>

但是，此时移动一次的最小单位距离就不是1了，而是10。可我还是希望最小移动单位是1，不然怎么得到如63这样的值呢。不知道有没有人有简单解决方法，欢迎交流！！！

评论 4
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值