How to show current position of a slider over the thumb always

Question

How to show a slider control with a tooltip/label under the thumb showing the value (timespan) always while it moves with/without user dragging.

I tried AutoToolTipPlacement="BottomRight" AutoToolTipPrecision="3" on my slider. But Tooltip gets displayed only when i drag the thumb. I want that shown even when i invoke playing slider with a button control.(like video player)

The point is to reduce the size of my usercontrol and avoid extra labels for timers or position.

If i am in the wrong direction, please suggest me better ideas. Thanks!

Protozoan

What you are trying to do will probably require you to override the control template of the slider. Do you have an image of what you want it to look like? – Linolinocut

well, i dont have an image, still something like in this video control after you play once the Ad is over : huffingtonpost.com/2015/02/20/… (please look into the slider and the time running right over the thumb) – Protozoan

Answer 1

You can re-style the Thumb to show this effect. Below is a sample that makes a circular Thumb with the .Value property of the parent Slider showing up inside the circle.

<Style TargetType="{x:Type Thumb}">
    <Setter Property="Focusable" Value="false"/>
    <Setter Property="OverridesDefaultStyle" Value="true"/>
    <Setter Property="Height" Value="20"/>
    <Setter Property="Width" Value="20"/>
    <Setter Property="Template">
        <Setter.Value>
            <ControlTemplate TargetType="{x:Type Thumb}">
                <Canvas SnapsToDevicePixels="true">
                    <Grid Height="20" Width="20">
                        <Ellipse x:Name="Background" 
                            Fill="#FFA3A3A3"
                            Height="20" Width="20"
                            Stroke="#FFDADADA"/>
                        <TextBlock HorizontalAlignment="Center"
                            VerticalAlignment="Center"
                            Foreground="Black"
                            FontSize="9"
                            Text="{Binding Value, RelativeSource={RelativeSource AncestorType={x:Type Slider}}, Converter={StaticResource ConvertToIntegerConverter}}"/>
                    </Grid>
                </Canvas>
                <ControlTemplate.Triggers>
                    <Trigger Property="IsMouseOver" Value="true">
                        <Setter Property="Fill" TargetName="Background" 
                            Value="#FFDADADA"/>
                    </Trigger>
                    <Trigger Property="IsDragging" Value="true">
                        <Setter Property="Fill" TargetName="Background" 
                            Value="#FFF2F2F2"/>
                    </Trigger>
                    <Trigger Property="IsEnabled" Value="false">
                        <Setter Property="Fill" TargetName="Background" 
                            Value="#FFF2F2F2"/>
                    </Trigger>
                </ControlTemplate.Triggers>
            </ControlTemplate>
        </Setter.Value>
    </Setter>
</Style>

I've used an IValueConverter to make sure the the value displayed is always an integer, since the normal .Value property is a decimal. You would want to use your own converter to properly format the information that you want displayed.

You can make the text or numbers appear wherever you want by re-styling the Thumb.

EDIT:

If you want to show the text above or below the actual thumb, it's a pretty minor change to the styling:

                    <Grid>
                        <Grid.RowDefinitions>
                            <RowDefinition Height="20"/>
                            <RowDefinition Height="20"/>
                        </Grid.RowDefinitions>
                        <Ellipse x:Name="Background" 
                            Fill="#FFA3A3A3"
                            Height="20" Width="20"
                            Stroke="#FFDADADA"/>
                        <TextBlock Grid.Row="1" HorizontalAlignment="Center"
                            VerticalAlignment="Center"
                            Foreground="White"
                            FontSize="9"
                            Text="{Binding Value, RelativeSource={RelativeSource AncestorType={x:Type Slider}}, Converter={StaticResource ConvertToIntegerConverter}}"/>
                    </Grid>

Linolinocut

Thanks Stewbob. I tried styling like you mentioned. Seems to work. The only drawback is when i try showing whole timespan(ex; 01:05:44:233 ) in thumb, it kinda looks ugly blocking the track substantially. So, i guess i have to try dropping the idea of showing as a thumb and place it seperatly under the slider as a label/textblock. – Protozoan