Streamline Your Progress Navigation with the New .NET MAUI StepProgressBar
Tags: dotnetmaui, mobile, whatsnew, ui
Published: 2024-03-28 07:18:57

---
title: Streamline Your Progress Navigation with the New .NET MAUI StepProgressBar
published: true
date: 2024-03-25 15:12:27 UTC
tags: dotnetmaui, mobile, whatsnew, ui
canonical_url: https://www.syncfusion.com/blogs/post/dotnet-maui-step-progress-bar
cover_image: https://dev-to-uploads.s3.amazonaws.com/uploads/articles/6f5ruklajl5ha5eks0nj.png
---

**TLDR:** Showcasing the features of the new Syncfusion .NET MAUI StepProgressBar control with vivid, picturesque illustrations and the steps to get started.

We are thrilled to announce an exciting update for our community! With unveiling the [2024 Vol 1 release](https://www.syncfusion.com/forums/187257/essential-studio-2024-volume-1-main-release-v25-1-35-is-available-for-download "Essential Studio 2024 Volume 1") in the Syncfusion [.NET MAUI suite](https://www.syncfusion.com/maui-controls ".NET MAUI controls"), we’re introducing a groundbreaking addition that promises to revolutionize your app design and user interaction: the all-new [.NET MAUI StepProgressBar](https://www.syncfusion.com/maui-controls/maui-stepprogressbar ".NET MAUI StepProgressBar") control!

The new .NET MAUI StepProgressBar is a control that indicates the progress of a multiple-step (state) process. Users can utilize this control to track the progress of online purchases, new user registrations, and the live location of buses, trains, and flights.

Let’s explore its vivid features!

## Key features

The key features of the .NET MAUI StepProgressBar control are as follows:

- [Orientation](#Orientation)
- [Status](#Status)
- [Customizable descriptions](#Customizable)
- [Flexible label positioning](#Flexible)
- [Step content customization](#Content)
- [Step shape customization](#Step)

### <a name="Orientation">Orientation</a>

Visualize the progression of a multi-step process horizontally or vertically, providing layout flexibility to integrate the StepProgressBar into various app designs seamlessly.

<figure>

  <img src="https://www.syncfusion.com/blogs/wp-content/uploads/2024/03/Horizontal-orientation-support-in-.NET-MAUI-StepProgressBar-1.png" alt="Horizontal orientation support in .NET MAUI StepProgressBar" style="width:100%">

  <figcaption>Horizontal orientation support in .NET MAUI StepProgressBar</figcaption>

</figure>

<figure>

  <img src="https://www.syncfusion.com/blogs/wp-content/uploads/2024/03/Vertical-orientation-support-in-.NET-MAUI-StepProgressBar-1.png" alt="Vertical orientation support in .NET MAUI StepProgressBar" style="width:100%">

  <figcaption>Vertical orientation support in .NET MAUI StepProgressBar</figcaption>

</figure>

### <a name="Status">Status</a>

The active step index and progress value determine the status of a step, which can be one of three:

- **Not started** – This signifies that the step has yet to begin.
- **In progress** – This shows that the step is being worked on.
- **Completed** – Indicates that the step has been successfully finished.

<figure>

  <img src="https://www.syncfusion.com/blogs/wp-content/uploads/2024/03/Status-support-in-.NET-MAUI-StepProgressBar-1.png" alt="Status support in .NET MAUI StepProgressBar" style="width:100%">

  <figcaption>Status support in .NET MAUI StepProgressBar</figcaption>

</figure>

### <a name="Customizable">Customizable descriptions</a>

Steps can include descriptions on either side or both sides. The primary description typically appears on the right (in vertical progress bars) or at the bottom (in horizontal progress bars). In contrast, the secondary description is positioned on the left or top. You can also customize these descriptions using the formatting options.

<figure>

  <img src="https://www.syncfusion.com/blogs/wp-content/uploads/2024/03/Customizing-the-description-in-.NET-MAUI-StepProgressBar-1.png" alt="Customizing the description in .NET MAUI StepProgressBar" style="width:100%">

  <figcaption>Customizing the description in .NET MAUI StepProgressBar</figcaption>

</figure>

### <a name="Flexible">Flexible label positioning</a>

Labels can be positioned in four ways: start, end, top, and bottom in horizontal and vertical orientations, offering flexibility in how information is displayed alongside the progress bar.

<figure>

  <img src="https://www.syncfusion.com/blogs/wp-content/uploads/2024/03/Customizing-label-position-in-.NET-MAUI-StepProgressBar-1.png" alt="Customizing label position in .NET MAUI StepProgressBar" style="width:100%">

  <figcaption>Customizing label position in .NET MAUI StepProgressBar</figcaption>

</figure>

### <a name="Content">Step content customization</a>

Customize the content of each step with numbers, ticks, crosses, dots, or images, allowing for enhanced visual representation.

<figure>

  <img src="https://www.syncfusion.com/blogs/wp-content/uploads/2024/03/Customizing-the-step-content-in-.NET-MAUI-StepProgressBar-1.png" alt="Customizing the step content in .NET MAUI StepProgressBar" style="width:100%">

  <figcaption>Customizing the step content in .NET MAUI StepProgressBar</figcaption>

</figure>

### <a name="Step">Step shape customization</a>

Choose between circles or squares to tailor the visual appearance of each step, aligning perfectly with your app’s design.

<figure>

  <img src="https://www.syncfusion.com/blogs/wp-content/uploads/2024/03/Customizing-the-step-shape-in-.NET-MAUI-StepProgressBar-1.png" alt="Customizing the step shape in .NET MAUI StepProgressBar" style="width:100%">

  <figcaption>Customizing the step shape in .NET MAUI StepProgressBar</figcaption>

</figure>

**Note:** For more details, refer to the [.NET MAUI StepProgressBar control documentation](https://help.syncfusion.com/maui/stepprogressbar/getting-started ".NET MAUI StepProgressBar user guide").

## Getting started with the .NET MAUI StepProgressBar control

We have seen the key features of the .NET MAUI StepProgressBar control. Now, let’s learn how to integrate it into your .NET MAUI app and utilize its features:

### Step 1: Create a .NET MAUI app

First, create a [.NET MAUI application.](https://learn.microsoft.com/en-us/dotnet/maui/get-started/first-app?view=net-maui-7.0&tabs=vswin&pivots=devices-android "Build your first .NET MAUI app")

### Step 2: Add the .NET MAUI ProgressBar NuGet package

Syncfusion .NET MAUI controls are available in the [NuGet gallery](https://www.nuget.org/ "NuGet gallery"). To add the .NET MAUI StepProgressBar control to your project, open the NuGet package manager in [Visual Studio](https://visualstudio.microsoft.com/ "Visual Studio"), search for [Syncfusion.Maui.ProgressBar](https://www.nuget.org/packages/Syncfusion.Maui.ProgressBar "Syncfusion.Maui.ProgressBar NuGet package"), and install it.

### Step 3: Register the handler

In the **MauiProgram.cs** file, register the handler for **Syncfusion core**. Refer to the following code.

```csharp
using Syncfusion.Maui.Core.Hosting;

public static class MauiProgram
{
    public static MauiApp CreateMauiApp()
    {
        var builder = MauiApp.CreateBuilder();
        builder
          .UseMauiApp<App>()
          .ConfigureSyncfusionCore()
          .ConfigureFonts(fonts =>
          {
              fonts.AddFont("OpenSans-Regular.ttf", "OpenSansRegular");
              fonts.AddFont("OpenSans-Semibold.ttf", "OpenSansSemibold");
              fonts.AddFont("Roboto-Medium.ttf", "Roboto-Medium");
              fonts.AddFont("Roboto-Regular.ttf", "Roboto-Regular");
          });
        return builder. Build();
    }
}
```

### Step 4: Add the namespace

Add the **Syncfusion.Maui.ProgressBar** namespace in your XAML page.

```xml
xmlns:progressBar="clr-namespace:Syncfusion.Maui.ProgressBar;assembly=Syncfusion.Maui.ProgressBar"
```

### Step 5: Initialize the Syncfusion .NET MAUI StepProgressBar control

Finally, initialize the Syncfusion .NET MAUI StepProgressBar control. Refer to the following code examples.

**XAML**

```xml
<Grid>
 <Grid.RowDefinitions>
  <RowDefinition Height="0.07*"/>
  <RowDefinition Height="0.8*"/>
 </Grid.RowDefinitions>

 <Label Grid.Row="0" Text="Out for Delivery" FontAttributes="Bold" Padding="0,10,0,0" Style="{StaticResource labelStyle}" HorizontalOptions="Center"/>
 <BoxView Grid.Row="0" HeightRequest="1" BackgroundColor="{AppThemeBinding Light={StaticResource Border}, Dark={StaticResource Border}}" VerticalOptions="End" HorizontalOptions="Fill"/>
 <ScrollView Orientation="Vertical" Grid.Row="1" VerticalScrollBarVisibility="Never">
  <progressBar:SfStepProgressBar ItemsSource="{Binding ShipmentInfoCollection}" 
                                 Orientation="Vertical"
                                 x:Name="stepProgress"
                                 Margin="24,10,0,0"
                                 LabelSpacing="12"
                                 ProgressAnimationDuration="2000"
                                 ActiveStepIndex="3"
                                 ActiveStepProgressValue="50">
   <progressBar:SfStepProgressBar.CompletedStepSettings>
    <progressBar:StepSettings Background="Green" ProgressColor="Green"/>
   </progressBar:SfStepProgressBar.CompletedStepSettings>

   <progressBar:SfStepProgressBar.InProgressStepSettings>
    <progressBar:StepSettings ProgressColor="Green"/>
   </progressBar:SfStepProgressBar.InProgressStepSettings>

  </progressBar:SfStepProgressBar>
 </ScrollView>
</Grid>
```

**C#**

```csharp
public class ViewModel : INotifyPropertyChanged
{
        /// <summary>
        /// The order formatted string.
        /// </summary>
        private FormattedString orderFormattedString;

        /// <summary>
        /// The shipped formatted string.
        /// </summary>
        private FormattedString shippedFormattedString;

        /// <summary>
        /// The out for delivery formatted string.
        /// </summary>
        private FormattedString outForDeliveryFormattedString;

        /// <summary>
        /// The delivery formatted string.
        /// </summary>
        private FormattedString deliveryFormattedString;

        /// <summary>
        /// The shipment collection.
        /// </summary>
        private ObservableCollection<StepProgressBarItem> shipmentInfoCollection;

        public event PropertyChangedEventHandler? PropertyChanged;

        /// <summary>
        /// The shipment collection.
        /// </summary>
        public ObservableCollection<StepProgressBarItem> ShipmentInfoCollection
        {
            get { return shipmentInfoCollection; }
            set
            {
                if (shipmentInfoCollection != value)
                {
                    shipmentInfoCollection = value;
                    OnPropertyChanged(nameof(ShipmentInfoCollection));
                }
            }
        }

        /// <summary>
        /// Check whether the application theme is light or dark.
        /// </summary>
        private bool isLightTheme = Application.Current?.RequestedTheme == AppTheme.Light;

        public ViewModel()
        {
            var currentDate = DateTime.Now.AddDays(-2);
            orderFormattedString = new FormattedString();
            orderFormattedString.Spans.Add(new Span { Text = "Order Confirmed", FontSize = 14, TextColor = isLightTheme? Color.FromRgb(28, 28, 28) : Colors.White, FontFamily ="Roboto-Medium" });
            orderFormattedString.Spans.Add(new Span { Text = "\n ", FontSize = 8 });
            orderFormattedString.Spans.Add(new Span { Text = "\nYour purchase has been confirmed.", FontSize = 12, TextColor = isLightTheme ? Color.FromRgba("#1C1B1F") : Color.FromRgba("#E6E1E5"), FontFamily = "Roboto-Regular" });
            orderFormattedString.Spans.Add(new Span { Text = "\n" + GetFormattedDateText(currentDate), FontSize = 12, TextColor = isLightTheme ? Color.FromRgb(99, 99, 99) : Color.FromRgba("#CAC4D0"), FontFamily = "Roboto-Regular" });
            orderFormattedString.Spans.Add(new Span { Text = "\n ", FontSize = 8, });
            orderFormattedString.Spans.Add(new Span { Text = "\nYour order has been picked up by courier partner.", FontSize = 12, TextColor = isLightTheme ? Color.FromRgba("#1C1B1F") : Color.FromRgba("#E6E1E5"), FontFamily = "Roboto-Regular" });
            orderFormattedString.Spans.Add(new Span { Text = "\n" + GetFormattedDateText(currentDate.AddHours(5)), FontSize = 12, TextColor = isLightTheme ? Color.FromRgb(99, 99, 99) : Color.FromRgba("#CAC4D0"), FontFamily = "Roboto-Regular" });

            shippedFormattedString = new FormattedString();
            shippedFormattedString.Spans.Add(new Span { Text = "Shipped", FontSize = 14, TextColor = isLightTheme ? Color.FromRgb(28, 28, 28) : Colors.White, FontFamily = "Roboto-Medium" });
            shippedFormattedString.Spans.Add(new Span { Text = "\n ", FontSize = 8 });
            shippedFormattedString.Spans.Add(new Span { Text = "\nYour order is on its way.", FontSize = 12, TextColor = isLightTheme ? Color.FromRgba("#1C1B1F") : Color.FromRgba("#E6E1E5"), FontFamily = "Roboto-Regular" });
            shippedFormattedString.Spans.Add(new Span { Text = "\n" + GetFormattedDateText(currentDate.AddHours(5).AddMinutes(30)), FontSize = 12, TextColor = isLightTheme ? Color.FromRgb(99, 99, 99) : Color.FromRgba("#CAC4D0"), FontFamily = "Roboto-Regular" });
            shippedFormattedString.Spans.Add(new Span { Text = "\n ", FontSize = 8, });
            shippedFormattedString.Spans.Add(new Span { Text = "\nYour order has been received in the hub nearest to you.", FontSize = 12, TextColor = isLightTheme ? Color.FromRgba("#1C1B1F") : Color.FromRgba("#E6E1E5"), FontFamily = "Roboto-Regular" });
            shippedFormattedString.Spans.Add(new Span { Text = "\n" + GetFormattedDateText(currentDate.AddHours(7).AddMinutes(30)), FontSize = 12, TextColor = isLightTheme ? Color.FromRgb(99, 99, 99) : Color.FromRgba("#CAC4D0"), FontFamily = "Roboto-Regular" });

            outForDeliveryFormattedString = new FormattedString();
            outForDeliveryFormattedString.Spans.Add(new Span { Text = "Out For Delivery", FontSize = 14, TextColor = isLightTheme ? Color.FromRgb(28, 28, 28) : Colors.White, FontFamily = "Roboto-Medium" });
            outForDeliveryFormattedString.Spans.Add(new Span { Text = "\n ", FontSize = 8 });
            outForDeliveryFormattedString.Spans.Add(new Span { Text = "\nYour order is out for delivery.", FontSize = 12, TextColor = isLightTheme ? Color.FromRgba("#1C1B1F") : Color.FromRgba("#E6E1E5"), FontFamily = "Roboto-Regular" });
            outForDeliveryFormattedString.Spans.Add(new Span { Text = "\n" + GetFormattedDateText(currentDate.AddDays(2).AddHours(-2)), FontSize = 12, TextColor = isLightTheme ? Color.FromRgb(99, 99, 99) : Color.FromRgba("#CAC4D0"), FontFamily = "Roboto-Regular" });
            outForDeliveryFormattedString.Spans.Add(new Span { Text = "\n", FontSize = 5 });

            deliveryFormattedString = new FormattedString();
            deliveryFormattedString.Spans.Add(new Span { Text = "Delivery Expected By " + DateTime.Now.ToString($"ddd, d'{this.GetDaySuffix(DateTime.Now)}' MMM"), FontSize = 14, TextColor = isLightTheme ? Color.FromRgb(99, 99, 99) : Color.FromRgba("#CAC4D0"), FontFamily = "Roboto-Medium" });
            deliveryFormattedString.Spans.Add(new Span { Text = "\n ", FontSize = 8 });
            deliveryFormattedString.Spans.Add(new Span { Text = "\nItem yet to be delivered.", FontSize = 12, TextColor = isLightTheme ? Color.FromRgb(99, 99, 99) : Color.FromRgba("#CAC4D0"), FontFamily = "Roboto-Regular" });
            deliveryFormattedString.Spans.Add(new Span { Text = "\nExpected by " + DateTime.Now.ToString($"ddd, d'{this.GetDaySuffix(DateTime.Now)}' MMM") + " at " + DateTime.Now.AddHours(1).ToString("h:mm tt"), FontSize = 12, TextColor = isLightTheme ? Color.FromRgb(99, 99, 99) : Color.FromRgba("#CAC4D0"), FontFamily = "Roboto-Regular" });
            deliveryFormattedString.Spans.Add(new Span { Text = "\n", FontSize = 5 });

            shipmentInfoCollection = new ObservableCollection<StepProgressBarItem>();
            shipmentInfoCollection.Add(new StepProgressBarItem() { PrimaryFormattedText = orderFormattedString });
            shipmentInfoCollection.Add(new StepProgressBarItem() { PrimaryFormattedText = shippedFormattedString });
            shipmentInfoCollection.Add(new StepProgressBarItem() { PrimaryFormattedText = outForDeliveryFormattedString });
            shipmentInfoCollection.Add(new StepProgressBarItem() { PrimaryFormattedText = deliveryFormattedString });
        }

        private string GetFormattedDateText(DateTime dateTime)
        {
            string formattedDate = dateTime.ToString("ddd, d MMM \\'yy 'at' h:mm tt");
            return formattedDate;
        }

        private string GetDaySuffix(DateTime dateTime)
        {
            string daySuffix;
            switch (dateTime.Day % 10)
            {
                case 1 when dateTime.Day != 11:
                    daySuffix = "st";
                    break;
                case 2 when dateTime.Day != 12:
                    daySuffix = "nd";
                    break;
                case 3 when dateTime.Day != 13:
                    daySuffix = "rd";
                    break;
                default:
                    daySuffix = "th";
                    break;
            }

            return daySuffix;
        }

        protected virtual void OnPropertyChanged(string propertyName)
        {
            PropertyChanged?.Invoke(this, new PropertyChangedEventArgs(propertyName));
        }
}
```

After executing the previous code examples, we’ll get the output in the following image.

<figure>

  <img src="https://www.syncfusion.com/blogs/wp-content/uploads/2024/03/Integrating-the-StepProgressBar-control-in-a-.NET-MAUI-app.png" alt="Integrating the StepProgressBar control in a .NET MAUI app" style="width:100%">

  <figcaption>Integrating the StepProgressBar control in a .NET MAUI app</figcaption>

</figure>


## GitHub references

For more details, refer to the [.NET MAUI StepProgressBar Control demo](https://github.com/syncfusion/maui-demos ".NET MAUI StepProgressBar Control GitHub demo") on GitHub.

## Conclusion

Thanks for reading! This blog explored the features of the new Syncfusion [.NET MAUI StepProgressBar](https://www.syncfusion.com/maui-controls/maui-stepprogressbar ".NET MAUI StepProgressBar") rolled out in the [2024 Volume 1](https://www.syncfusion.com/forums/187257/essential-studio-2024-volume-1-main-release-v25-1-35-is-available-for-download "Essential Studio 2024 Volume 1") release. You can learn more about the latest .NET MAUI advancements on our [Release Notes ](https://help.syncfusion.com/common/essential-studio/release-notes/v20.4.0.38 "Essential Studio Release Notes")and [What’s New](https://www.syncfusion.com/products/whatsnew "Essential Studio What’s New") pages. Try them out and leave your feedback in the comments section below!

Download [Essential Studio for .NET MAUI](https://www.syncfusion.com/downloads/maui "Get free evaluation of the Essential Studio for .NET MAUI") to start evaluating them immediately.

If you have any questions, contact us through our [support forum](https://www.syncfusion.com/forums "Syncfusion Support Forum"), [support portal](https://support.syncfusion.com/ "Syncfusion Support Portal"), or [feedback portal](https://www.syncfusion.com/feedback/ "Syncfusion Feedback Portal"). We are always happy to help you!

## Related blogs

- [Enhancing user Experience: Implementing Typos Tolerance in .NET MAUI Autocomplete](https://www.syncfusion.com/blogs/post/tolerate-typos-maui-autocomplete.aspx "Blog: Enhancing user Experience: Implementing Typos Tolerance in .NET MAUI Autocomplete")
- [Syncfusion’s Response to Xamarin’s End of Life: a Comprehensive Plan](https://www.syncfusion.com/blogs/post/xamarins-end-of-life.aspx "Blog: Syncfusion’s Response to Xamarin’s End of Life: a Comprehensive Plan")
- [Chart of the Week: Create a .NET MAUI Column Chart to Visualize which Milk is the Most Sustainable](https://www.syncfusion.com/blogs/post/maui-columnchart-sustainable-milk.aspx "Blog: Chart of the Week: Create a .NET MAUI Column Chart to Visualize which Milk is the Most Sustainable")