如何始终在拇指上显示滑块的当前位置

Question

如何在滑块控件 with/without 用户拖动时始终显示值（时间跨度）的滑块控件 tooltip/label。

我在滑块上尝试了 AutoToolTipPlacement="BottomRight" AutoToolTipPrecision="3"。但只有当我拖动拇指时，工具提示才会显示。即使当我调用带有按钮控件的播放滑块时，我也希望显示它。（如视频播放器）

重点是减小我的用户控件的大小并避免为计时器或位置添加额外的标签。

如果我的方向错误，请提出更好的想法。谢谢！

Answer 1

您可以重新设置 Thumb 的样式以显示此效果。下面是一个示例，它制作了一个圆形 Thumb，父 Slider 的 .Value 属性出现在圆圈内。

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

我使用 IValueConverter 来确保显示的值始终是整数，因为正常的 .Value 属性是小数。您可能希望使用自己的转换器来正确设置要显示的信息的格式。

您可以通过重新设置 Thumb.

的样式，使文本或数字显示在任何您想要的位置

编辑：

如果您想在实际拇指的上方或下方显示文本，只需对样式进行很小的更改即可：

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

如何始终在拇指上显示滑块的当前位置

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

wpf

slider

tooltip

alwayson