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" />
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).
<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>
