WPF:如何为滑翔机控件的单个RepeatButton设置样式？

Question

我想设计一个滑块，这样我就可以为拇指左侧的曲目指定颜色，而在拇指右侧的曲目上可以指定不同的颜色。我读过this answer，但它只处理两个曲目之间共享的单一风格(拇指两侧)。

​

​

Answer 1

受Andy的评论启发，我右击控件并选择Edit，提取了默认的Slider控件模板。我个人不需要显示任何滴答值，所以我决定将滑块的最小属性和最大属性分别更改为0和1。

我用this answer regarding gradients中的代码来修改滑翔机的轨道背景，LinearGradientBrush在0,0和1,0之间，其中偏移量(两种颜色是分开的)绑定到滑翔机的值(方便地在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>