wpf-devexpress-dot-xpf-dot-editors-9239dbac.md
A track bar.
Namespace : DevExpress.Xpf.Editors
Assembly : DevExpress.Xpf.Core.v25.2.dll
NuGet Package : DevExpress.Wpf.Core
[DXLicenseWpfEditors]
public class TrackBarEdit :
RangeBaseEdit,
ITrackBarExportSettings,
ITextExportSettings,
IExportSettings
<DXLicenseWpfEditors>
Public Class TrackBarEdit
Inherits RangeBaseEdit
Implements ITrackBarExportSettings,
ITextExportSettings,
IExportSettings
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.
You can specify the track bar editor’s value via the RangeBaseEdit.Value or BaseEdit.EditValue property.
<Window ...
xmlns:dxe="http://schemas.devexpress.com/winfx/2008/xaml/editors">
<!-- Creates a default track bar with possible values from 0 to 100.
Use the RangeBaseEdit.Value property to specify the editor's value. -->
<dxe:TrackBarEdit
Value="42"
TickItemDisplayMode="TickAndText"
TickPlacement="BottomRight"/>
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.
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
|
Description
| | --- | --- | --- | |
Default
|
|
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.
| |
Range
|
|
A range track bar that allows end users to specify a range of values.
| |
Zoom
|
|
A track bar with increment/decrement buttons.
| |
Zoom and Range
|
TrackBarZoomRangeStyleSettings
|
A range track bar with increment/decrement buttons.
|
Use the TrackBarEdit ‘s RangeBaseEdit.Minimum and RangeBaseEdit.Maximum properties to limit the range of accepted values.
Use the TrackBarEdit.TickPlacement property to specify the tick position. The TrackBarEdit.TickFrequency property specifies the distance between ticks.
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.
Use the TickItemDisplayMode property to specify how track bar ticks are displayed: as text, a tick, or a tick with text:
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:
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.
To format the text displayed within the value tooltip, use the ValueToolTipStringFormat property.
<dxe:TrackBarEdit
TickFrequency="10"
TickItemDisplayMode="TickAndText"
ValueToolTipPlacement="TopLeft"
ValueToolTipStringFormat="c2"/>
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:
<dxe:TrackBarEdit
TickFrequency="10"
TickItemDisplayMode="TickAndText"
ValueToolTipPlacement="TopLeft">
<dxe:TrackBarEdit.ValueToolTipContentTemplate>
<!-- The data context is an object of DevExpress.Xpf.Editors.TrackBarEditRange type. -->
<DataTemplate>
<TextBlock Text="{DXBinding '`From ` + SelectionStart + ` to ` + SelectionEnd'}" />
</DataTemplate>
</dxe:TrackBarEdit.ValueToolTipContentTemplate>
<dxe:TrackBarEdit.StyleSettings>
<dxe:TrackBarRangeStyleSettings />
</dxe:TrackBarEdit.StyleSettings>
</dxe:TrackBarEdit>
Tip
The code sample above uses DXBinding.
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.
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. |
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. |
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. |
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. |
The following code snippets (auto-collected from DevExpress Examples) contain references to the TrackBarEdit class.
Note
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.
reporting-wpf-report-designer-customize-controls-smart-tag/CS/App.xaml#L54
<dxlc:LayoutItem Label="Progress">
<dxe:TrackBarEdit EditValue="{Binding Progress, Mode=TwoWay, UpdateSourceTrigger=PropertyChanged}"
Minimum="0"
wpf-svgimagesource-extension-specify-vector-image-as-glyph/CS/DXSample/MainWindow.xaml#L48
Margin="0 10 0 2"/>
<dxe:TrackBarEdit Name="scaleEditor"
SmallStep="1"
wpf-data-grid-create-custom-drop-down-filter/CS/DXGrid_CustomFilterPopup/Window1.xaml#L17
<Label Content="Minimum Index:" Margin="5"/>
<dxe:TrackBarEdit Minimum="0" Maximum="100"
Width="200" Margin="10"
Object DispatcherObject DependencyObject Visual UIElement FrameworkElement Control BaseEdit RangeBaseEdit TrackBarEdit
See Also