Skip to main content

TrackBarEdit Class

A track bar.

Namespace: DevExpress.Xpf.Editors

Assembly: DevExpress.Xpf.Core.v24.1.dll

NuGet Package: DevExpress.Wpf.Core


public class TrackBarEdit :


The TrackBarEdit control is an editor that allows users to select a numeric value. The current value changes when users move a thumb along the scale.

Create a TrackBar

You can specify the track bar editor’s value via the RangeBaseEdit.Value or BaseEdit.EditValue property.

<Window ...

<!-- Creates a default track bar with possible values from 0 to 100. 
    Use the RangeBaseEdit.Value property to specify the editor's value. -->

To respond to the editor’s value changes, handle the BaseEdit.EditValueChanged event. To check the new value’s validity, handle the BaseEdit.Validate event.

Track Bar Operation Modes

Use the BaseEdit.StyleSettings property to change the track bar editor’s operation mode. Assign this property to one of the objects listed in the table below.

Operation Mode

Settings object




A scrollable control that allows end users to select a numeric value. End users can slide a small thumb along the scale, press left and right (or up and down) arrows, or rotate a mouse wheel when the editor is focused to select a new value.




A range track bar that allows end users to specify a range of values.




A track bar with increment/decrement buttons.


Zoom and Range


A range track bar with increment/decrement buttons.


Customizable Value Range

Use the TrackBarEdit‘s RangeBaseEdit.Minimum and RangeBaseEdit.Maximum properties to limit the range of accepted values.

Scale Customization

Use the TrackBarEdit.TickPlacement property to specify the tick position. The TrackBarEdit.TickFrequency property specifies the distance between ticks.

TrackBarEdit TickPlacement

The TrackBarEdit control can display a custom set of ticks and steps. You can define custom ticks and steps with the TrackBarEdit.Ticks and TrackBarEdit.Steps properties.

Tick Item Customization

Use the TickItemDisplayMode property to specify how track bar ticks are displayed: as text, a tick, or a tick with text:

TrackBarEdit TickItemDisplayMode

You can apply a format string to the text displayed within ticks with the TickItemStringFormat property.

To change the tick appearance, use the following API:

Value Tooltip

If the ValueToolTipPlacement property is set to TopLeft or BottomRight, the value tooltip is displayed when an end user moves the track bar thumb (the user drags the thumb with a mouse pointer or presses the right or left arrow key).

To disable value tooltips, set the ValueToolTipPlacement property to None.

The ValueToolTipContentTemplate property allows you to specify the value tooltip’s content template.

Format Value Tooltip

To format the text displayed within the value tooltip, use the ValueToolTipStringFormat property.


trackbar format tooltip

To format the range tooltip, you can use the ValueToolTipContentTemplate property. When the track bar is in the Range edit mode, the ValueToolTipContentTemplate‘s data context is an object of the TrackBarEditRange type.

The code sample below demonstrates how to format the tooltip that displays the selected range:

        <!-- The data context is an object of DevExpress.Xpf.Editors.TrackBarEditRange type. -->
            <TextBlock Text="{DXBinding '`From ` + SelectionStart + ` to ` + SelectionEnd'}" />
        <dxe:TrackBarRangeStyleSettings />


The code sample above uses DXBinding.

Appearance Customization

Track Height/Width

Use the TrackHeight property to specify the TrackBar height when the TrackBar’s Orientation is Horizontal.

Use the TrackWidth property to specify the TrackBar width when the TrackBar’s Orientation is Vertical.

Track and Thumb

Use the following properties to specify the TrackBarEdit appearance:

Property Description
NearTrackStyle Track bar style on the left side of the TrackBar thumb.
FarTrackStyle Track bar style on the right side of the TrackBar thumb.
ThumbStyle Thumb style.

TrackBarEdit - Appearance Properties

Range Mode TrackBar

Use the following properties to specify the TrackBarEdit appearance when the TrackBarEdit is in the Range Mode:

Property Description
TrackBarRangeStyleSettings.NearThumbStyle TrackBarEdit’s left thumb style.
TrackBarRangeStyleSettings.FarThumbStyle TrackBarEdit’s right thumb style.
TrackBarRangeStyleSettings.SelectedRangeBackgroundStyle TrackBarEdit’s selected range style.

TrackBarEdit - Appearance Properties

Zoom Mode TrackBar

Use the following properties to specify the TrackBarEdit appearance when the TrackBarEdit is in the Zoom Mode:

Property Description
TrackBarZoomStyleSettings.DecrementButtonStyle TrackBarEdit’s decrement button style.
TrackBarZoomStyleSettings.IncrementButtonStyle TrackBarEdit’s increment button style.
TrackBar Zoom Range Mode

Use the following properties to specify the TrackBarEdit appearance when the TrackBarEdit is in the Zoom and Range Mode:

Property Description
TrackBarZoomRangeStyleSettings.DecrementButtonStyle TrackBarEdit’s decrement button style.
TrackBarZoomRangeStyleSettings.IncrementButtonStyle TrackBarEdit’s increment button style.
TrackBarEdit.ThumbStyle TrackBarEdit’s thumb style.

TrackBarEdit - Appearance Properties

The following code snippets (auto-collected from DevExpress Examples) contain references to the TrackBarEdit class.


The algorithm used to collect these code examples remains a work in progress. Accordingly, the links and snippets below may produce inaccurate results. If you encounter an issue with code examples below, please use the feedback form on this page to report the issue.

See Also