Skip to main content
All docs
V24.1

DevExpress v24.1 Update — Your Feedback Matters

Our What's New in v24.1 webpage includes product-specific surveys. Your response to our survey questions will help us measure product satisfaction for features released in this major update and help us refine our plans for our next major release.

Take the survey Not interested

StepProgressBar Class

A control that visualizes event chains.

Namespace: DevExpress.Xpf.Controls

Assembly: DevExpress.Xpf.Controls.v24.1.dll

NuGet Package: DevExpress.Wpf.Controls

#Declaration

public class StepProgressBar :
    Selector

#Remarks

Run Demo: StepProgressBar

#StepProgressBar Visual Structure

The StepProgressBar consists of StepProgressBarItem objects and the progress line. Each StepProgressBarItem contains an item state indicator and two labels on opposite sides:

StepProgressBar Visual Structure

#Create a StepProgressBar

  1. Add a StepProgressBar to your window in any of the following ways:

    • Drag the control from the Visual Studio toolbox to the XAML designer.
    • Add a reference to the DevExpress.Wpf.Controls assembly. Add a StepProgressBar object to XAML.
    <Window ... 
            xmlns:dxco="http://schemas.devexpress.com/winfx/2008/xaml/controls">
        <Grid>
            <dxco:StepProgressBar/>
        </Grid>
    </Window>
    
  2. Create StepProgressBarItem objects and add them to the StepProgressBar markup. These objects are individual steps within the overall progress:

    Add StepProgressBar Items

    <dxco:StepProgressBar>
        <dxco:StepProgressBarItem />
        <dxco:StepProgressBarItem />
        <dxco:StepProgressBarItem />
        <dxco:StepProgressBarItem />
        <dxco:StepProgressBarItem />
    </dxco:StepProgressBar>
    

    Orientation and ReverseOrder properties specify the layout of StepProgressBarItems.

  3. Specify each item’s labels:

    Specify item content

    <dxco:StepProgressBar Offset="20" SelectedItemState="Indeterminate">
        <dxco:StepProgressBarItem Content="" 
                                  NearContent="Ordered" 
                                  FarContent="Sat, Oct 1"/>
        <dxco:StepProgressBarItem Content="" 
                                  NearContent="Approved" 
                                  FarContent="Sat, Oct 1"/>
        <dxco:StepProgressBarItem Content="" 
                                  NearContent="Packing" 
                                  FarContent="Mon, Oct 3" 
                                  IsSelected="True"/>
        <dxco:StepProgressBarItem Content="" 
                                  NearContent="Shipping"/>
        <dxco:StepProgressBarItem Content="" 
                                  NearContent="Delivering">
        </dxco:StepProgressBarItem>
    </dxco:StepProgressBar>
    

    Users can click StepProgressBar items to change their state. Set the StepProgressBar.IsHitTestVisible property to false to disable this behavior.

  4. Display images for completed steps:

    • Create an implicit style for StepProgressBarItems.
    • Specify an item’s ContentTemplate property to change indicator content.
    • Apply this property if the item’s State property is Completed.

    Display Item Images

    <Window.Resources>
        <Style TargetType="dxco:StepProgressBarItem">
            <Style.Triggers>
                <Trigger Property="State" Value="Completed">
                    <Setter Property="ContentTemplate">
                        <Setter.Value>
                            <DataTemplate>
                                <Image Source="{dx:SvgImageSource Uri='pack://application:,,,/DevExpress.Images.v24.1;component/SvgImages/Icon Builder/Actions_Check.svg'}" 
                                       Width="24" Height="24">
                                    <dx:WpfSvgPalette.Palette>
                                        <dx:WpfSvgPalette>
                                            <SolidColorBrush x:Key="Green" Color="White"/>
                                        </dx:WpfSvgPalette>
                                    </dx:WpfSvgPalette.Palette>
                                </Image>
                            </DataTemplate>
                        </Setter.Value>
                    </Setter>
                </Trigger>
            </Style.Triggers>
        </Style>
    </Window.Resources>
    

#Generate Items from the View Model

The StepProgressBar can obtain its items from a View Model collection:

