wpf滑块刻度标签 [英] wpf slider tick label

问题描述

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

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.

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

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.

使标签沿刻度线出现的任何其他方法.我希望以WPF的方式实现这一点，也许是重写依赖项属性，而不是在后面的代码中.

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.

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

推荐答案

右键单击滑块->编辑模板->编辑副本并自定义Thumb(例如，为拇指本身创建另一个模板，并添加一个附加Label) ).

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

例如，这在滑块本身下方的标签中显示了当前滑块值. 拇指的普通画布"将移动到堆栈面板中.该标签放置在拇指的原始路径下方，并绑定到父"模板的slider.value. 尽管它仅显示实际的滑块值(为两倍)，但这可能会为您提供获得自己的解决方案的方向...

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>

这篇关于wpf滑块刻度标签的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！