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