滑块样式中 Thumb 的 WPF 分层（ZIndex）

Question

我有一个自定义 Slider 模板，我想放置一个位于“减少”和“重复”按钮上方但位于拇指下方的内容。我尝试将 zindex 添加到矩形，使其显示在所有内容之上，但我无法弄清楚如何让拇指出现在矩形上方

<!-- This is what I want to appear above the repeatbuttons but below the thumb -->
<Rectangle Height="8" Width="8" Fill="Yellow" Grid.Row="1" Panel.ZIndex="1" />

<Track x:Name="PART_Track" Grid.Row="1">
    <Track.DecreaseRepeatButton>
        <RepeatButton Command="{x:Static Slider.DecreaseLarge}" Style="{StaticResource DecreaseSliderRepeatButtonStyle}"/>
    </Track.DecreaseRepeatButton>
    <Track.IncreaseRepeatButton>
        <RepeatButton Command="{x:Static Slider.IncreaseLarge}" Style="{StaticResource IncreaseSliderRepeatButtonStyle}"/>
    </Track.IncreaseRepeatButton>

    <Track.Thumb>
        <Thumb x:Name="Thumb" Style="{StaticResource HorizontalSliderThumbStyle}"/>
    </Track.Thumb>
</Track>

这是拇指的相关样式

<Style x:Key="HorizontalSliderThumbStyle" TargetType="{x:Type Thumb}">
    <Setter Property="Panel.ZIndex" Value="100"/>
    <Setter Property="Focusable" Value="false"/>
    <Setter Property="OverridesDefaultStyle" Value="true"/>
    <Setter Property="Foreground" Value="Gray"/>
    <Setter Property="Cursor" Value="Hand"/>
    <Setter Property="Template">
        <Setter.Value>
            <ControlTemplate TargetType="{x:Type Thumb}">
                <Border Background="#E6323232" CornerRadius="8" Height="16">
                    <Grid>
                        <Grid.ColumnDefinitions>
                            <ColumnDefinition Width="Auto"/>
                            <ColumnDefinition Width="Auto"/>
                        </Grid.ColumnDefinitions>
                        <!--<TextBlock FontFamily="Arial" x:Name="tbPlaybackTime" Margin="7,0,7,0" Text="09:35:00" FontSize="10" Foreground="#eee" Background="Transparent" VerticalAlignment="Center"/>-->
                        <TextBlock FontFamily="Arial" x:Name="tbPlaybackTime" Margin="7,0,4,0" Text="09:35:00" FontSize="10" Foreground="#eee" Background="Transparent" VerticalAlignment="Center"/>
                        <Ellipse Grid.Column="1" Height="16" Width="16" Panel.ZIndex="10000">
                            <Ellipse.Fill>
                                <RadialGradientBrush GradientOrigin="0.5,0" RadiusX="1" Center="0.5,0.5" >
                                    <RadialGradientBrush.GradientStops>
                                        <GradientStop Color="#ffffff" Offset="0.3" />
                                        <GradientStop Color="#cccccc" Offset="0.8" />
                                    </RadialGradientBrush.GradientStops>
                                </RadialGradientBrush>
                            </Ellipse.Fill>
                            <Ellipse.Effect>
                                <DropShadowEffect BlurRadius="3" Color="Black" Direction="270" Opacity="0.8" ShadowDepth="1" />
                            </Ellipse.Effect>
                        </Ellipse>
                    </Grid>
                </Border>
            </ControlTemplate>
        </Setter.Value>
    </Setter>
</Style>

Answer 1

这是一种将您的自定义内容放在RepeatButton 或Slider 上的解决方案

    <Track Grid.Row="1"
           x:Name="PART_Track">
        <Track.Resources>
            <ControlTemplate TargetType="RepeatButton"
                             x:Key="myRepeatbutton">
                <Grid Background="Transparent">
                    <RepeatButton IsHitTestVisible="False"
                                  Content="{TemplateBinding Content}" 
                                  Style="{TemplateBinding Style}" />
                    <Rectangle Height="8"
                               Width="8"
                               Fill="Yellow" />
                </Grid>
            </ControlTemplate>
        </Track.Resources>
        <Track.DecreaseRepeatButton>
            <RepeatButton Command="Slider.DecreaseLarge"
                          Style="{StaticResource DecreaseSliderRepeatButtonStyle}"
                          Template="{StaticResource myRepeatbutton}" />
        </Track.DecreaseRepeatButton>
        <Track.Thumb>
            <Thumb Style="{StaticResource HorizontalSliderThumbStyle}"/>
        </Track.Thumb>
        <Track.IncreaseRepeatButton>
            <RepeatButton Command="Slider.IncreaseLarge"
                          Style="{StaticResource IncreaseSliderRepeatButtonStyle}"
                          Template="{StaticResource myRepeatbutton}" />
        </Track.IncreaseRepeatButton>
    </Track>

想法是利用RepeatButton 的Template 属性并使用自定义ControlTemplate 应用所需的外观

使用不透明蒙版等还有其他可能的解决方法，但正确对齐可能有点复杂。因此，如果上述方法无法达到您的预期效果，我们也可以选择。