图像为 Thumb 的自定义 WPF 滑块

Posted 2023-02-18

【中文标题】图像为 Thumb 的自定义 WPF 滑块

【英文标题】：Custom WPF Slider with image as Thumb

【发布时间】：2014-09-27 22:56:29

【问题描述】：

如何以如下图的方式为 WPF 设置 Slider 控件的样式：

任何类似的样品将不胜感激。

我试过下面的代码

  <Style x:Key="SliderThumbStyle" TargetType="Thumb">
        <Setter Property="SnapsToDevicePixels" Value="true"/>
        <Setter Property="OverridesDefaultStyle" Value="false"/>
        <Setter Property="Height" Value="18"/>
        <Setter Property="Width" Value="18"/>
        <Setter Property="Template">
            <Setter.Value>
                <ControlTemplate TargetType="Thumb">
                    <Ellipse  Stroke="Black"
                          StrokeThickness="1"
                          Name="Ellipse" 
                          Fill="OrangeRed" />
                    <ControlTemplate.Triggers>
                        <Trigger Property="IsMouseOver" Value="True">
                            <Setter TargetName="Ellipse" Property="Fill" Value="Orange"/>
                        </Trigger>
                        <Trigger Property="IsEnabled" Value="false">
                            <Setter TargetName="Ellipse" Property="Fill" Value="Gray"/>
                        </Trigger>
                    </ControlTemplate.Triggers>
                </ControlTemplate>
            </Setter.Value>
        </Setter>
    </Style>

    <Style TargetType="Slider" x:Key="AppSliderStyle">
        <Setter Property="OverridesDefaultStyle" Value="true"/>
        <Setter Property="Template">
            <Setter.Value>
                <ControlTemplate TargetType="Slider">
                    <Grid>
                        <Grid.RowDefinitions>
                            <RowDefinition Height="auto" />
                            <RowDefinition Height="auto" Name="row" />
                            <RowDefinition Height="auto" />
                        </Grid.RowDefinitions>
                        <Grid.ColumnDefinitions>
                            <ColumnDefinition Width="auto" />
                            <ColumnDefinition Width="*" Name="column" />
                            <ColumnDefinition Width="auto" />
                        </Grid.ColumnDefinitions>
                        <Border Name="PART_Border"
                           BorderBrush="Black" BorderThickness="1"
                           Padding="2"
                          Grid.Row="1" Grid.Column="1"
                           Width="TemplateBinding Width"
                           Height="TemplateBinding Height"
                           Background="GreenYellow"
                           HorizontalAlignment="Stretch"
                           VerticalAlignment="Center" />
                        <Track Name="PART_Track"
                              HorizontalAlignment="Stretch"
                              VerticalAlignment="Center"
                              Grid.Row="1" Grid.Column="1"
                              Width="TemplateBinding Width"
                              Height="TemplateBinding Height">
                            <Track.Thumb>
                                <Thumb Style="StaticResource SliderThumbStyle" />
                            </Track.Thumb>
                        </Track>
                    </Grid>
                </ControlTemplate>
            </Setter.Value>
        </Setter>
    </Style>

它产生了这个：

我正在努力使左右两侧的颜色不同。我必须做出哪些改变才能做到这一点？

【问题讨论】：

不完全是。我尝试了一个示例并要求将其修改为应用程序要求的方式，如果可以，请查看编辑并帮助我。[抱歉延迟添加示例]

@JMat 类似示例是***.com/questions/24508167/… x:key"SliderRepeatButton1" 和 x:Name="TrackBackground" 将帮助您改变左右（增加和减少）边

@Jmat 你还没有在track中添加repeatButton..2repaetButtons用于增加和减少滑块的值。

你能标记这个答案吗？

【参考方案1】：

类似的例子：

Track bar /slider template for WPF

您需要编辑Both RepeatButton的样式

