Skip to end of metadata
Go to start of metadata

Represents a base control that allows user to select from a range of values by moving UXThumb controls along a track.

Working with AutoTooltipFormat Property, AutoTooltipHorizontalDirection Property, AutoTooltipPosition Property, AutoTooltipVerticalDirection Property and AutoTooltipVisibility Property

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.

Working with HandlesVisibility Property

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

Working with IsDirectionReversed Property

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

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

View

Working with IsMoveToPointEnabled Property

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.

Working with IsSnapToTickEnabled Property

You can enable snap to tick behaviour 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.

Working with Orientation Property

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

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

View

Working with TickPlacement Property

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

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

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

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

  • None
    Specifies that no UXTickBar will be displayed in the slider bar.

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

Definition

public abstract class UXSliderBarBase : ISRangeControl

Summary

The following table summarizes the members exposed in this class.

Protected Constructors

Public Properties

AutoTooltipFormatGets or sets the format string applied to the value of slider bar in the tooltip.
AutoTooltipHorizontalDirectionGets or sets the horizontal direction of auto tooltip pop up.
AutoTooltipPositionGets or sets the placement of the tooltip when the tooltip is displayed.
AutoTooltipVerticalDirectionGets or sets the vertical direction of auto tooltip pop up.
AutoTooltipVisibilityGets or sets the visibility of the tooltip that contains the current value of the slider bar when the UXThumb is pressed.
BottomRightTickBarStyleGets or sets the style applied to the bottom right tick bar.
DelayGets or sets the amount of time in miliseconds that UXRepeatButton waits, while it is pressed, before the command to move UXThumb executes, such as SliderCommands.DecreaseLarge command.
HandlesVisibilityGets or sets the visibility of the handle buttons in slider bar.
IntervalGets or sets the amount of time in miliseconds between increase and decrease commands when users click the UXRepeatButton of slider bar.
IsDirectionReversedGets or sets the direction of increasing value.
IsMoveToPointEnabledGets or sets 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.
IsSnapToTickEnabledGets or sets a value that indicates whether the slider bar automatically moves the UXThumb to the closest tick bar item.
OrientationGets or sets the orientation of the slider bar.
TickContentVisibilityGets or sets the visibility of the tick bar item's content.
TickFormatGets or sets the format string applied to the each tick bar item when they are generated automatically.
TickPlacementGets or sets the position of tick bar items with respect to the track of the slider bar.
TicksGets or sets the collection that represents the position of the tick bar items displayed in the tick bar.
TopLeftTickBarStyleGets or sets the style applied to the top left tick bar.
TrackStyleGets or sets the style applied to the track bar.

Fields

AutoTooltipFormatPropertyIdentifies the AutoTooltipFormat dependency property.
AutoTooltipHorizontalDirectionPropertyIdentifies the AutoTooltipHorizontalDirection dependency property.
AutoTooltipPositionPropertyIdentifies the AutoTooltipPosition dependency property.
AutoTooltipVerticalDirectionPropertyIdentifies the AutoTooltipVerticalDirection dependency property.
AutoTooltipVisibilityPropertyIdentifies the AutoTooltipVisibility dependency property.
BottomRightTickBarStylePropertyIdentifies the BottomRightTickBarStyle dependency property.
DelayPropertyIdentifies the Delay dependency property.
HandlesVisibilityPropertyIdentifies the HandlesVisibility dependency property.
IntervalPropertyIdentifies the Interval dependency property.
IsDirectionReversedPropertyIdentifies the IsDirectionReversed dependency property.
IsMoveToPointEnabledPropertyIdentifies the IsMoveToPointEnabled dependency property.
IsSnapToTickEnabledPropertyIdentifies the IsSnapToTickEnabled dependency property.
OrientationPropertyIdentifies the Orientation dependency property.
TickContentVisibilityPropertyIdentifies the TickContentVisibility dependency property.
TickFormatPropertyIdentifies the TickFormat dependency property.
TickPlacementPropertyIdentifies the TickPlacement dependency property.
TicksPropertyIdentifies the Ticks dependency property.
TopLeftTickBarStylePropertyIdentifies the TopLeftTickBarStyle dependency property.
TrackStylePropertyIdentifies the TrackStyle dependency property.

Public Methods

AttachEventHandlers()Attaches the event handlers for UI elements in slider bar.
DetachedEventHandlers()Detaches the event handlers for UI elements in slider bar.
InitializeTemplates()Initializes the templates for slider bar.
OnApplyTemplate()Builds the visual tree for the UXSliderBarBase when a new template is applied.

Protected Methods

OnMaximumChanged(double, double)Provides handling when the value of Maximum property is changed.
OnMinimumChanged(double, double)Provides handling when the value of Minimum property is changed.

Protected Constructors

protected UXSliderBarBase()

 

Public Properties

public string AutoTooltipFormat { get; set; }

Gets or sets the format string applied to the value of slider bar in the tooltip.

public PopupHorizontalDirection AutoTooltipHorizontalDirection { get; set; }

Gets or sets the horizontal direction of auto tooltip pop up.

public PopupPosition AutoTooltipPosition { get; set; }

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

public PopupVerticalDirection AutoTooltipVerticalDirection { get; set; }

Gets or sets the vertical direction of auto tooltip pop up.

public Visibility AutoTooltipVisibility { get; set; }

Gets or sets the visibility of the tooltip that contains the current value of the slider bar when the UXThumb is pressed.

public Style BottomRightTickBarStyle { get; set; }

