ProgressBarEdit Class

Represents a progress bar.

Namespace: DevExpress.Xpf.Editors

Assembly: DevExpress.Xpf.Core.v20.1.dll

Declaration

public class ProgressBarEdit :
    RangeBaseEdit,
    IProgressBarExportSettings,
    ITextExportSettings,
    IExportSettings
Public Class ProgressBarEdit
    Inherits RangeBaseEdit
    Implements IProgressBarExportSettings,
               ITextExportSettings,
               IExportSettings

Remarks

The ProgressBarEdit is a visualization control that indicates the progress of the lengthy operations.

progressBar_Native

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

ProgressBarStyleSettings

A progress bar that indicates the progress of a lengthy operation. This style is the default mode.

progressBar_Native

Marquee

ProgressBarMarqueeStyleSettings

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.

animMarqueeProgressBar

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

    progress bar content

  • Value - progress bar displays a numeric value.

    <dxe:ProgressBarEdit
      Value="75"
      ContentDisplayMode="Value"/>
    

    progressBar_Native

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

    progress bar content

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.

progressBar_IsPercent

Adjustable Orientation

Use the ProgressBarEdit's RangeBaseEdit.Orientation property to switch between horizontal and vertical orientations.

Examples

This example shows how to create ProgressBarEdit and MarqueeProgressBarEdit controls.

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