Generate StepProgressBar Items from the View Model Collection

  1. Create a collection of items that should be displayed in the StepProgressBar:

    public class Stage {
        public int ID { get; set; }
        public string NameDone { get; set; }
        public string Name { get; set; }
        public string Description { get; set; }
        public DateTime Date { get; set; }
    }
    public class StageData {
        public static ObservableCollection<Stage> GetStages() {
            var stages = new ObservableCollection<Stage>() {
                    new Stage() { ID = 0, NameDone = "Ordered", Name = "Ordering", Description = "Your order was placed.", Date = new DateTime(2023,10,1),},
                    new Stage() { ID = 1, NameDone = "Approved", Name = "Approving", Description = "Your order was approved.", Date = new DateTime(2023,10,1) },
                    new Stage() { ID = 2, NameDone = "Packed", Name = "Packing", Description = "Your order was picked up by our courier.", Date = new DateTime(2023,10,3) },
                    new Stage() { ID = 3, NameDone = "Shipped", Name = "Shipping", Description = "Your order was shipped.", Date = new DateTime(2023,10,6) },
                    new Stage() { ID = 4, NameDone = "Delivered", Name = "Delivering", Description = "Your order was delivered.", Date = new DateTime(2023,10,8) },
                };
            return stages;
        }
    }
    
  2. Create a View Model:

    public class ViewModel : ViewModelBase {
        public ViewModel() {
            Stages = StageData.GetStages();
            CurrentStage = (from item in Stages where item.ID == 3 select item).FirstOrDefault();
        }
        public ObservableCollection<Stage> Stages { get; set; }
        public Stage CurrentStage { get; set; }
    }
    
  3. Specify the window’s DataContext and bind StepProgressBar.ItemsSource and StepProgressBar.SelectedItem to View Model properties:

    <Window ...
            xmlns:dxco="http://schemas.devexpress.com/winfx/2008/xaml/controls">
        <Window.DataContext>
            <local:ViewModel/>
        </Window.DataContext>
        <Grid>
            <dxco:StepProgressBar ItemsSource="{Binding Stages}" 
                                  SelectedItem="{Binding CurrentStage}" 
                                  SelectedItemState="Indeterminate"
                                  Orientation="Vertical" 
                                  Offset="30">
            </dxco:StepProgressBar>
        </Grid>
    </Window>
    

    Set the Orientation property to Vertical to display the StepProgressBar vertically.

  4. Use the StepProgressBar.ItemContainerStyle property to bind generated items to data:

    <dxco:StepProgressBar.ItemContainerStyle>
        <Style TargetType="dxco:StepProgressBarItem">
            <Setter Property="Content" Value=""/>
            <Setter Property="NearContent" Value="{Binding Name}"/>
            <Setter Property="NearContentHorizontalAlignment" Value="Right"/>
            <Setter Property="FarContentHorizontalAlignment" Value="Left"/>
            <Style.Triggers>
                <Trigger Property="State" Value="Completed">
                    <Setter Property="NearContent" Value="{Binding NameDone}"/>
                    <Setter Property="FarContent" Value="{Binding}"/>
                    <Setter Property="FarContentTemplate">
                        <Setter.Value>
                            <DataTemplate>
                                <StackPanel Orientation="Vertical">
                                    <TextBlock Text="{Binding Description}"/>
                                    <TextBlock Text="{Binding Date, StringFormat=D}"/>
                                </StackPanel>
                            </DataTemplate>
                        </Setter.Value>
                    </Setter>
                    <Setter Property="ContentTemplate">
                        <Setter.Value>
                            <DataTemplate>
                                <Image Source="{dx:SvgImageSource Uri='pack://application:,,,/DevExpress.Images.v24.1;component/SvgImages/Icon Builder/Actions_Check.svg'}" 
                                       Width="24" Height="24">
                                    <dx:WpfSvgPalette.Palette>
                                        <dx:WpfSvgPalette>
                                            <SolidColorBrush x:Key="Green" Color="White"/>
                                        </dx:WpfSvgPalette>
                                    </dx:WpfSvgPalette.Palette>
                                </Image>
                            </DataTemplate>
                        </Setter.Value>
                    </Setter>
                </Trigger>
            </Style.Triggers>
        </Style>
    </dxco:StepProgressBar.ItemContainerStyle>
    

#Customize Appearance

StepProgressBar - Appearance

The following properties allow you to customize the control’s appearance. Property names are self-explanatory.

  1. NearContent, NearContentTemplate, NearContentTemplateSelector

    Foreground, NearContentHorizontalAlignment, NearContentVerticalAlignment, NearContentLength

  2. FarContent, FarContentTemplate, FarContentTemplateSelector

    Foreground, FarContentHorizontalAlignment, FarContentVerticalAlignment, FarContentLength

  3. Content, ContentTemplate, ContentTemplateSelector

    Background, HorizontalContentAlignment, VerticalContentAlignment, IndicatorLength, IndicatorGeometry, IndicatorBorderSize, BorderBrush, HoverBackground, HoverBorderBrush

  4. ShowProgress, ProgressSize, ProgressAnimationDuration, ProgressStyle, Offset

  5. ShowOuterBorder, OuterBorderBrush, OuterBorderSize, OuterBorderIndent

See Also