Al realizar una operación que lleva tiempo, es crucial informar a los usuarios que un proceso está en curso y que deben esperar antes de realizar más acciones. Los indicadores de progreso son una buena opción para lograrlo, ya que muestran visualmente el porcentaje de avance que lleva un proceso. En este artículo, aprenderemos cómo usarlos en .NET MAUI.
¡Empecemos!
¿Qué es un ProgressBar?
Es un control en forma de barra que muestra el progreso de un proceso que se está ejecutando. Es importante señalar que la apariencia del control puede variar según la plataforma.
Explorando las propiedades
Este control está definido por las siguientes propiedades:
🔹 Progress: Representa el progreso en la barra y debe estar entre 0 y 1. Los valores fuera de este rango se interpretarán como el valor más cercano (por ejemplo, 2.57 se representará como 1). – Su valor por defecto es 0 – [Recibe un doble como valor].
🔹ProgressColor: Es el color que toma la barra que representa el porcentaje de avance en el control. – [Recibe un Color como valor].
Veamos un ejemplo de código:
XAML:
C#:
¿Cómo animar un ProgressBar?
Aprenderás dos enfoques para animar un ProgressBar: Usando el método ProgressTo y usando el ProgressBarAnimationBehavior de .NET MAUI Community Toolkit.
Ambos métodos permiten animar la barra de progreso que se muestra en el control, pasando de un valor inicial a un valor final. Ademas comparten los mismos parámetros, por lo que primero proporcionaré una descripción de los parámetros y posteriormente entraremos en detalle de cada uno.
➖ Valor o Progreso: Es el valor con el cual se llenará la barra de progreso. – [Recibe un doble como valor]
➖ Duración: Es la duración en milisegundos que durará la animación del ProgressBar. – [Recibe un unit como valor]
➖ Aceleración: Controla la aceleración, regula la velocidad a la que se producen las animaciones. – [Recibe un Easing como valor]
Para conocer más información sobre las funciones de Easing puedes ingresar aquí .
Sigamos con los detalles de cada una
🔹 Animación sencilla
🔹 ProgressBarAnimationBehavior de MAUI Community Toolkit
⚠ Para este ejemplo omitiré la implementación de .NET MAUI Community Toolkit desde cero. Si no sabes como hacerlo, te invito a leer este articulo en la session llamada ¿Aún no lo has implementado? y sigue las instrucciones.
Agrega el espacio de nombres a tu página
Finalmente, puedes incluir la animación (que es un Behavior) en tu XAML usando el siguiente código:
¡Y listo! 😎 A partir de ahora, ¡Ya sabes como trabajar con el ProgressBar en .NET MAUI! 💚💕
<Label Text=”¡Gracias por leer mi articulo! 👋” />
Articulo en inglés:
➖ https://askxammy.com/exploring-the-progressbar-in-net-maui/
Referencias:
1 thought on “Explorando el ProgressBar en .NET MAUI”