wpf - 如何始终在拇指上显示 slider 的当前位置

Question

如何在拇指下方显示带有工具提示/标签的 slider 控件，在用户拖动/不拖动的情况下始终显示值(时间跨度)。

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

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

如果我的方向错误，请建议我更好的想法。谢谢!

Answer 1

您可以重新设置 Thumb 的样式来展示这个效果。以下是制作圆形 Thumb 的示例与 .Value parent 的属性(property)Slider出现在圈内。

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