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

Question

如何在拇指下方显示工具提示/标签的滑块控件,在有/无用户拖动的情况下始终显示值(时间跨度).

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

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

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

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>

我使用了一个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>