ProgressBarEdit
- 2 minutes to read
Overview
The ProgressBarEdit is a visualization control that indicates the progress of the lengthy operations.
The ProgressBarEdit control offers the following features.
Built-in content display modes
Use the ProgressBarEdit.ContentDisplayMode property to switch between the following display modes.
- None - only a progress indicator is displayed.
- Value - progress bar displays a numeric value.
- Content - progress bar displays the contents of its ProgressBarEdit.Content property.
Customizable value range
You can limit the range of accepted values using the ProgressBarEdit‘s RangeBaseEdit.Minimum and RangeBaseEdit.Maximum properties.
Optional Percent value display mode
To display ProgressBarEdit‘s value as a decimal number, set the ProgressBarEdit.IsPercent property to true.
Multiple operation modes
The ProgressBarEdit control supports the following operation modes.
- Default
- Marquee
Adjustable orientation
Use the ProgressBarEdit‘s RangeBaseEdit.Orientation property to switch between horizontal and vertical orientations.
Optimized for in-place editing
ProgressBarEdit can be used standalone or as an in-place editor nested in a container control. The ProgressBarEditSettings class implements the in-place editing functionality. See In-place Editors to learn more.
Standalone ProgressBarEdit
To add a standalone ProgressBarEdit to a Window, drag it from the Toolbox.
The following sample demonstrates how to create a ProgressBarEdit using XAML markup.
<dxe:ProgressBarEdit EditValue="66" Orientation="Horizontal" IsPercent="True" ContentDisplayMode="Value"/>
In-place ProgressBarEdit
To embed a ProgressBarEdit into a container control, use the ProgressBarEditSettings class.
The following sample demonstrates how to embed a ProgressBarEdit into a GridControl column.
<dxg:GridControl>
<dxg:GridColumn FieldName="Progress">
<dxg:GridColumn.EditSettings>
<dxe:ProgressBarEditSettings ContentDisplayMode="None"/>
</dxg:GridColumn.EditSettings>
</dxg:GridColumn>
<dxg:GridControl.View>
<dxg:TableView/>
</dxg:GridControl.View>
</dxg:GridControl>