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.

<Intersoft:UXSliderBar Minimum="0" Maximum="100" LargeChange="10" SmallChange="1" TickPlacement="BottomRight" />
            

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.

<StackPanel>
    <Intersoft:UXSliderBar TickPlacement="BottomRight" />
    <Intersoft:UXSliderBar HandlesVisibility="Visible" />
</StackPanel>
            

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.

<Intersoft:UXSliderBar IsDirectionReversed="True" TickPlacement="BottomRight" />
            

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:

• BottomRight

  Specifies that UXTickBar will be displayed below the track bar for horizontal UXSliderBar, or to the right of the track bar for vertical UXSliderBar.

• TopLeft

  Specifies that UXTickBar will be displayed above the track bar for horizontal UXSliderBar, or to the left of the track bar for vertical UXSliderBar.

• Both

  Specifies that UXTickBar will displayed above and below the track bar for horizontal UXSliderBar, or to the left and right of the track bar for vertical UXSliderBar.

• None

  Specifies that no UXTickBar will be displayed in the UXSliderBar.

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

<StackPanel>
    <Intersoft:UXSliderBar TickPlacement="BottomRight"/>
    <Intersoft:UXSliderBar TickPlacement="TopLeft"/>
    <Intersoft:UXSliderBar TickPlacement="Both"/>
    <Intersoft:UXSliderBar TickPlacement="None"/>
</StackPanel>
            

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

<StackPanel>
    <Intersoft:UXSliderBar Orientation="Vertical" TickPlacement="BottomRight"/>
    <Intersoft:UXSliderBar Orientation="Vertical" TickPlacement="TopLeft"/>
    <Intersoft:UXSliderBar Orientation="Vertical" TickPlacement="Both"/>
    <Intersoft:UXSliderBar Orientation="Vertical" TickPlacement="None"/>
</StackPanel>
            

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.

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.

<Intersoft:UXSliderBar TickPlacement="BottomRight" HandlesVisibility="Visible" />
            

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.

<Intersoft:UXSliderBar TickPlacement="BottomRight" HandlesVisibility="Visible" ValueRangeVisibility="Visible" Value="5" />
            

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.

• Moving UXThumb

  You can move UXThumb along the UXSliderBar track to select a value.

• Using Keyboard Keys

  Some key gestures are already registered to UXSliderBar commands. You can use Up, Down, Left, and Right keys to invoke DecreaseSmall and IncreaseSmall command action. To invoke DecreaseLarge and IncreaseLarge command action, you can use PageUp and PageDown keys. You can also use Home key to perform Minimize command action and End key to perform Maximize command action.

• Using Decrease and Increase buttons

  The Decrease and Increase buttons are also registered to UXSliderBar commands. These buttons are actually UXRepeatButton control, so they shares the same behavior implemented in UXRepeatButton control, such as Delay and Interval. When you press Decrease button, UXSliderBar will invoke DecreaseLarge command action. When you press Increase button, UXSliderBar will invoke IncreaseLarge command action. Note that these buttons will be reversed when IsDirectionReversed property is set to True.

• Using Handle Buttons

  The handle buttons are also UXRepeatButton control, so they also shares the same behavior implemented in UXRepeatButton control, such as Delay and Interval. When you press the Left or Bottom handle button, UXSliderBar will invoke DecreaseSmall command action. When you press the Right or Top handle button, UXSliderBar will invoke IncreaseSmall command action. Note that the handle buttons will be reversed if IsDirectionReversed property is enabled.

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.

<Intersoft:UXSliderBar TickPlacement="BottomRight" HandlesVisibility="Visible" IsSnapToTickEnabled="True" />
            

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 UXThumb, UXThumb 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.

<Intersoft:UXSliderBar TickPlacement="BottomRight" HandlesVisibility="Visible" IsMoveToPointEnabled="True" />
            

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.

<Intersoft:UXSliderBar TickPlacement="BottomRight" AutoTooltipVisibility="Visible" HandlesVisibility="Visible"/>
    

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

• AutoTooltipPosition

  Gets or sets the placement of the tooltip when it is displayed.

• AutoTooltipFormat

  Gets or sets the format string applied to the content of the tooltip.

  You can apply the standard numeric format string to the content of the tooltip. For more information on standard numeric format string, see Standards Numeric Format Strings.

• AutoTooltipHorizontalDirection

  Gets or set the horizontal direction of the tooltip popup.

• AutoTooltipVerticalDirection

  Gets or set the vertical direction of the tooltip popup.

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.

<Grid x:Name="LayoutRoot" Background="White" DataContext="{StaticResource PropertyFinderViewModel}">
    <Intersoft:FieldLabel Header="Select Size (in sq ft.): " HeaderWidth="150" VerticalAlignment="Top">
        <Intersoft:UXSliderBar Width="300" TickPlacement="BottomRight" HandlesVisibility="True" Minimum="500" Maximum="1000" LargeChange="100" SmallChange="10"
                               Value="{Binding PropertyFinder.PropertySize, Mode=TwoWay, ValidatesOnDataErrors=True, ValidatesOnExceptions=True}"/>
    </Intersoft:FieldLabel>
</Grid>
            

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