WPF Layering (ZIndex) of Thumb in Slider style

Question

I have a custom Slider template and I want to place a content that sits above the Decrease and Repeat buttons but below the thumb. Ive tried adding zindex to the rectangle, which make it appear above everything, but I cannot figure out how to make the thumb appear above the rectangle

<!-- 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>

Here is the relevant style for the thumb

<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>

please add snapshot for slider control.http://stackoverflow.com/questions/24508167/track-bar-control-for-wpf/24511141#24511141 — Heena, Jul 15 '14 at 11:58

score 0 · Answer 1 · answered Jul 15 '14 at 13:58

here is a solution for placing your custom content over RepeatButton of a 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>

Idea is to leverage the Template property of RepeatButton and by using a custom ControlTemplate apply the desired apperance

there are other possible workaround using opacity masks etc. but may be a bit complex to align properly. so if above does not work your expected way, we can opt for that too.

WPF Layering (ZIndex) of Thumb in Slider style

1 Answers1