Gets or sets the style applied to the bottom right tick bar.

Remarks

By default the tickbar items are generated automatically. Howewer, you can specify custom tickbar item collection using UXSliderBarBase and UXSliderBarBase properties. UXSliderBarBase will be applied to bottom UXTickBar in horizontal UXSliderBar or to the right UXTickBar in vertical UXSliderBar. UXSliderBarBase 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. To learn more about using custom tickbar item in UXRangeSliderBar, see How-to: Use Custom Tick Bar Item in UXRangeSliderBar.

 

public int Delay { get; set; }

Gets or sets the amount of time in miliseconds that UXRepeatButton waits, while it is pressed, before the command to move UXThumb executes, such as SliderCommands.DecreaseLarge command.

public Visibility HandlesVisibility { get; set; }

Gets or sets the visibility of the handle buttons in slider bar.

public int Interval { get; set; }

Gets or sets the amount of time in miliseconds between increase and decrease commands when users click the UXRepeatButton of slider bar.

public bool IsDirectionReversed { get; set; }

Gets or sets the direction of increasing value.

public bool IsMoveToPointEnabled { get; set; }

Gets or sets 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.

public bool IsSnapToTickEnabled { get; set; }

Gets or sets a value that indicates whether the slider bar automatically moves the UXThumb to the closest tick bar item.

public Orientation Orientation { get; set; }

Gets or sets the orientation of the slider bar.

public Visibility TickContentVisibility { get; set; }

Gets or sets the visibility of the tick bar item's content.

public string TickFormat { get; set; }

Gets or sets the format string applied to the each tick bar item when they are generated automatically.

public TickPlacement TickPlacement { get; set; }

Gets or sets the position of tick bar items with respect to the track of the slider bar.

public DoubleCollection Ticks { get; set; }

Gets or sets the collection that represents the position of the tick bar items displayed in the tick bar.

public Style TopLeftTickBarStyle { get; set; }

Gets or sets the style applied to the top left tick bar.

Remarks

By default the tickbar items are generated automatically. Howewer, you can specify custom tickbar item collection using UXSliderBarBase and UXSliderBarBase properties. UXSliderBarBase will be applied to bottom UXTickBar in horizontal UXSliderBar or to the right UXTickBar in vertical UXSliderBar. UXSliderBarBase 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. To learn more about using custom tickbar item in UXRangeSliderBar, see How-to: Use Custom Tick Bar Item in UXRangeSliderBar.

 

public Style TrackStyle { get; set; }

Gets or sets the style applied to the track bar.

Fields

public static readonly DependencyProperty AutoTooltipFormatProperty

Identifies the AutoTooltipFormat dependency property.

public static readonly DependencyProperty AutoTooltipHorizontalDirectionProperty

Identifies the AutoTooltipHorizontalDirection dependency property.

public static readonly DependencyProperty AutoTooltipPositionProperty

Identifies the AutoTooltipPosition dependency property.

public static readonly DependencyProperty AutoTooltipVerticalDirectionProperty

Identifies the AutoTooltipVerticalDirection dependency property.

public static readonly DependencyProperty AutoTooltipVisibilityProperty

Identifies the AutoTooltipVisibility dependency property.

public static readonly DependencyProperty BottomRightTickBarStyleProperty

Identifies the BottomRightTickBarStyle dependency property.

public static readonly DependencyProperty DelayProperty

Identifies the Delay dependency property.

public static readonly DependencyProperty HandlesVisibilityProperty

Identifies the HandlesVisibility dependency property.

public static readonly DependencyProperty IntervalProperty

Identifies the Interval dependency property.

public static readonly DependencyProperty IsDirectionReversedProperty

Identifies the IsDirectionReversed dependency property.

public static readonly DependencyProperty IsMoveToPointEnabledProperty

Identifies the IsMoveToPointEnabled dependency property.

public static readonly DependencyProperty IsSnapToTickEnabledProperty

Identifies the IsSnapToTickEnabled dependency property.

public static readonly DependencyProperty OrientationProperty

Identifies the Orientation dependency property.

public static readonly DependencyProperty TickContentVisibilityProperty

Identifies the TickContentVisibility dependency property.

public static readonly DependencyProperty TickFormatProperty

Identifies the TickFormat dependency property.

public static readonly DependencyProperty TickPlacementProperty

Identifies the TickPlacement dependency property.

public static readonly DependencyProperty TicksProperty

Identifies the Ticks dependency property.

public static readonly DependencyProperty TopLeftTickBarStyleProperty

Identifies the TopLeftTickBarStyle dependency property.

public static readonly DependencyProperty TrackStyleProperty

Identifies the TrackStyle dependency property.

Public Methods

public void AttachEventHandlers()

Attaches the event handlers for UI elements in slider bar.

public void DetachedEventHandlers()

Detaches the event handlers for UI elements in slider bar.

public void InitializeTemplates()

Initializes the templates for slider bar.

public void OnApplyTemplate()

Builds the visual tree for the UXSliderBarBase when a new template is applied.

Protected Methods

protected void OnMaximumChanged(double oldMaximum, double newMaximum)

Provides handling when the value of Maximum property is changed.

Parameters

oldMaximumSpecifies the old value of Maximum property.
newMaximumSpecifies the new value of Maximum property.

 

protected void OnMinimumChanged(double oldMinimum, double newMinimum)

Provides handling when the value of Minimum property is changed.

Parameters

oldMinimumSpecifies the old value of Minimum property.
newMinimumSpecifies the new value of Minimum property.
  • No labels