Xamarin.Forms Barra de progreso

Download SampleDescargar el ejemplo

El control de Xamarin.FormsProgressBar representa visualmente el progreso como una barra horizontal que se rellena en un porcentaje representado por un valor de float. La clase ProgressBar se hereda de View.

En las capturas de pantalla siguientes se muestra un elemento ProgressBar en iOS y Android:

Screenshot of ProgressBar on iOS and Android

El control ProgressBar define dos propiedades:

  • Progress es un valor float que representa el progreso actual como un valor de 0 a 1. Los valores Progress inferiores a 0 se fijarán en 0, los valores mayores que 1 se fijarán en 1.
  • ProgressColor es un Color que afecta al color de la barra interior que representa el progreso actual.

Estas propiedades están respaldadas por objetos BindableProperty, lo cual significa que se puede aplicar estilo a ProgressBar y puede ser el destino de los enlaces de datos.

El control ProgressBar también define un método ProgressTo que anima la barra de su valor actual a un valor especificado. Para más información, consulta Animar ProgressBar.

Nota:

ProgressBar no acepta la manipulación del usuario, por lo que se omite al usar la tecla Tab para seleccionar controles.

Crear una ProgressBar

En XAML se puede crear una instancia de ProgressBar. Su propiedad Progress determina el porcentaje de relleno de la barra de colores interna. El valor predeterminado de la propiedad Progress es 0. En el ejemplo siguiente se muestra cómo crear una instancia de ProgressBar en XAML con el conjunto de propiedades opcional Progress:

<ProgressBar Progress="0.5" />

También se puede crear un ProgressBar en código:

ProgressBar progressBar = new ProgressBar { Progress = 0.5f };

Advertencia

No uses opciones de diseño horizontal sin restricciones, como Center, Start o End con ProgressBar. En UWP, ProgressBar se contrae a una barra de ancho cero. Mantenga el valor predeterminado HorizontalOptions de Fill y no use un ancho de Auto al colocar ProgressBar en un diseño de Grid.

Propiedades de apariencia de ProgressBar

La propiedad ProgressColor define el color de la barra interna cuando la propiedad Progress es mayor que cero. En el ejemplo siguiente se muestra cómo crear una instancia de ProgressBar en XAML con el conjunto de propiedades ProgressColor:

<ProgressBar ProgressColor="Orange" />

La propiedad ProgressColor también se puede establecer al crear ProgressBar en el código:

ProgressBar progressBar = new ProgressBar { ProgressColor = Color.Orange };

En las capturas de pantalla siguientes se muestra ProgressBar con la propiedad ProgressColor establecida en Color.Orange en iOS y Android:

Screenshot of styled ProgressBar on iOS and Android

Animar una ProgressBar

El método ProgressTo anima ProgressBar desde su valor actual Progress a un valor proporcionado a lo largo del tiempo. El método acepta un valor de progreso float, una duración uint en milisegundos, un valor de enumeración Easing y devuelve Task<bool>. En el código siguiente se muestra cómo animar ProgressBar:

// animate to 75% progress over 500 milliseconds with linear easing
await progressBar.ProgressTo(0.75, 500, Easing.Linear);

Para obtener más información sobre la enumeración de Easing, consulte las Funciones de aceleración en Xamarin.Forms.