Skip to end of metadata
Go to start of metadata

UXSliderBar is 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. Conforming to strict ISO 9241 usability standards, you can also use the directional arrow keys to change the values when the control has focus.

Using UXSliderBar

The track in UXSliderBar represents the range span of values that can be selected by user. The lowest possible value in UXSliderBar 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 UXSliderBar.

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

View

Understanding UXSliderBar Layout

UXSliderBar mainly consists of a UXThumb, a slider track, two instances of UXTickBar, two handle buttons, increase and decrease buttons. By default, UXSliderBar only shows the slider track and the 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 UXSliderBar.

The following figure shows the structure of vertical UXSliderBar.

Customizing UXSliderBar Orientation

You can specify the orientation of UXSliderBar to Horizontal or Vertical using Orientation property. In the horizontal UXSliderBar, the increasing value will start from left to right. In vertical UXSliderBar, 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 UXSliderBar and from top to bottom in vertical UXSliderBar.

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

View

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

Customizing UXTickBar Appearance

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

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

View

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

View

The following figure shows the tick placement options in vertical UXSliderBar.

Both UXSliderBar and UXTickBar contain properties that perform the same functionality. The following table shows UXSliderBar properties and the corresponding UXTickBar properties to which they are bound.

UXSliderBar propertyUXTickBar property
UXSliderBar.IsDirectionReversedUXTickBar.IsDirectionReversed
UXSliderBar.LargeChangeUXTickBar.LargeChange
UXSliderBar.SmallChangeUXTickBar.SmallChange
UXSliderBar.MaximumUXTickBar.Maximum
UXSliderBar.MinimumUXTickBar.Minimum
UXSliderBar.TickContentVisibilityUXTickBar.ContentVisibility
UXSliderBar.TickFormatUXTickBar.TickFormat
UXSliderBar.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 UXSliderBar or to the right UXTickBar in vertical UXSliderBar. TopLeftTickBarStyle property will be applied to top UXTickBar in horizontal UXSliderBar or to the left UXTickBar in vertical UXSliderBar.

To learn more about using custom tickbar item in UXSliderBar, see How-to: Use Custom TickBar Item in UXSliderBar.

Displaying Handle Buttons

By default, the handle buttons are not displayed in UXSliderBar. 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 UXSliderBar.

View

Displaying Value Range Track

You can use ValueRangeVisibility property to display a value range track in UXSliderBar to indicate the active selection in UXSliderBar. The range starts from the value of Minimum property to the selected value in UXSliderBar.

The following example shows how to display the value range track in UXSliderBar.

View

Understanding UXSliderBar Commands

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

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

  • DecreaseSmall

    Gets a command that decreases the value of the UXSliderBar by the same amount as the SmallChange property.

    DecreaseSmall command will be invoked when you perform the following action:

    • Press the left handle button in horizontal UXSliderBar or the bottom handle button in vertical UXSliderBar.
    • Press the left or down keyboard key.
  • DecreaseLarge

    Gets a command that decreases the value of the UXSliderBar by the same amount as the LargeChange property.

    DecreaseLarge command will be invoked when you perform the following action:

    • Press the decrease button.
    • Press the PageDown keyboard key.
  • IncreaseSmall

    Gets a command that increases the value of the UXSliderBar by the same amount as the SmallChange property.

    IncreaseSmall command will be invoked when you perform the following action:

    • Press the right handle button in horizontal UXSliderBar or the top handle button in vertical UXSliderBar.
    • Press the right or down keyboard key.
  • IncreaseLarge

    Gets a command that increases the value of the UXSliderBar by the same amount as the LargeChange property.

    IncreaseLarge command will be invoked when you perform the following action:

    • Press the increase button.
    • Press the PageUp keyboard key.
  • Minimize

    Gets a command that sets the value of UXSliderBar to the value of Minimum property.

    Minimize command will be invoked when you press the Home keyboard key.

  • Maximize

    Gets a command that sets the value of UXSliderBar to the value of Maximum property.

    Maximize command will be invoked when you press the End keyboard key.

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

Understanding SliderBar User Experiences

You can use some options of user interaction to change the value in UXSliderBar.

Enabling Snap to Tick Behavior

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

View

Snap to tick behavior is implemented in all user interaction of UXSliderBar. 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 UXSliderBar programmatically without invoking the snap to tick. For example: if you use UXButton to set the value of UXSliderBar to 2.8, UXSliderBar 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 UXSliderBar.

Enabling Move to Point Behavior

By default when you click the decrease and increase button, UXSliderBar will invoke DecreaseLarge and IncreaseLarge command. Alternatively, you can use IsMoveToPointEnabled property to another behavior where UXThumb will immediately moves to the location of the mouse click when you click on the decrease and increase button. The value of UXSliderBar will be changed based on the position of the UXThumb.

View

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

To learn more about move to point behavior, see How-to: Enable Move to Point Behavior in UXSliderBar.

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

View

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

To learn more about AutoToolTip, see How-to: Configure Auto Tooltip in UXSliderBar.

Data Validation

As an input control, you can enable data validation in UXSliderBar. When the value of UXSliderBar 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 value of UXSliderBar must not be smaller than 600 sq ft.

View

To learn more about data validation in UXSliderBar, see How-to: Validate Value in UXSliderBar.