All geek questions in one place

How to show the current position of the slider above the thumb

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

I tried AutoToolTipPlacement = "BottomRight" AutoToolTipPrecision = "3" on my slider. But Tooltip is only displayed when I drag my thumb. I want this to be shown even when I call up the slider using the control button (e.g. video player)

The point is to reduce the size of my user control and avoid additional tags for timers or positions.

If I'm in the wrong direction, offer me the best ideas. Thanks!

+6
source share
1 answer

You can change the Thumb style to show this effect. Below is a sample in which a circular Thumb with the .Value property of the parent Slider displayed 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 used IValueConverter to make sure that the displayed value is always an integer, since the normal .Value property is decimal. You would like to use your own converter to properly format the information you want to display.

enter image description here

You can make text or numbers appear where you want by re-modeling Thumb .

EDIT:

If you want to show text above or below the actual thumb, this is a pretty minor style change:

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

enter image description here

+8
source

Source: https://habr.com/ru/post/982801/

More articles:


All Articles