---
title: "New WPF Step ProgressBar to Track Multi-Step Process"
published_at: "2020-11-04T10:45:26+00:00"
modified_at: "2025-04-22T13:15:32+00:00"
url: "https://www.syncfusion.com/blogs/post/new-wpf-step-progressbar-to-track-multi-step-process"
excerpt: "Most desktop applications handle complicated tasks that are tracked in steps or checkpoints. To visualize the progress of these kinds of tasks in a WPF application, we’ve introduced a new WPF Step ProgressBar control in our 2020 Volume 3 release...."
taxonomy_category:
- "Desktop"
- "Syncfusion"
- "User interface"
- "What's new"
- "WPF"
taxonomy_post_tag:
- "desktop"
- "Progress Bar Control"
- "Step ProgressBar"
- "UI controls"
- "WPF"
---
# New WPF Step ProgressBar to Track Multi-Step Process
[Prakash Kumar D](https://www.syncfusion.com/blogs/author/prakashd)
Most desktop applications handle complicated tasks that are tracked in steps or checkpoints. To visualize the progress of these kinds of tasks in a WPF application, we’ve introduced a new WPF [Step ProgressBar](https://www.syncfusion.com/wpf-ui-controls/step-progressbar)
control in our [2020 Volume 3 release](https://www.syncfusion.com/forums/158306/essential-studio-2020-volume-3-release-v18-3-0-35-is-available-for-download)
.
The Step ProgressBar control can be used to show the progress of a multiple-step process, such as new-user registration or package delivery status tracking. You can completely customize the appearance by changing the step shape, progress bar color, step template, and content template.
Let’s now briefly see the features of the WPF Step ProgressBar, and then I’ll walk you through the steps to add it to your application.
## Key features of WPF Step ProgressBar
The key features of the WPF Step ProgressBar include:
- [Data binding](#data-binding)
- [Step shapes](#step-shapes)
- [Statuses](#statuses)
- [Orientation](#orientation)
- [Customization](#customization)
### Data binding
Data binding support in the WPF Step ProgressBar allows you to bind a collection of data models to the [ItemSource](https://docs.microsoft.com/en-us/dotnet/api/system.windows.controls.itemscontrol.itemssource?view=netcore-3.1)
property and control the last active item using the [SelectedIndex](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.ProgressBar.SfStepProgressBar.html#Syncfusion_UI_Xaml_ProgressBar_SfStepProgressBar_SelectedIndex)
property.
### Step shapes
The shape of a step marker can be a circle or square. You can also load custom templates for it.
### Statuses
The WPF Step ProgressBar supports the following statuses to show progress:
- Active
- Inactive
- Indeterminate
Based on the status, you can customize the step marker. This means whenever the status of a step changes, the visual of the step will also be changed synchronously.
### Orientation
You can visualize the progress of a multiple-step process both horizontally and vertically.
### Customization
The WPF Step ProgressBar control allows you to customize each step based on its status using the [MarkerTemplateSelector](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.ProgressBar.SfStepProgressBar.html#Syncfusion_UI_Xaml_ProgressBar_SfStepProgressBar_MarkerTemplateSelector)
property. You can customize the content of each step using a data template.
## Getting started with the WPF Step ProgressBar
Follow these steps to include the Step ProgressBar in your WPF application.
**Step 1:** Create a WPF application and install the following NuGet packages:
- [Syncfusion.SfProgressBar.WPF](https://www.nuget.org/packages/Syncfusion.SfProgressBar.WPF/)
- [Syncfusion.Tools.WPF](https://www.nuget.org/packages/Syncfusion.Tools.WPF/)
- [Syncfusion.SfSkinManager.WPF](https://www.nuget.org/packages/Syncfusion.SfSkinManager.WPF/)
- [Syncfusion.Themes.MaterialLight.WPF](https://www.nuget.org/packages/Syncfusion.Themes.MaterialLight.WPF/)
**Step 2:** Create a new view model class as demonstrated in the following code example. Here, we are going to use the Step ProgressBar to show the status of online semester fees payments.
```
///
/// Represents the view model class.
///
public class StepViewModel: INotifyPropertyChanged
{
///
/// Represents the step view item collection.
///
private ObservableCollection stepViewItems;
///
/// Initializes a new instance of the class.
///
public StepViewModel()
{
this.StepViewItems = new ObservableCollection();
this.PopulateData();
}
///
/// Represents the property changed event.
///
public event PropertyChangedEventHandler PropertyChanged;
///
/// Gets or sets the step view collections.
///
public ObservableCollection StepViewItems
{
get
{
return this.stepViewItems;
}
set
{
this.stepViewItems = value;
this.OnPropertyChanged(new PropertyChangedEventArgs(nameof(this.StepViewItems)));
}
}
///
/// Represents the property changed.
///
/// event args.
public void OnPropertyChanged(PropertyChangedEventArgs e)
{
this.PropertyChanged?.Invoke(this, e);
}
private void PopulateData()
{
this.StepViewItems.Add("StudentInfo");
this.StepViewItems.Add("AcademicInfo");
this.StepViewItems.Add("PaymentInfo");
}
}
```
**Step 3:** Import the WPF schema namespace in the ** MainWindow.xaml** file as demonstrated in the following code.
```
xmlns:Syncfusion="http://schemas.syncfusion.com/wpf"
```
**Step 4:** Initialize the Step ProgressBar as demonstrated in the following code example.
```
```
Now, we have added the Step ProgressBar control to our WPF application. After executing the previous code example, we will get output like in the following screenshot.
## Resources
You can download the source code for this sample project from this [GitHub repository](https://github.com/SyncfusionExamples/WPF-StepProgressBar-Demos/tree/master/Samples/PageViewer)
.
## Conclusion
We hope you now have a clear idea of the features and how to get started with the new [WPF Step ProgressBar](https://www.syncfusion.com/wpf-ui-controls/step-progressbar)
control. Refer to this [UG documentation](https://help.syncfusion.com/wpf/step-progressbar/overview)
for more customization options. You can download the control in our [2020 Volume 3 release](https://www.syncfusion.com/forums/158306/essential-studio-2020-volume-3-release-v18-3-0-35-is-available-for-download)
setup to check out these features.
If you have any questions about this control, please let us know in the comments section below. You can also contact us through our [support forum](https://www.syncfusion.com/forums)
, [Direct-Trac](https://www.syncfusion.com/support/directtrac/)
, or [feedback portal](https://www.syncfusion.com/feedback/wpf)
. We are happy to assist you!