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

Question

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

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

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

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

Answer 1

您可以重新设置样式Thumb以显示此效果。下面是一个制作圆形的示例，Thumb其父.Value属性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>

我使用 anIValueConverter来确保显示的值始终是整数，因为普通.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>