Use UXSliderBar to Simplify Data Entry
One of the powerful controls introduced in ClientUI 4 is UXSliderBar, an input control that enables users to select a value or range of values by sliding the UXThumb along the slider track through drag and drop operation in the thumb.
In this post, I will share how to use UXSliderBar to create a simple application to input grade for student.
Configuring the UXSliderBar
The scenario that I want to achieve is, create a sliderbar and set the value from 0 to 100. When user selects a value in the slider (let’s say 60, 85), the grade (A, B, C, D) will be displayed in the TextBox based on the selected value.
First of all, drag a UXSliderBar control from Visual Studio Toolbox. You need to configure its basic settings, such as Maximum, Minimum, SmallChange, and LargeChange.
Minimum and Maximum property indicates the possible lowet and highest value in the slider bar. SmallChange and LargeChange indicates the value to be added or subtracted from the value of UXSliderBar.
|
1 2 3 |
<Intersoft:UXSliderBar Minimum="0" Maximum="100" LargeChange="10" SmallChange="1" TickPlacement="BottomRight" HandlesVisibility="Visible"/> |
As you can see, the value becomes crowded because I want to display the value range from 0 to 100. This is where Ticks property is very useful. It is used to represent the position of the tick bar items displayed in the tick bar.
I’m going to set the ticks to 0, 55, 65, 75, 85. Therefore, the UXSliderBar will display something like following:
|
1 2 3 |
<Intersoft:UXSliderBar Minimum="0" Maximum="100" LargeChange="1" SmallChange="0.1" TickPlacement="BottomRight" HandlesVisibility="Visible" Ticks="0 55 65 75 85"/> |
In the case where the ticks are only displayed in specific positions, it is difficult to select a specific value, for example 79, in the slider bar. Using AutoTooltipVisibility property, you can display a tooltip containing the selected value when you drag the thumb. In addition, AutoTooltipFormat is used to set the format string applied to the content of the tooltip.
|
1 2 3 4 5 |
<Intersoft:UXSliderBar Minimum="0" Maximum="100" LargeChange="1" SmallChange="1" TickPlacement="BottomRight" HandlesVisibility="Visible" Ticks="0 55 65 75 85" AutoTooltipVisibility="Visible" AutoTooltipFormat="F0"/> |
Initially, when you bind the value from UXSliderBar into the Textbox control, it will only display the number. In this case, I want to show the Grade instead. Means that I need to add a converter in order to achieve this scenario.
Creating Grade Converter
In order to show the grade in Textbox, we need to bind slider’s value to Textbox and use data conversion to convert the grade into string.
Here is the code on how to bind the slider’s value to Textbox.
|
1 |
<TextBox Text="{Binding Value, ElementName=UXSliderBar1}" /> |
Now, you have successfully bound slider’s value to Textbox. But, in order to convert the number into string, you need to add a converter.
For more information on how to use a converter, please refer to Data Binding Overview on Data Conversion topic.
I create a class called GradeConverter.cs. In this class, I will create a converter by creating a class that inherits from IValueConverter and put a validation to convert the grade value into a string.
The GradeConverter.cs looks like the following:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 |
using System.Windows.Input; using System.Windows.Media; using System.Windows.Media.Animation; using System.Windows.Shapes; using System.Windows.Data; namespace ClientUIMVVMBlogApp.Converters { public class GradeConverter : IValueConverter { public object Convert(object value, Type targetType, object parameter, System.Globalization.CultureInfo culture) { Double grade = (Double)value; String result = value.ToString(); if (grade < 55) { result = "E"; } else if (grade >= 55 && grade < 65) { result = "D"; } else if (grade >= 65 && grade < 75) { result = "C"; } else if (grade >= 75 && grade < 85) { result = "B"; } else { result = "A"; } return result; } public object ConvertBack(object value, Type targetType, object parameter, System.Globalization.CultureInfo culture) { throw new NotImplementedException(); } } } |
Now, add the converter to the Textbox control that has been bound to the slider’s value:
|
1 2 |
<TextBox Text="{Binding Value, ElementName=UXSliderBar1, Converter={StaticResource GradeConverter}}"/> |
There are some properties that you can optionally add to the UXSliderBar such ValueRangeVisibility and IsMoveToPointEnabled. ValueRangeVisibility is used to get/set whether the value range visual element is visible. You can see the value range visual element is in blue color.
IsMoveToPointEnabled is used to get/set a value that indicates whether the UXThumb moves immediately to the location of the mouse click that occurs while the mouse pointer pauses on the slider bar track.
Hence, the final code will look like following:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 |
<StackPanel> <Intersoft:FieldLabel> <Intersoft:FieldLabel.Header> <TextBlock Text="Name :"/> </Intersoft:FieldLabel.Header> <TextBox Width="200" Text="John Doe"></TextBox> </Intersoft:FieldLabel> <Intersoft:FieldLabel> <Intersoft:FieldLabel.Header> <TextBlock Text="Grade :"/> </Intersoft:FieldLabel.Header> <StackPanel Orientation="Horizontal"> <Intersoft:UXSliderBar Name="UXSliderBar1" Width="517" Minimum="0" Maximum="100" LargeChange="1" SmallChange="0.1" TickPlacement="BottomRight" HandlesVisibility="Visible" ValueRangeVisibility="Visible" Value="55" AutoTooltipVisibility="Visible" AutoTooltipFormat="F0" Ticks="0 55 65 75 85" IsMoveToPointEnabled="True" Height="50" /> <TextBox Height="27" Width="33" HorizontalAlignment="Left" Text="{Binding Value, ElementName=UXSliderBar1, Converter={StaticResource GradeConverter}}"/> </StackPanel> </Intersoft:FieldLabel> </StackPanel> |
When you run the project, the final results will look like the following illustration.
When you drag the slider bar to determine the value, it will automatically convert the value into string, and place the grade into the Textbox.
Summary
In this post, you have learned how to initially create UXSliderBar and configure its basic settings. You also have been guided on how to create data conversion and bind it to a Textbox control.
For more information about the scenario, you can download the sample here. To see all available features, see UXSliderBar Overview. If you have questions or feedback about UXSliderBar or other ClientUI controls, please feel free to post them to our Community Forum.
Regards,
-Martin-
