Getting Started with .NET MAUI StepProgressBar

This demo explains about how to use .NET MAUI StepProgressBar in .NET MAUI apps.

Overview

The SfStepProgressBar is a control used to visually represent progress through a sequence of steps.
It is commonly used in workflows such as checkout processes, form wizards, and multi-step operations.

---

Initialization

Before using the StepProgressBar, ensure that the Syncfusion ProgressBar package is installed and add the required namespace in your XAML file.

Add Namespace

xmlns:progressbar="clr-namespace:Syncfusion.Maui.ProgressBar;assembly=Syncfusion.Maui.ProgressBar"

Create ViewModel

Create the simple viewmodel.

public class ViewModel
{
    public ObservableCollection<StepProgressBarItem> StepProgressItem { get; set; }

    public ViewModel()
    {
        StepProgressItem = new ObservableCollection<StepProgressBarItem>
        {
            new StepProgressBarItem() { PrimaryText = "Cart" },
            new StepProgressBarItem() { PrimaryText = "Address" },
            new StepProgressBarItem() { PrimaryText = "Delivery" },
            new StepProgressBarItem() { PrimaryText = "Ordered" }
        };
    }
}

StepProgressBar Control

Initilaize the StepProgressBar and bind the viewmodel.

<progressbar:SfStepProgressBar ItemsSource="{Binding StepProgressItem}" />

Output

After running the application, the StepProgressBar will display: