wpf滑块刻度标签

Question

WPF Slider刻度标签:
我正在寻找一些方法来放置标签和Slider Ticks.我不认为有一个直接的方法来做到这一点.不确定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" />

Answer 1

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

\n\n

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

\n\n

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

\n