Exploring the ProgressBar in .NET MAUI

When performing an operation that takes time, it’s crucial to inform users that a process is ongoing and that they need to wait before taking further action. Progress indicators are a good option to achieve this, as they visually show the percentage of progress that a process takes. In this article, we will learn how to use them in .NET MAUI.

Let’s start!

What is a ProgressBar?

It’s a bar control that shows the progress of a process that is running. It is important to note that the appearance of the control may vary depending on the platform.

Exploring the properties

This control is defined by the following properties:

🔹 Progress: Represents progress in the bar and must be between 0 and 1. Values outside this range will be interpreted as the closest value (e.g. 2.57 will be represented as 1). – Its default value is 0 – [Receives a double as a value].

🔹 ProgressColor: It is the color that the bar that represents the percentage of progress in the control takes. – [Receives a Color as a value].

Let’s see a code example:

XAML:

C#:

How to animate a ProgressBar?

You’ll learn two approaches to animating a ProgressBar: Using the ProgressTo method and using the ProgressBarAnimationBehavior from the .NET MAUI Community Toolkit.

Both enables you to animate the progress bar displayed in the control, transitioning it from an initial value to a final value.. They also share the same parameters, that’s why I will first provide a description of these parameters and then we will go into detail about each one later.

➖ Value or Progress: It’s the value up to which the progress bar will be filled. – [Receives a double as a value]

➖ Length: It’s the duration in milliseconds that the animation of the ProgressBar will last. – [Receives a unit as a value]

➖ Easing: Controls acceleration, regulates the speed at which animations occur. – [Receives an Easing as a value]

To know more information about Easing functions you can enter here.

Let’s continue with the details of each one

🔹 Simple animation

🔹 ProgressBarAnimationBehavior from MAUI Community Toolkit

⚠ For this example I will skip implementing the .NET MAUI Community Toolkit from scratch. If you don’t know how to do it, I invite you to read this article in the session called “Still haven’t implemented it?” and follow the instructions.

Add the following namespace to your page

Finally, you can include the animation (which is a behavior) in your XAML using the following code:

And done!! 😎 From now on, you are ready to add ProgressBar in your .NET MAUI Applications. I I hope you like it! 💚💕

Spanish post: