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

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!

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>