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

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

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

I tried AutoToolTipPlacement="BottomRight" AutoToolTipPrecision="3" on my slider. But Tooltip gets displayed only when i drag the thumb. I want that shown even when i invoke playing slider with a button control.(like video player)

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

The point is to reduce the size of my usercontrol and avoid extra labels for timers or position.

关键是要减小我的usercontrol的大小，避免额外的标签定时器或位置。

If i am in the wrong direction, please suggest me better ideas. Thanks!

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

1 个解决方案

#1

You can re-style the Thumb to show this effect. Below is a sample that makes a circular Thumb with the .Value property of the parent Slider showing up inside the circle.

您可以重新设置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>

I've used an IValueConverter to make sure the the value displayed is always an integer, since the normal .Value property is a decimal. You would want to use your own converter to properly format the information that you want displayed.

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

You can make the text or numbers appear wherever you want by re-styling the Thumb.

您可以通过重新设置Thumb样式，使文本或数字显示在任何位置。

EDIT:

编辑：

If you want to show the text above or below the actual thumb, it's a pretty minor change to the styling:

如果你想在实际的拇指上方或下方显示文字，那么它对造型来说是一个很小的改变：

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