WPF：如何设置 Slider 控件的单个 RepeatButton 的样式？

Question

我想设计一个滑块的样式，以便我可以为拇指左侧的轨道指定一种颜色，并为拇指右侧的轨道指定一种不同的颜色。我读过 this answer，但它只涉及在两个轨道片段（在拇指的两侧）之间共享的单一样式。

Answer 1

受 Andy 评论的启发，我通过右键单击控件并选择编辑复制来提取默认的 Slider 控件模板。我个人不需要显示任何刻度值，所以我决定将滑块的 Minimum 和 Maximum 属性分别更改为 0 和 1。

我绕过 this answer regarding gradients 中的代码，将滑块的轨道背景更改为 0,0 和 1,0 之间的 LinearGradientBrush，其中偏移量（两种颜色分开）绑定到滑块的值（方便地介于 0 和 1 之间）。在代码中，它看起来像这样：

<!-- From the Slider's default control template -->
<Border x:Name="TrackBackground" ...>
    <Border.Background>
        <LinearGradientBrush StartPoint="0,0" EndPoint="1,0">
        <GradientStop Color="Green" Offset="{Binding RelativeSource={RelativeSource AncestorType={x:Type Slider}}, Path=Value}" />
        <GradientStop Color="Red" Offset="{Binding RelativeSource={RelativeSource AncestorType={x:Type Slider}}, Path=Value}" />
    </LinearGradientBrush>
    </Border.Background>
    ...
</Border>

Answer 2

这是垂直滑块模板。

你会有很多不同，尤其是你的拇指。

我对这件事有一些相当具体的要求。

    <ControlTemplate x:Key="GraphSliderTemplate" TargetType="{x:Type Slider}">
        <Grid>
            <Grid.ColumnDefinitions>
                <ColumnDefinition Width="Auto"/>
                <ColumnDefinition MinWidth="{TemplateBinding MinWidth}" Width="Auto"/>
                <ColumnDefinition Width="Auto"/>
            </Grid.ColumnDefinitions>
                <Border x:Name="TrackBackground" BorderBrush="#FFD6D6D6" BorderThickness="1" Background="#FFE7EAEA" Grid.Column="1" HorizontalAlignment="Center" Margin="0,5" Width="6">
                    <Canvas Margin="-1,-6">
                        <Rectangle x:Name="PART_SelectionRange" Fill="{DynamicResource {x:Static SystemColors.HighlightBrushKey}}" Visibility="Hidden" Width="6"/>
                    </Canvas>
                </Border>
                <Track x:Name="PART_Track" Grid.Column="1">
                    <Track.DecreaseRepeatButton>
                        <RepeatButton Command="Slider.DecreaseLarge">
                            <RepeatButton.Style>
                                <Style TargetType="{x:Type RepeatButton}">
                                    <Setter Property="OverridesDefaultStyle" Value="True"/>
                                    <Setter Property="Background" Value="Transparent"/>
                                    <Setter Property="Focusable" Value="False"/>
                                    <Setter Property="IsTabStop" Value="False"/>
                                    <Setter Property="IsHitTestVisible" Value="True"/>
                                    <Setter Property="Template">
                                        <Setter.Value>
                                            <ControlTemplate TargetType="{x:Type RepeatButton}">
                                                <Rectangle Fill="Salmon" Height="{TemplateBinding Height}" Width="{TemplateBinding Width}"/>
                                            </ControlTemplate>
                                        </Setter.Value>
                                    </Setter>
                                </Style>
                            </RepeatButton.Style>
                        </RepeatButton>
                    </Track.DecreaseRepeatButton>
                    <Track.IncreaseRepeatButton>
                        <RepeatButton Command="Slider.IncreaseLarge">
                            <RepeatButton.Style>
                                <Style TargetType="{x:Type RepeatButton}">
                                    <Setter Property="OverridesDefaultStyle" Value="True"/>
                                    <Setter Property="Background" Value="Transparent"/>
                                    <Setter Property="Focusable" Value="False"/>
                                    <Setter Property="IsTabStop" Value="False"/>
                                    <Setter Property="IsHitTestVisible" Value="True"/>
                                    <Setter Property="Template">
                                        <Setter.Value>
                                            <ControlTemplate TargetType="{x:Type RepeatButton}">
                                                <Rectangle Fill="{TemplateBinding Background}" Height="{TemplateBinding Height}" Width="{TemplateBinding Width}"/>
                                            </ControlTemplate>
                                        </Setter.Value>
                                    </Setter>
                                </Style>
                            </RepeatButton.Style>
                        </RepeatButton>
                    </Track.IncreaseRepeatButton>
                    <Track.Thumb>
                        <Thumb x:Name="Thumb" Focusable="False" 
                                   Height="6"
                                   Width="6"
                                   OverridesDefaultStyle="True" 
                                   VerticalAlignment="Top" 
                                   IsHitTestVisible="True"
                                   >
                            <Thumb.Template>
                                <ControlTemplate TargetType="{x:Type Thumb}">
                                    <Grid HorizontalAlignment="Center" UseLayoutRounding="True" VerticalAlignment="Center"
                                          IsHitTestVisible="True"
                                          >
                                        <Path x:Name="grip" Data="{StaticResource FlatStar}" Fill="Red" Stretch="Fill" Stroke="DarkRed"/>
                                    </Grid>
                                    <ControlTemplate.Triggers>
                                        <Trigger Property="IsMouseOver" Value="True">
                                            <Setter Property="Fill" TargetName="grip" Value="#FFDCECFC"/>
                                            <Setter Property="Stroke" TargetName="grip" Value="#FF7EB4EA"/>
                                        </Trigger>
                                        <Trigger Property="IsDragging" Value="True">
                                            <Setter Property="Fill" TargetName="grip" Value="#FFDAECFC"/>
                                            <Setter Property="Stroke" TargetName="grip" Value="#FF569DE5"/>
                                        </Trigger>
                                        <Trigger Property="IsEnabled" Value="False">
                                            <Setter Property="Fill" TargetName="grip" Value="#FFF0F0F0"/>
                                            <Setter Property="Stroke" TargetName="grip" Value="#FFD9D9D9"/>
                                        </Trigger>
                                    </ControlTemplate.Triggers>
                                </ControlTemplate>
                            </Thumb.Template>
                        </Thumb>
                    </Track.Thumb>
                </Track>
            </Grid>
            <ControlTemplate.Triggers>
                <Trigger Property="IsKeyboardFocused" Value="True">
                    <Setter Property="Foreground" TargetName="Thumb" Value="Blue"/>
                </Trigger>
            </ControlTemplate.Triggers>
        </ControlTemplate>

WPF：如何设置 Slider 控件的单个 RepeatButton 的样式？

WPF: How to style the individual RepeatButton of a Slider control?

wpf

xaml

user-interface

custom-controls