wpf slider tick label

Question

WPF Slider tick label:
I'm looking for some way to place labels along with the Slider Ticks. I dont think there is a straight way to do this. Not sure why Microsoft has not provided this basic feature.

How can I achieve this in WPF maybe using a dependency property.

The below slider code sample shows time interval, 1, 3, 6, 12, 24. I want these numbers to appear above/below the ticks. if I place a label binding to the slider element as shown in the code snippet, the values appear end of the slider all packed together as comma separated values.

Any other way to have the labels appear along the ticks. I want this in WPF way, maybe overriding a dependency property, not in the code behind.

<Slider Name="ServiceTime"
    Minimum="1"
    Maximum="24"
    Value="{Binding TimeInterval}"
    TickPlacement="BottomRight" 
    IsSnapToTickEnabled="True"
    Ticks ="{Binding TimeIntervalList}"
    MinWidth="450"/>

<Label Content="{Binding ElementName=ServiceTime, Path=Value}" 
    VerticalAlignment="Center" Width="100" />

Answer 1

Right click on your slider -> Edit Template -> Edit a copy and customize the Thumb (creating another template for the thumb itself and adding an additional Label for example).

EDIT: This for instance shows the current slider value in the label, beneath the slider itself. The normal Canvas for the thumb is moved into a stack panel. The label is placed beneath the original paths of the thumb and binded to the slider.value of the "parent" template. Although it´s showing only the actual slider value (as a double) this might give you the direction to get your own solution...

<Style x:Key="CustomThumbStyle" TargetType="{x:Type Thumb}">
        <Setter Property="Focusable" Value="false"/>
        <Setter Property="OverridesDefaultStyle" Value="true"/>
        <Setter Property="Height" Value="22"/>
        <Setter Property="Width" Value="11"/>
        <Setter Property="Foreground" Value="Gray"/>
        <Setter Property="Template">
            <Setter.Value>
                <ControlTemplate TargetType="{x:Type Thumb}">
                    <StackPanel>

                        <Canvas SnapsToDevicePixels="true">

                        <Canvas.RenderTransform>
                            <TranslateTransform X="5.5" Y="11"/>
                        </Canvas.RenderTransform>
                        <Path x:Name="Background" Data="{StaticResource SliderThumbOuterBorderGeometry}" Fill="{StaticResource HorizontalSliderThumbNormalBackground}"/>
                        <Path x:Name="InnerBorder" Data="{StaticResource SliderThumbMiddleBorderGeometry}" Stroke="White"/>
                        <Path x:Name="OuterBorder" Data="{StaticResource SliderThumbOuterBorderGeometry}" Stroke="#FF929292"/>
                        <Label Margin="-5.5,12,0,-12" Background="Brown" HorizontalAlignment="Center"
                               Content="{Binding (Slider.Value),RelativeSource={RelativeSource FindAncestor, AncestorType={x:Type Slider}}}"></Label>
                    </Canvas>
                    </StackPanel>
                    <ControlTemplate.Triggers>
                        <Trigger Property="IsMouseOver" Value="true">
                            <Setter Property="Fill" TargetName="Background" Value="{StaticResource HorizontalSliderThumbHoverBackground}"/>
                            <Setter Property="Stroke" TargetName="OuterBorder" Value="{StaticResource HorizontalSliderThumbHoverBorder}"/>
                        </Trigger>
                        <Trigger Property="Foreground" Value="Blue">
                            <Setter Property="Fill" TargetName="Background" Value="{StaticResource HorizontalSliderThumbHoverBackground}"/>
                            <Setter Property="Stroke" TargetName="OuterBorder" Value="{StaticResource HorizontalSliderThumbHoverBorder}"/>
                        </Trigger>
                        <Trigger Property="IsDragging" Value="true">
                            <Setter Property="Fill" TargetName="Background" Value="{StaticResource HorizontalSliderThumbPressedBackground}"/>
                            <Setter Property="Stroke" TargetName="OuterBorder" Value="{StaticResource HorizontalSliderThumbPressedBorder}"/>
                        </Trigger>
                        <Trigger Property="IsEnabled" Value="false">
                            <Setter Property="Fill" TargetName="Background" Value="#FFF4F4F4"/>
                            <Setter Property="Stroke" TargetName="InnerBorder" Value="{x:Null}"/>
                            <Setter Property="Data" TargetName="OuterBorder" Value="{StaticResource SliderThumbDisabledGeometry}"/>
                            <Setter Property="Stroke" TargetName="OuterBorder" Value="#FFAEB1AF"/>
                        </Trigger>
                    </ControlTemplate.Triggers>
                </ControlTemplate>
            </Setter.Value>
        </Setter>
    </Style>