ProgressBarEdit

• Jun 07, 2019

You can change the operation mode of a progress bar by using the BaseEdit.StyleSettings property. To apply specific settings, 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.
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.

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.

MainWindow.xaml

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