<Window.Resources>

    <Style x:Key="SliderRepeatButton" TargetType="RepeatButton">
        <Setter Property="SnapsToDevicePixels" Value="true" />
        <Setter Property="OverridesDefaultStyle" Value="true" />
        <Setter Property="IsTabStop" Value="false" />
        <Setter Property="Focusable" Value="false" />
        <Setter Property="Template">
            <Setter.Value>
                <ControlTemplate TargetType="RepeatButton">
                    <Border  BorderThickness="1" BorderBrush="Black" Background="Black" Height="3"/>
                </ControlTemplate>
            </Setter.Value>
        </Setter>
    </Style>

    <Style x:Key="SliderRepeatButton1" TargetType="RepeatButton">
        <Setter Property="SnapsToDevicePixels" Value="true" />
        <Setter Property="OverridesDefaultStyle" Value="true" />
        <Setter Property="Template">
            <Setter.Value>
                <ControlTemplate TargetType="RepeatButton">
                    <Border SnapsToDevicePixels="True" Background="Green"  BorderThickness="1" BorderBrush="YellowGreen" Height="3"/>
                </ControlTemplate>
            </Setter.Value>
        </Setter>
    </Style>

    <Style x:Key="SliderThumb" TargetType="Thumb">
        <Setter Property="SnapsToDevicePixels" Value="true" />
        <Setter Property="OverridesDefaultStyle" Value="true" />
        <Setter Property="Template">
            <Setter.Value>
                <ControlTemplate TargetType="Thumb">
                    <Ellipse Height="10" Width="10" Fill="Green"></Ellipse>
                </ControlTemplate>
            </Setter.Value>
        </Setter>
    </Style>

    <ControlTemplate x:Key="Slider"  TargetType="Slider">
        <Grid>
            <Grid.RowDefinitions>
                <RowDefinition Height="Auto" />
                <RowDefinition Height="Auto" MinHeight="TemplateBinding MinHeight" />
                <RowDefinition Height="Auto" />
            </Grid.RowDefinitions>
            <Track Grid.Row="1" x:Name="PART_Track"   >
                <Track.DecreaseRepeatButton>
                    <RepeatButton Style="StaticResource SliderRepeatButton1"  Command="Slider.DecreaseLarge" />
                </Track.DecreaseRepeatButton>
                <Track.Thumb>
                    <Thumb Style="StaticResource SliderThumb"  />
                </Track.Thumb>
                <Track.IncreaseRepeatButton>
                    <RepeatButton Style="StaticResource SliderRepeatButton" Command="Slider.IncreaseLarge" />
                </Track.IncreaseRepeatButton>
            </Track>
        </Grid>            
    </ControlTemplate>

    <Style x:Key="Horizontal_Slider" TargetType="Slider">
        <Setter Property="Focusable" Value="False"/>
        <Setter Property="SnapsToDevicePixels" Value="true" />
        <Setter Property="OverridesDefaultStyle" Value="true" />
        <Style.Triggers>
            <Trigger Property="Orientation" Value="Horizontal">
                <Setter Property="MinHeight" Value="21" />
                <Setter Property="MinWidth" Value="104" />
                <Setter Property="Template" Value="StaticResource Slider" />
            </Trigger>
        </Style.Triggers>
    </Style>
</Window.Resources>

<Slider Style="StaticResource Horizontal_Slider" VerticalAlignment="Center"  Value="500" Width="300" Margin="50,0,50,0"></Slider>

更新滑块缩略图

   <Style x:Key="SliderThumb" TargetType="Thumb">
        <Setter Property="SnapsToDevicePixels" Value="true" />
        <Setter Property="OverridesDefaultStyle" Value="true" />
        <Setter Property="Template">
            <Setter.Value>
                <ControlTemplate TargetType="Thumb">
                    <Ellipse Height="10" Width="10">
                        <Ellipse.Fill>
                            <ImageBrush ImageSource="Screenshot_5.png"></ImageBrush>
                        </Ellipse.Fill>
                    </Ellipse>
                </ControlTemplate>
            </Setter.Value>
        </Setter>
    </Style>

更新：带有鼠标悬停动画的滑块

您可以使用触发器添加鼠标悬停效果。

<Style x:Key="SliderThumb" TargetType="Thumb">
        <Setter Property="SnapsToDevicePixels" Value="true" />
        <Setter Property="OverridesDefaultStyle" Value="true" />
        <Setter Property="Template">
            <Setter.Value>
                <ControlTemplate TargetType="Thumb">
                    <!--Add name to ellipse to use in  controltemplate triggers-->
                    <Ellipse x:Name="Ellipse" Height="10" Width="10" Fill="Green"></Ellipse>
                    <ControlTemplate.Triggers>
                        <Trigger Property="IsMouseOver" Value="true">
                            <Setter TargetName="Ellipse" Property="Fill" Value="Yellow"></Setter>
                        </Trigger>
                    </ControlTemplate.Triggers>
                </ControlTemplate>
            </Setter.Value>
        </Setter>
    </Style>

结果

【讨论】：

谢谢。它有帮助。

首先感谢这段神奇的代码 :) 现在是一个小问题，我正在使用第一个示例（没有图像），如何更改悬停时的椭圆颜色？

@mrid ：请查看更新的答案（带有鼠标悬停动画的滑块拇指）。谢谢

【参考方案2】：

在 WPF 中创建自定义拇指/轨迹栏/滑块控件模板

<Ellipse Name="PART_Ellipse" 
                         Width="30"
                         Height="30" 
                         Stroke="Black"
                         Fill="StaticResource RoundButtonDefaultBrush"/>
            <ContentPresenter Name="PART_ContentPresenter"  ContentSource="Content" Margin="0,0,0,6" 
                                  HorizontalAlignment="Center" 
                                  VerticalAlignment="Center"
                                  TextBlock.Foreground="White"
                                  TextBlock.FontSize="18"
                                  TextBlock.FontWeight="Bold"/>

在这里查看完整的代码：

Click here for complete solution with source code

【讨论】：

如果能更新到 2021 就好了