ProgressBarEdit Class
Represents a progress bar.
Namespace: DevExpress.Xpf.Editors
Assembly: DevExpress.Xpf.Core.v19.2.dll
Declaration
public class ProgressBarEdit :
RangeBaseEdit,
IProgressBarExportSettings,
ITextExportSettings,
IExportSettings
Remarks
The ProgressBarEdit
is a visualization control that indicates the progress of the lengthy operations.
Create a Progress Bar
You can specify the progress bar editor’s value via the RangeBaseEdit.Value or BaseEdit.EditValue property.
<Window ...
xmlns:dxe="http://schemas.devexpress.com/winfx/2008/xaml/editors">
<!-- Create a progress bar with possible values from 0 to 100.
Specify value using the RangeBaseEdit.Value property.
Display progress value as a content in a custom format. -->
<dxe:ProgressBarEdit
Value="75"
ContentDisplayMode="Value"
DisplayFormatString="{}{0}%"/>
Progress Bar Operation Modes
To change the operation mode of a progress bar, assign the BaseEdit.StyleSettings property of a progress bar to one of the objects listed in the table below.
Operation Mode | Settings object | Description |
---|---|---|
Default | A progress bar that indicates the progress of a lengthy operation. This style is the default mode. | |
Marquee | The editor represents the marquee progress bar, which does not display progress. It is used to indicate that an operation is going on by continuously scrolling a block from left to right. |
The code snippet below demonstrates how to create a marquee progress bar:
<dxe:ProgressBarEdit>
<dxe:ProgressBarEdit.StyleSettings>
<dxe:ProgressBarMarqueeStyleSettings/>
</dxe:ProgressBarEdit.StyleSettings>
</dxe:ProgressBarEdit>
Content Display Modes
Use the ProgressBarEdit.ContentDisplayMode property to switch between the following display modes.
None - only a progress indicator is displayed.
<dxe:ProgressBarEdit Value="75" ContentDisplayMode="None"/>
Value - progress bar displays a numeric value.
<dxe:ProgressBarEdit Value="75" ContentDisplayMode="Value"/>
Content - progress bar displays the contents of its ProgressBarEdit.Content property.
<dxe:ProgressBarEdit Value="75" ContentDisplayMode="Content"> <dxe:ProgressBarEdit.Content> <Image Source="{dx:DXImage 'SvgImages/Status/Warning.svg'}"/> </dxe:ProgressBarEdit.Content> </dxe:ProgressBarEdit>
Customizable Value Range
You can limit the range of accepted values using the ProgressBarEdit‘s RangeBaseEdit.Minimum and RangeBaseEdit.Maximum properties.
Percent Value Display Mode
To display the ProgressBarEdit‘s value as a decimal number, set the ProgressBarEdit.IsPercent property to true.
Adjustable Orientation
Use the ProgressBarEdit‘s RangeBaseEdit.Orientation property to switch between horizontal and vertical orientations.
Example
This example shows how to create ProgressBarEdit and MarqueeProgressBarEdit controls.
Note
A complete sample project is available at https://github.com/DevExpress-Examples/how-to-create-progressbaredit-and-marqueeprogressbaredit-controls-e3974.
<Window x:Class="DXSample_ProgressBar.MainWindow"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
Title="MainWindow" Height="350" Width="525" xmlns:dxe="http://schemas.devexpress.com/winfx/2008/xaml/editors">
<Grid>
<Grid.RowDefinitions>
<RowDefinition/>
<RowDefinition/>
</Grid.RowDefinitions>
<dxe:ProgressBarEdit Name="progressBarEdit1"
HorizontalAlignment="Center" VerticalAlignment="Center"
Width="300" Height="30"
Minimum="0" Maximum="100" Value="75" ContentDisplayMode="Value" Foreground="#FFFCF5F5" DisplayFormatString="{}{0}%">
</dxe:ProgressBarEdit>
<dxe:ProgressBarEdit Name="marqueeProgressBarEdit1" Grid.Row="1"
HorizontalAlignment="Center" VerticalAlignment="Center"
Width="300" Height="30">
<dxe:ProgressBarEdit.StyleSettings>
<dxe:ProgressBarMarqueeStyleSettings/>
</dxe:ProgressBarEdit.StyleSettings>
</dxe:ProgressBarEdit>
</Grid>
</Window>
Related GitHub Examples
The following code snippets (auto-collected from DevExpress Examples) contain references to the ProgressBarEdit 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.