TrackBarEdit
- 2 minutes to read
Overview
The TrackBarEdit control is an editor that allows end-users to select a numeric value by moving a thumb along the scale.
The TrackBarEdit control offers the following features.
Customizable value range
You can limit the range of accepted values using the TrackBarEdit‘s RangeBaseEdit.Minimum and RangeBaseEdit.Maximum properties.
Scale customization
You can specify the ticks position using the TrackBarEdit.TickPlacement property. The TrackBarEdit.TickFrequency property specifies the distance between the ticks.
The TrackBarEdit control supports displaying a custom set of ticks and steps that can be defined using the TrackBarEdit.Ticks and TrackBarEdit.Steps properties.
Multiple operation modes
The TrackBarEdit control supports the following operation modes.
- Default;
- Range;
- Zoom;
- Zoom and range.
Adjustable orientation
Use the TrackBarEdit‘s RangeBaseEdit.Orientation property to switch between horizontal and vertical orientations.
Optimized for in-place editing
TrackBarEdit can be used standalone or as an in-place editor nested in a container control. The TrackBarEditSettings class implements the in-place editing functionality. See In-place Editors to learn more.
Standalone TrackBarEdit
To add a standalone TrackBarEdit to a Window, drag it from the Toolbox.
The following sample demonstrates how to create a TrackBarEdit using XAML markup.
<dxe:TrackBarEdit TickPlacement="Both" TickFrequency="10" Orientation="Vertical">
<dxe:TrackBarEdit.StyleSettings>
<dxe:TrackBarZoomStyleSettings/>
</dxe:TrackBarEdit.StyleSettings>
</dxe:TrackBarEdit>
In-place TrackBarEdit
To embed a TrackBarEdit into a container control, use the TrackBarEditSettings class.
The following sample demonstrates how to embed a TrackBarEdit into a GridControl column.
<dxg:GridControl>
<dxg:GridColumn FieldName="Brightness">
<dxg:GridColumn.EditSettings>
<dxe:TrackBarEdit/>
</dxg:GridColumn.EditSettings>
</dxg:GridColumn>
<dxg:GridControl.View>
<dxg:TableView/>
</dxg:GridControl.View>
</dxg:GridControl>