Search code examples
wpfxamldata-bindingslider

How to make custom string tick labels for a slider in WPF


I am making an interface where the user will be able to click on a slider. I want labels binded to appear next to their numerical score. 100 should say perfect. 75 should say very good. 50 should say average. 25 should say below average and 0 should say failed. (See below) I've tried using converter's and they have failed and I have tried using control templates and they have failed. Any help would be appreciated. Thank you.

--- Perfect (at the 100 mark)
|
|
- Very Good (at the 75 mark)
|
|
- Average (at the 50 mark)
|
|
- Below Average (at the 25 mark)
|
|
--- Failed (at the 0 mark)


Solution

  • When all your attempts given this thread have failed:
    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
    I have a quick and dirty solution for you: place your slider in a grid and in the following row (for horizontal slider, it would be column for vertical slider) place enough columns (or rows for vertical slider) to hold your labels, like this:

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

    And for the label style:

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

    If you need more of those and with different labels / tick placement, I'd create an user control where the labels content (and their position) is given as a Dictionary<double, string> where the position is between 0.0 and 1.0 (percentage of the complete range of the slider).