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

C#

public class StepProgressBar :
    Selector

VB.NET

Public Class StepProgressBar
    Inherits 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:

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

   

   XAML

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

   

   XAML

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

   

   XAML

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

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

   C#

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

   VB.NET

   Public Class Stage
       Public Property ID As Integer
       Public Property NameDone As String
       Public Property Name As String
       Public Property Description As String
       Public Property Date As DateTime
   End Class
   
   Public Class StageData
       Public Shared Function GetStages() As ObservableCollection(Of Stage)
           Dim stages = New ObservableCollection(Of Stage)() From {
               New Stage() With {
                   .ID = 0,
                   .NameDone = "Ordered",
                   .Name = "Ordering",
                   .Description = "Your order was placed.",
                   .Date = New DateTime(2023, 10, 1)
               },
               New Stage() With {
                   .ID = 1,
                   .NameDone = "Approved",
                   .Name = "Approving",
                   .Description = "Your order was approved.",
                   .Date = New DateTime(2023, 10, 1)
               },
               New Stage() With {
                   .ID = 2,
                   .NameDone = "Packed",
                   .Name = "Packing",
                   .Description = "Your order was picked up by our courier.",
                   .Date = New DateTime(2023, 10, 3)
               },
               New Stage() With {
                   .ID = 3,
                   .NameDone = "Shipped",
                   .Name = "Shipping",
                   .Description = "Your order was shipped.",
                   .Date = New DateTime(2023, 10, 6)
               },
               New Stage() With {
                   .ID = 4,
                   .NameDone = "Delivered",
                   .Name = "Delivering",
                   .Description = "Your order was delivered.",
                   .Date = New DateTime(2023, 10, 8)
               }
           }
           Return stages
       End Function
   End Class
   

2. Create a View Model:

   C#

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

   VB.NET

   Public Class ViewModel
       Inherits ViewModelBase
   
       Public Sub New()
           Stages = StageData.GetStages()
           CurrentStage = (From item In Stages Where item.ID = 3 Select item).FirstOrDefault()
       End Sub
   
       Public Property Stages As ObservableCollection(Of Stage)
       Public Property CurrentStage As Stage
   End Class
   

3. Specify the window’s DataContext and bind StepProgressBar.ItemsSource and StepProgressBar.SelectedItem to View Model properties:

   XAML

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

   XAML

   <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

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

Inheritance

Object

DispatcherObject

DependencyObject

Visual

UIElement

FrameworkElement

Control

ItemsControl

Selector

StepProgressBar