WPF滑块拇指重叠RepeatButton

Question

我有一个Slider的Style，让它看起来像这样(没有红色圆圈)：

​

​

问题是，Thumb没有与RepeatButton重叠，因此我看到了那些白色边缘(红色圆圈)。如果我在RepeatButton的右侧没有CornerRadius，效果会小得多，但仍然存在，因为Thumb是一个圆。

我怎样才能防止这种情况呢？

代码如下：

<Style x:Key="SliderButtonStyleDec" TargetType="{x:Type 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="{x:Type RepeatButton}">
                <Border Background="{StaticResource ControlHighlightBackgroundBrush}" CornerRadius="4" Height="10"/>
            </ControlTemplate>
        </Setter.Value>
    </Setter>
</Style>

<Style x:Key="SliderThumbStyle" TargetType="{x:Type Thumb}">
    <Setter Property="SnapsToDevicePixels" Value="true" />
    <Setter Property="OverridesDefaultStyle" Value="true" />
    <Setter Property="Template">
        <Setter.Value>
            <ControlTemplate TargetType="Thumb">
                <StackPanel>
                    <Ellipse Height="30" Width="30" Fill="{StaticResource ControlHighlightBackgroundBrush}"></Ellipse>
                </StackPanel>
            </ControlTemplate>
        </Setter.Value>
        </Setter>
    </Style>

<ControlTemplate x:Key="HorizontalSlider" TargetType="{x:Type Slider}">
    <Grid>
        <Grid.RowDefinitions>
            <RowDefinition Height="Auto" />
            <RowDefinition Height="Auto" MinHeight="{TemplateBinding MinHeight}" />
            <RowDefinition Height="Auto" />
        </Grid.RowDefinitions>
        <Border x:Name="TrackBackground" Margin="0" CornerRadius="4" Height="10" Grid.Row="1" Background="White">
        </Border>
        <Track Grid.Row="1" x:Name="PART_Track">
            <Track.DecreaseRepeatButton>
                <RepeatButton Style="{StaticResource SliderButtonStyleDec}" Command="Slider.DecreaseLarge" />
            </Track.DecreaseRepeatButton>
            <Track.Thumb>
                <Thumb Style="{StaticResource SliderThumbStyle}" />
            </Track.Thumb>
            <Track.IncreaseRepeatButton>
                <RepeatButton Style="{StaticResource SliderButtonStyleInc}" Command="Slider.IncreaseLarge" />
            </Track.IncreaseRepeatButton>
        </Track>
    </Grid>
</ControlTemplate>

<Style TargetType="{x:Type Slider}">
    <Setter Property="SnapsToDevicePixels" Value="true" />
    <Setter Property="OverridesDefaultStyle" Value="true" />
    <Style.Triggers>
        <Trigger Property="Orientation" Value="Horizontal">
            <Setter Property="MinWidth" Value="104" />
            <Setter Property="MinHeight" Value="21" />
            <Setter Property="Template" Value="{StaticResource HorizontalSlider}" />
        </Trigger>
        <Trigger Property="Orientation" Value="Vertical">
            <Setter Property="MinWidth" Value="21" />
            <Setter Property="MinHeight" Value="104" />
            <Setter Property="Template" Value="{StaticResource VerticalSlider}" />
        </Trigger>
    </Style.Triggers>
</Style>

Answer 1

您可以使用负边距并将拇指移动到末尾：

    <ControlTemplate x:Key="HorizontalSlider" TargetType="{x:Type Slider}">
        <Grid>
            <Grid.RowDefinitions>
                <RowDefinition Height="Auto" />
                <RowDefinition Height="Auto" MinHeight="{TemplateBinding MinHeight}" />
                <RowDefinition Height="Auto" />
            </Grid.RowDefinitions>
            <Border x:Name="TrackBackground" Margin="0" CornerRadius="4" Height="10" Grid.Row="1" Background="White">
            </Border>
            <Track Grid.Row="1" x:Name="PART_Track">
                <Track.DecreaseRepeatButton>
                    <RepeatButton Style="{StaticResource SliderButtonStyleDec}" Command="Slider.DecreaseLarge" Margin="0,0,-10,0"/>
                </Track.DecreaseRepeatButton>
                <Track.IncreaseRepeatButton>
                    <RepeatButton Style="{StaticResource SliderButtonStyleInc}" Command="Slider.IncreaseLarge"  Margin="-10,0,0,0"/>
                </Track.IncreaseRepeatButton>
                <Track.Thumb>
                    <Thumb Style="{StaticResource SliderThumbStyle}" />
                </Track.Thumb>
            </Track>
        </Grid>
    </ControlTemplate>