ProgressBarEdit

• Oct 12, 2018
• 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.

XAML

<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.

XAML

<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>