Skip to end of metadata
Go to start of metadata

UXRangeSliderBar is a unique slider bar control with two instances of UXThumb control for selecting a range of values. You can use mouse to drag the handle or directional arrows to move the handle. While dragging, press the Shift key to move both handles together while maintaining the value span.

Using UXRangeSliderBar

The track in UXRangeSliderBar represents the range span of values that can be selected by user. The lowest possible value in UXRangeSliderBar is specified in Minimum property, while the highest possible value is specified in Maximum property. The LargeChange and SmallChange properties indicates the value to be added or subtracted from the value of UXRangeSliderBar.

Unlike UXSliderBarUXRangeSliderBar uses two selection properties, SelectionStart and SelectionEnd, to indicate the selected range of values. By default, both properties are set to NaN, which means the range selection starts from the lowest possible value specified in Minimum property and ends at the highest possible value specified in Maximum property.

The following example shows how to define a simple UXRangeSliderBar in XAML.

View

Understanding UXRangeSliderBar Layout

UXSliderBar mainly consists of two instances of UXThumb, a slider track, two instances of UXTickBar, two handle buttons, increase and decrease buttons, and middle increase and middle decrease buttons. By default, UXRangeSliderBar only shows the slider track and the two instances of UXThumb. To display the handle buttons and tick bar, you need to set HandlesVisibility and TickPlacement properties.

View

The following figure shows the structure of horizontal UXRangeSliderBar.

The following figure shows the structure of vertical UXRangeSliderBar.

Customizing UXRangeSliderBar Orientation

You can specify the orientation of UXRangeSliderBar to Horizontal or Vertical using Orientation property. In horizontal UXRangeSliderBar, the increasing value will start from left to right. In vertical UXRangeSliderBar, the increasing value will start from bottom to top.

Alternatively, you can set IsDirectionReversed property to reverse the direction of the increasing value. If IsDirectionReversed property is set to True, the increasing value will start from right to left in horizontal UXRangeSliderBar and from top to bottom in vertical UXRangeSliderBar.

The following example shows how to enable IsDirectionReversed in horizontal UXRangeSliderBar.

View

To learn more about Orientation and IsDirectionReversed in UXRangeSliderBar, see How-to: Customize Orientation in UXRangeSliderBar.

Customizing UXTickBar Appearance

By default, the tick bar element are not displayed in UXRangeSliderBar. You can set TickPlacement property to set the position of UXTickBar with respect to the track of UXRangeSliderBar. The following options are available as the value of TickPlacement property:

The following example shows how to set the tick placement in horizontal UXRangeSliderBar.

View

The following example shows how to set the tick placement in vertical UXRangeSliderBar.

View

Both UXRangeSliderBar and UXTickBar contains properties that performs the same functionality. The following table shows UXRangeSliderBar properties and the corresponding UXTickBar properties to which they are bound.

UXRangeSliderBar propertyUXTickBar property
UXRangeSliderBar.IsDirectionReversedUXTickBar.IsDirectionReversed
UXRangeSliderBar.LargeChangeUXTickBar.LargeChange
UXRangeSliderBar.SmallChangeUXTickBar.SmallChange
UXRangeSliderBar.MaximumUXTickBar.Maximum
UXRangeSliderBar.MinimumUXTickBar.Minimum
UXRangeSliderBar.TickContentVisibilityUXTickBar.ContentVisibility
UXRangeSliderBar.TickFormatUXTickBar.TickFormat
UXRangeSliderBar.TicksUXTickBar.Ticks

For more information about UXTickBar, see UXTickBar Overview.

 

By default the tickbar items are generated automatically. Howewer, you can specify custom tickbar item collection using BottomRightTickBarStyle and TopLeftTickBarStyle properties.

BottomRightTickBarStyle will be applied to bottom UXTickBar in horizontal UXRangeSliderBar or to the right UXTickBar in vertical UXRangeSliderBarTopLeftTickBarStyle property will be applied to top UXTickBar in horizontal UXRangeSliderBar or to the left UXTickBar in vertical UXRangeSliderBar

To learn more about using custom tickbar item in UXRangeSliderBar, see How-to: Use Custom Tick Bar Item in UXRangeSliderBar.

Displaying Handle Buttons

By default, the handle buttons are not displayed in UXRangeSliderBar. In order, to display the handle buttons, you need to set HandlesVisibility property to Visible.

The following example shows how to display the handle buttons in UXRangeSliderBar.

View

Understanding RangeSliderBar Commands

UXRangeSliderBar is built around the commanding semantics which allows the value changing interaction to be executed through declarative definition in the XAML markup. The commanding semantics is also an ideal approach for MVVM pattern development.

In order to know whether the value of SelectionStart or SelectionEnd property to be changed, UXRangeSliderBar needs to know which UXThumb will be affected by the command. If the command is applied to the left or bottom UXThumb, the value of SelectionStart will be changed. If the command is applied to the right or top UXThumb, the value of SelectionEnd will be changed.

To serve this purpose, each handle buttons and decrease and increase buttons are tagged with the affected UXThumb info. For example: in horizontal UXRangeSliderBar, the decrease button is tagged with left UXThumb info, so when it is clicked, UXRangeSliderBar will perform DecreaseLarge command to the left UXThumb, which will affect the value of SelectionStart property.

