wpf 滑块刻度标签

wpf slider tick label

提问by TechBang

WPF Slider tick label:
I'm looking for some way to place labels along with the Slider Ticks. I dont think there is a straight way to do this. Not sure why Microsoft has not provided this basic feature.

WPF 滑块刻度标签：
我正在寻找将标签与滑块刻度一起放置的方法。我不认为有直接的方法可以做到这一点。不知道为什么微软没有提供这个基本功能。

How can I achieve this in WPF maybe using a dependency property.

我如何在 WPF 中使用依赖属性来实现这一点。

The below slider code sample shows time interval, 1, 3, 6, 12, 24. I want these numbers to appear above/below the ticks. if I place a label binding to the slider element as shown in the code snippet, the values appear end of the slider all packed together as comma separated values.

下面的滑块代码示例显示时间间隔 1、3、6、12、24。我希望这些数字出现在刻度的上方/下方。如果我将标签绑定到代码片段中所示的滑块元素，则这些值会出现在滑块的末尾，所有这些值都以逗号分隔值的形式打包在一起。

Any other way to have the labels appear along the ticks. I want this in WPF way, maybe overriding a dependency property, not in the code behind.

使标签沿刻度出现的任何其他方式。我希望以 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" />

回答by Ben

Right click on your slider -> Edit Template -> Edit a copy and customize the Thumb (creating another template for the thumb itself and adding an additional Label for example).

右键单击滑块 -> 编辑模板 -> 编辑副本并自定义拇指（例如，为拇指创建另一个模板并添加额外的标签）。

EDIT: This for instance shows the current slider value in the label, beneath the slider itself. The normal Canvas for the thumb is moved into a stack panel. The label is placed beneath the original paths of the thumb and binded to the slider.value of the "parent" template. Although it′s showing only the actual slider value (as a double) this might give you the direction to get your own solution...

编辑：这例如显示标签中的当前滑块值，位于滑块本身下方。拇指的普通画布被移动到堆栈面板中。标签放置在拇指的原始路径下方并绑定到“父”模板的滑块值。尽管它仅显示实际滑块值（作为双精度值），但这可能会为您提供获得自己解决方案的方向......

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