WPF滑块刻度标签

Question

WPF 滑动条刻度标签:
我正在寻找一些方法来在滑动条刻度旁放置标签。我认为没有直接的方法来实现这个功能。不确定为什么 Microsoft 没有提供这个基本功能。

在 WPF 中，如何通过使用依赖属性来实现此功能。

下面的滑动条代码示例显示时间间隔为 1、3、6、12、24。我希望这些数字出现在刻度上方/下方。如果我将标签绑定到滑动条元素，就像代码片段中所示，这些值会出现在滑动条的末尾，全部挤在一起，用逗号分隔。

是否有其他方式让标签出现在刻度旁边？我想以 WPF 的方式实现这一点，可能是通过覆盖依赖属性，而不是在代码后台实现。

<Slider Name="ServiceTime"
    Minimum="1"
    Maximum="24"
    Value="{Binding TimeInterval}"
    TickPlacement="BottomRight" 
    IsSnapToTickEnabled="True"
    Ticks ="{Binding TimeIntervalList}"
    MinWidth="450"/>

<Label Content="{Binding ElementName=ServiceTime, Path=Value}" 
    VerticalAlignment="Center" Width="100" />

- TechBang

Answer 1

右键单击您的滑块 -> 编辑模板 -> 编辑一个副本并自定义Thumb（例如创建另一个用于Thumb本身的模板并添加附加标签）。

编辑： 例如，在标签下方显示当前滑块值，滑块本身上方。将Thumb的常规Canvas移动到Stack Panel中。 标签放置在Thumb的原始路径下方，并绑定到“父”模板的slider.value。 虽然它仅显示实际的滑块值（作为double），但这可能会为您提供解决方案的方向...

<Style x:Key="CustomThumbStyle" TargetType="{x:Type Thumb}">
        <Setter Property="Focusable" Value="false"/>
        <Setter Property="OverridesDefaultStyle" Value="true"/>
        <Setter Property="Height" Value="22"/>
        <Setter Property="Width" Value="11"/>
        <Setter Property="Foreground" Value="Gray"/>
        <Setter Property="Template">
            <Setter.Value>
                <ControlTemplate TargetType="{x:Type Thumb}">
                    <StackPanel>

                        <Canvas SnapsToDevicePixels="true">

                        <Canvas.RenderTransform>
                            <TranslateTransform X="5.5" Y="11"/>
                        </Canvas.RenderTransform>
                        <Path x:Name="Background" Data="{StaticResource SliderThumbOuterBorderGeometry}" Fill="{StaticResource HorizontalSliderThumbNormalBackground}"/>
                        <Path x:Name="InnerBorder" Data="{StaticResource SliderThumbMiddleBorderGeometry}" Stroke="White"/>
                        <Path x:Name="OuterBorder" Data="{StaticResource SliderThumbOuterBorderGeometry}" Stroke="#FF929292"/>
                        <Label Margin="-5.5,12,0,-12" Background="Brown" HorizontalAlignment="Center"
                               Content="{Binding (Slider.Value),RelativeSource={RelativeSource FindAncestor, AncestorType={x:Type Slider}}}"></Label>
                    </Canvas>
                    </StackPanel>
                    <ControlTemplate.Triggers>
                        <Trigger Property="IsMouseOver" Value="true">
                            <Setter Property="Fill" TargetName="Background" Value="{StaticResource HorizontalSliderThumbHoverBackground}"/>
                            <Setter Property="Stroke" TargetName="OuterBorder" Value="{StaticResource HorizontalSliderThumbHoverBorder}"/>
                        </Trigger>
                        <Trigger Property="Foreground" Value="Blue">
                            <Setter Property="Fill" TargetName="Background" Value="{StaticResource HorizontalSliderThumbHoverBackground}"/>
                            <Setter Property="Stroke" TargetName="OuterBorder" Value="{StaticResource HorizontalSliderThumbHoverBorder}"/>
                        </Trigger>
                        <Trigger Property="IsDragging" Value="true">
                            <Setter Property="Fill" TargetName="Background" Value="{StaticResource HorizontalSliderThumbPressedBackground}"/>
                            <Setter Property="Stroke" TargetName="OuterBorder" Value="{StaticResource HorizontalSliderThumbPressedBorder}"/>
                        </Trigger>
                        <Trigger Property="IsEnabled" Value="false">
                            <Setter Property="Fill" TargetName="Background" Value="#FFF4F4F4"/>
                            <Setter Property="Stroke" TargetName="InnerBorder" Value="{x:Null}"/>
                            <Setter Property="Data" TargetName="OuterBorder" Value="{StaticResource SliderThumbDisabledGeometry}"/>
                            <Setter Property="Stroke" TargetName="OuterBorder" Value="#FFAEB1AF"/>
                        </Trigger>
                    </ControlTemplate.Triggers>
                </ControlTemplate>
            </Setter.Value>
        </Setter>
    </Style>

- Ben