When key gesture is invoked, UXRangeSliderBar will invoke the command based on the active UXThumb. If the right UXThumb is active and you press the Up key, UXRangeSliderBar will invoke the IncreaseLarge command to the right UXThumb, which will affect the value of SelectionEnd property.

UXRangeSliderBar already includes several predefined commands to change the selected value that you can use in your application.

Although these commands are already registered in the elements of UXRangeSliderBar, you can still register these commands to other UIElement outside UXRangeSliderBar scope. For example, you can have a UXButton that performs DecreaseLarge command. For more information on how to register UXRangeSliderBar commands to other type of UIElement, see How-to: Register UXRangeSliderBar Command to UXButton.

Understanding RangeSliderBar User Experiences

You can use some options of user interaction to change the value of SelectionStart and SelectionEnd properties in UXRangeSliderBar.

Enable Snap to Tick Behavior

You can enable snap to tick behavior in UXRangeSliderBar using IsSnapToTickEnabled property. When this property is enabled, all user interaction to change the value of SelectionStart and SelectionEnd properties will be adjusted to the closest tickbar item. When you select a position within a tickbar range, it will be adjusted to the closest tickbar item. For example, when you select 3.2 as the selection start of a UXRangeSliderBar that starts from 0 to 10 with LargeChange set to 1, the selection start will be adjusted to the closest tickbar item, which is 3.

View

Snap to tick behavior is implemented in all user interaction of UXRangeSliderBar. When you press the arrow keys or handle buttons, the UXThumb will snap to the previous or next tickbar item. When you drag UXThumb and moves along the track, the UXThumb will snap to the previous or next tickbar item based on the movement.

When snap to tick behavior is enabled, you can still enable precision selection by pressing Ctrl key. If you press Ctrl key while pressing the keyboard keys or buttons or moving the UXThumbUXThumb will not snap to the closest tickbar item.

Since this behavior is implemented for user interaction only, you can still set the value of UXRangeSliderBar programmatically without invoking the snap to tick. For example: if you use UXButton to set the value of SelectionEnd to 8.2, UXRangeSliderBar will not adjust the value to the closest tickbar item.

To learn more about snap to tick behavior, see How-to: Enable Snap to Tick Behavior in UXRangeSliderBar.

Enable Move to Point Behavior

By default when you click the decrease, middle increase, middle decrease, and increase button, UXRangeSliderBar will invoke DecreaseLarge and IncreaseLarge command. Alternatively, you can use IsMoveToPointEnabled property to enable another behavior where UXThumb will immediately moves to the location of the mouse click when you click on these buttons. The value of SelectionStart or SelectionEnd will be adjusted changed based on the button clicked and the position of the UXThumb.

View

If IsSnapToTickEnabled property is also set to True, the value of UXRangeSliderBar will be adjusted based on the closest tick bar item. In the above sample, if you click on the a position where the selection start will be set to 4.2, the value of SelectionStart property will be adjusted to the closest tickbar item, which is 4.

Customizing Minimum and Maximum Range Span

You can set the minimum and maximum range span allowed in UXRangeSlider using MinimumRangeSpan and MaximumRangeSpan properties. When these properties are specified, the selected range value will be limited. You cannot select a range of value that is smaller than the value of MinimumRangeSpan property or larger than the value of MaximumRangeSpan property.

The following example shows how to set the minimum range span to 3 and the maximum range span to 5. Using this configuration, user cannot select a range of values smaller than 3 or larger than 5.

View

Note that this feature is applied to user interaction only. You can programmatically select a range of values that does not meet the minimum and maximum range span limitation.

By default, the MinimumRangeSpan property is set to 0 and MaximumRangeSpan property is set to NaN. This configuration allows user to select any range span of values without limitation.

Enabling Drag Range

In UXRangeSliderBar, the area between the two UXThumb is the selected range of values, indicated by a blue track. By default this track is divided into two, middle increase and middle decrease button area. You can click on these areas to invoke the DecreaseLarge or IncreaseLarge commands.

Alternatively, you can enable another mode in UXRangeSliderBar using IsDragRangeEnabled property, which enables users to move the range selection track. In this mode, the DecreaseLarge and IncreaseLarge commands will not be invoked. You can drag the range selection area and both values of SelectionStart and SelectionEnd properties will be changed.

View

Using Auto Tooltip

When you moves UXThumb along the track, it is useful to have a tooltip that contains the value of the hovered position. To display the tooltip, you can set AutoTooltipVisibility property to True.

The following example shows how to enable auto tooltip in UXRangeSliderBar.

View

When you press Shift key while moving the UXThumb, both UXThumb will be moved. In this case, the tooltip will be displayed for both UXThumb instances.

Besides that, you can also set the following properties in the tooltip.

To learn more about auto tooltip, see How-to: Configure Auto ToolTip in UXRangeSliderBar.

Data Validation

As an input control, you can enable data validation in UXRangeSliderBar. When the value of UXRangeSliderBar is bound to a data entity, you can throw an exception when the data is invalid. The following example shows how to validate that the price range in UXSliderBar is between 200,000 USD and 600,000 USD range.

View

To learn more about data validation in UXRangeSliderBar, see How-to: Enable Data Validation in UXRangeSliderBar.

 

Related Topics