如何调整Slider控件Thumb滑块的ZIndex使其显示在进度条上层

问题原因 #

1. Panel.ZIndex是Panel类的附加属性，仅当元素的直接父容器是Grid、Canvas等Panel派生类时才会生效。你为Thumb设置的ZIndex之所以无效，是因为Thumb的直接父容器是WPF原生Track控件的内部布局容器，该容器不识别Panel.ZIndex属性，设置的数值不会生效。
2. Track控件默认的视觉层排列规则是左右进度条（两个RepeatButton）层级高于Thumb，所以进度条会覆盖在滑块上方，就是你遇到的显示问题。

解决方法 #

修改自定义Slider的控件模板，将Thumb从Track的属性定义中移出，放到和Track同级的Grid同一行中，利用Grid默认的后声明元素层级更高的规则，让Thumb天然显示在进度条上层，修改后的ControlTemplate代码如下：

<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.IncreaseRepeatButton>
                <RepeatButton Style="{StaticResource SliderRepeatButton}" Command="Slider.IncreaseLarge"/>
            </Track.IncreaseRepeatButton>
        </Track>
        <!-- 单独声明Thumb，层级高于上方的Track -->
        <Thumb Grid.Row="1" Style="{StaticResource SliderThumb}" 
               VerticalAlignment="Center"
               HorizontalAlignment="Left">
            <Thumb.RenderTransform>
                <TranslateTransform X="{Binding ElementName=PART_Track, Path=Thumb.HorizontalOffset}"/>
            </Thumb.RenderTransform>
        </Thumb>
    </Grid>
</ControlTemplate>

修改后不需要再为Thumb设置任何ZIndex属性，滑块就会正常显示在进度条上层，Slider原有的拖拽、点击跳转等功能完全不受影响。

内容的提问来源于stack exchange，提问作者VALine