DEV Community

Cover image for Easily Track the Progress of Your Work Using the New .NET MAUI ProgressBar
Rajeshwari Pandinagarajan for Syncfusion, Inc.

Posted on • Originally published at syncfusion.com on

Easily Track the Progress of Your Work Using the New .NET MAUI ProgressBar

To elegantly visualize the progression of tasks, you need a groundbreaking progress bar! In that regard, our new .NET MAUI ProgressBar satisfies your needs. This control is available in our Essential Studio 2022 Volume 3 release.

The new .NET MAUI ProgressBar is a feature-rich notification control. It allows you to visualize the progress of work or an operation. In real-time scenarios, you can use this control to show the status of ongoing processes, such as loading an app, transferring a file, downloading, installation, data loading and recovery, and saving updates.

We have included two forms of the ProgressBar control in our .NET MAUI platform.

Linear ProgressBar

The .NET MAUI Linear ProgressBar, or progress indicator, is a type of graphical control that helps visualize the progress of any work or operation in a rectangular track.

Key features

Determinate state

A determinate progress bar is mainly used when progression can be estimated. It shows the total amount of progress and how long it has left to go.

For example, you can use the determinate progress indicator to show the progress of a file downloading. The progress color and percentage are used to indicate the download completion and the remaining progress.

Indeterminate state

An indeterminate progress bar is mainly used when it is impossible to predict or calculate progression. It will show continuous animation without indicating how much progress remains.

For example, you can use this indicator type for something waiting for a response, like retrieving online data from a server.

Buffer state

A buffer-type progress indicator plays dual roles: secondary progress indicates an activity or loading, while primary progress indicates the current progress position.

For example, while streaming videos, we can use this type of progress bar to show both the streaming progress (in the background) and the current video play position.

Segmented progress

We can use the segment progress bar to split progress visualization into different segments. Both the segments’ gaps and counts are customizable. This helps avoid writing several lines of code to create and position multiple progress bars.

Range colors

The range colors allow users to easily differentiate the various statuses of a work in progress and enhance the look and feel for better communication.

For example, during online food ordering, placing an order may start the bar with a red color; as the order progresses, it turns orange; upon completion, it turns yellow; and finally, it turns green with a delivered status.

Track customization

The track color (background) is used to differentiate the progress indication from the track and you can also customize the track thickness to make the UI more approachable.

Corner radius

You can easily customize the corner radius of the ProgressBar to view the control with a rounded or sharp edge.

.NET MAUI Linear ProgressBar

.NET MAUI Linear ProgressBar

Circular ProgressBar

The .NET MAUI Circular ProgressBar, or progress indicator, is a type of graphical control that visualizes the progress of any work or operation in a round or semicircle track.

Similar to the Linear ProgressBar, you can also enjoy the following features in the Circular ProgressBar:

  • Determinate and indeterminate states
  • Range colors
  • Segmented progress
  • Track customization
  • Corner radius

Let’s see the other unique features of the Circular ProgressBar.

Custom content

Add any view to the center of the Circular ProgressBar as content to indicate the completion of a task or process. You can add start, pause, or cancel buttons as content to control the progress interactively; add an image that indicates the actual task in progress; and add custom text that conveys the progress unit.

Radius and angles

Customize the start and end angles of the Circular ProgressBar to give it a unique style. Also, customize the radius of the circular track based on your application needs.

.NET MAUI Circular ProgressBar

.NET MAUI Circular ProgressBar

Add the .NET MAUI ProgressBar to your application

We have seen the key features of the .NET MAUI ProgressBar control. Let’s see how to create a simple .NET MAUI app with Linear ProgressBar and Circular ProgressBar to demonstrate their primary usage.

Step 1: Create a .NET MAUI app.

First, create a new .NET MAUI app in Visual Studio.

Step 2: Install the NuGet packages.

Syncfusion .NET MAUI controls are available in the NuGet Gallery. To add the ProgressBar control to your project, open the NuGet Package Manager in Visual Studio. Search for Syncfusion.Maui.ProgressBar and then install it.

Step 3: Handler registration.

The Syncfusion.Maui.Core NuGet package is a dependent package for all our Syncfusion .NET MAUI controls. In the MauiProgram.cs file, register the handler for Syncfusion core using the ConfigureSyncfusionCore () method.

Refer to the following code.

using Syncfusion.Maui.Core.Hosting;

namespace ProgressBar;

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

       return builder.Build();
  }
}
Enter fullscreen mode Exit fullscreen mode

Step 4: Import the namespace.

Then, import the control namespace Syncfusion.Maui.ProgressBar in your XAML or C# code.

xmlns:progressBar="clr-namespace:Syncfusion.Maui.ProgressBar;assembly=Syncfusion.Maui.ProgressBar"
Enter fullscreen mode Exit fullscreen mode

Step 5: Initialize the ProgressBar and set the progress value.

Now, initialize the SfLinearProgressBar or SfCircularProgressBar control along with the progress value based on your application needs.

Linear ProgressBar:

<progressBar:SfLinearProgressBar Progress="75"/>
Enter fullscreen mode Exit fullscreen mode

.NET MAUI Linear ProgressBar

Circular ProgressBar:

<progressBar:SfCircularProgressBar Progress="75" />
Enter fullscreen mode Exit fullscreen mode

.NET MAUI Circular ProgressBar

Note: By default, the value of progress should be specified between 0 and 100. To render the progress value between 0 and 1, set the Minimum property to 0 and the Maximum property to 1.

Step 6: Enabling the indeterminate state.

You can enable the indeterminate state for the ProgressBar using the IsIndeterminate property, as in the following code example.

Linear ProgressBar:

<progressBar:SfLinearProgressBar IsIndeterminate="True"/>
Enter fullscreen mode Exit fullscreen mode

Indeterminate state in .NET MAUI Linear ProgressBar

Circular ProgressBar:

<progressBar:SfCircularProgressBar IsIndeterminate="True" />
Enter fullscreen mode Exit fullscreen mode

Indeterminate state in .NET MAUI Circular ProgressBar

GitHub reference

For more information, refer to the .NET MAUI ProgressBar Getting Started demo on GitHub.

Conclusion

Thanks for reading! In this blog, we walked you through the new Syncfusion .NET MAUI ProgressBar control and its features available in the 2022 Volume 3 release. For more information, refer to its user guide. Use this control to elegantly visualize work in progress.

Leave your feedback in the comments section given below.

Refer to our Release Notes and the What’s New pages to check the other updates in this release. Also, you can contact us through our support forums, support portal, or feedback portal. We are always happy to assist you!

Related blogs

Top comments (0)