时间戳

首页 > 解决方案 > 如何为 WPF 中的滑块制作自定义字符串刻度标签

wpf - 如何为 WPF 中的滑块制作自定义字符串刻度标签

问题描述

我正在制作一个界面，用户可以在其中单击滑块。我希望绑定的标签出现在他们的数字分数旁边。100应该说完美。75应该说很不错了。50应该说平均。25 应该说低于平均水平，0 应该说失败。（见下文）我尝试使用转换器，但它们失败了，我尝试使用控制模板，但它们失败了。任何帮助，将不胜感激。谢谢你。

--- 完美（100 分）
|
|
- 非常好（75 分）
|
|
- 平均（50 分）
|
|
- 低于平均水平（25 分）
|
|
--- 失败（0 分）

标签： wpfxamldata-bindingslider

解决方案

当你给这个线程的所有尝试都失败时：
https ://social.msdn.microsoft.com/Forums/vstudio/en-US/8d64b2dc-4dfd-4b05-aa95-e24aaaed53af/i-want-to-add-lables- with-text-in-ticks-of-slider?forum=wpf
我有一个快速而肮脏的解决方案：将滑块放在网格中并在下一行（对于水平滑块，它将是垂直滑块的列）放置足够的列（或垂直滑块的行）来保存您的标签，如下所示：

<Grid>
    <Grid.ColumnDefinitions>
        <ColumnDefinition Width="Auto" />
        <ColumnDefinition Width="*" />
        <ColumnDefinition Width="Auto" />
        <ColumnDefinition Width="*" />
        <ColumnDefinition Width="Auto" />
        <ColumnDefinition Width="*" />
        <ColumnDefinition Width="Auto" />
        <ColumnDefinition Width="*" />
        <ColumnDefinition Width="Auto" />
    </Grid.ColumnDefinitions>
    <Grid.RowDefinitions>
        <RowDefinition Height="Auto" />
        <RowDefinition Height="Auto" />
    </Grid.RowDefinitions>
    <Slider Grid.ColumnSpan="9" Minimum="0" Maximum="100" Ticks="0, 25, 50, 75, 100" IsSnapToTickEnabled="True" Margin="3" />
    <Label Content="Failed" Grid.Row="1" Style="{StaticResource TickLabel}" />
    <Label Content="Below average" Grid.Row="1" Grid.Column="2" Style="{StaticResource TickLabel}" />
    <Label Content="Average" Grid.Row="1" Grid.Column="4" Style="{StaticResource TickLabel}" />
    <Label Content="Above average" Grid.Row="1" Grid.Column="6" Style="{StaticResource TickLabel}" />
    <Label Content="Perfect" Grid.Row="1" Grid.Column="8" Style="{StaticResource TickLabel}" />
</Grid>

对于标签样式：

<UserControl.Resources>
    <Style TargetType="Label" x:Key="TickLabel">
        <Style.Setters>
            <Setter Property="LayoutTransform">
                <Setter.Value>
                    <RotateTransform Angle="-90" />
                </Setter.Value>
            </Setter>
            <Setter Property="Margin" Value="-3" />
            <Setter Property="HorizontalContentAlignment" Value="Right" />
        </Style.Setters>
    </Style>
</UserControl.Resources>

如果您需要更多这些并且具有不同的标签/刻度位置，我将创建一个用户控件，其中标签内容（及其位置）给出为Dictionary<double, string>位置介于 0.0 和 1.0 之间（完整范围的百分比）滑块）。

推荐阅读