Controles de progreso

  • Artículo

Un control de progreso proporciona información al usuario sobre el hecho de que se está llevando a cabo una operación de ejecución larga. Esto puede significar que el usuario no puede interactuar con la aplicación cuando el indicador de progreso está visible y también puede indicar el tiempo de espera aproximado, según el indicador que usa.

Tipos de progreso

Hay dos controles que muestran al usuario que hay una operación en curso: con una clase ProgressBar o ProgressRing. Tanto ProgressBar como ProgressRing tienen dos estados que comunican si el usuario puede interactuar con la aplicación o no.

  • El estado determinado de la clase ProgressBar y ProgressRing muestra el porcentaje completado de una tarea. Esto se debe usar durante una operación cuya duración se conoce, pero el progreso no debe bloquear la interacción del usuario con la aplicación.
  • El estado indeterminado de la clase ProgressBar muestra que una operación está en curso, no bloquea la interacción del usuario con la aplicación y no se conoce su tiempo de finalización.
  • El estado indeterminado de la clase ProgressRing muestra que una operación está en curso, bloquea la interacción del usuario con la aplicación y no se conoce su tiempo de finalización.

Además, un control de progreso es de solo lectura y no es interactivo. Esto significa que el usuario no puede invocar o usar estos controles directamente.

Control Pantalla
Control ProgressBar indeterminado ProgressBar indeterminada
Control ProgressBar determinado ProgressBar determinada
Control ProgressRing indeterminado Estado de ProgressRing indeterminado
ProgressRing determinado Estado de ProgressRing determinado

¿Es este el control adecuado?

No siempre resulta obvio qué control o qué estado (determinado o indeterminado) se debe usar cuando se intenta mostrar que algo está sucediendo. A veces, una tarea es tan obvia que no necesita un control de progreso, y a veces, incluso si se usa un control de progreso, una línea de texto sigue siendo necesaria para explicar al usuario qué operación está en curso.

ProgressBar

  • ¿El control tiene una duración definida o una finalización predecible?

    Entonces, usa una clase ProgressBar determinada y actualiza el porcentaje o el valor según corresponda.

  • ¿El usuario puede continuar sin tener que supervisar el progreso de la operación?

    Cuando se usa un control ProgressBar, la interacción es no modal, lo que normalmente significa que la finalización de la operación no bloquea al usuario y puede seguir usando la aplicación de otras maneras hasta que haya finalizado ese aspecto.

  • Palabras clave

    Si la operación usa estas palabras clave o si aparece texto junto con la operación de progreso que coincida con estas palabras clave, considera la posibilidad de usar una clase ProgressBar:

    • Cargando...
    • Recuperando
    • Trabajando...

ProgressRing

  • ¿La operación hará que el usuario tenga que esperar para continuar?

    Si una operación necesita que toda la interacción (o una gran parte) con la aplicación espere hasta que se haya completado, la clase ProgressRing indeterminada es la mejor opción.

    • ¿El control tiene una duración definida o una finalización predecible?

    Use una clase ProgressRing determinada si quiere que el objeto visual sea un anillo en lugar de una barra, y actualice el porcentaje o el valor en consecuencia.

  • ¿La aplicación espera a que el usuario complete una tarea?

    Si es así, use una clase ProgressRing indeterminada, ya que está pensada para indicar un tiempo de espera desconocido para el usuario.

  • Palabras clave

    Si la operación usa estas palabras clave o si aparece texto junto con la operación de progreso que coincida con estas palabras clave; considera la posibilidad de usar una clase ProgressRing:

    • Actualizando
    • Iniciando sesión...
    • Conectando...

No es necesaria ninguna indicación de progreso

  • ¿El usuario necesita saber que está ocurriendo algo?

    Por ejemplo, si la aplicación está descargando algo en segundo plano y el usuario no inició la descarga, este no tiene por qué saberlo necesariamente.

  • ¿La operación es una actividad en segundo plano que no bloquea la actividad del usuario y tiene poco interés (aunque lo tenga en parte) para el usuario?

    Usa texto si la aplicación está realizando tareas que no tienen que estar visibles constantemente, pero necesitas mostrar el estado igualmente.

  • ¿Al usuario solo le interesa la finalización de la operación?

    A veces, es mejor mostrar un aviso solo cuando la operación se completa o proporcionar inmediatamente un elemento visual cuando la operación haya finalizado y ejecutar los toques finales en segundo plano.

Procedimientos recomendados de los controles de progreso

A veces, es mejor ver algunas representaciones visuales de cuándo y dónde se usarán los distintos controles de progreso:

ProgressBar: determinada

Ejemplo de clase ProgressBar determinada

El primer ejemplo es una clase ProgressBar determinada. Cuando se conoce la duración de la operación, cuando se instala, descarga, configura, etc.; es mejor usar una clase ProgressBar determinada.

ProgressBar: indeterminada

Ejemplo de clase ProgressBar indeterminada

Cuando se desconoce cuánto tardará la operación, usa una clase ProgressBar indeterminada. Las clases ProgressBar indeterminadas también son útiles cuando se debe rellenar una lista virtualizada y crear una transición visual suave de una clase ProgressBar indeterminada a una determinada.

  • ¿La operación está en una colección virtualizada?

    Si es así, no coloques un indicador de progreso en cada elemento de lista cuando aparezcan. En su lugar, usa una clase ProgressBar y colócala en la parte superior de la colección de elementos en la que se carga para mostrar que se capturan los elementos.

ProgressRing: Indeterminado

Ejemplo de la clase ProgressRing indeterminada

La clase ProgressRing indeterminada se usa cuando cualquier interacción del usuario con la aplicación se detiene o la aplicación espera la entrada del usuario para continuar. El ejemplo "Iniciando sesión…" anterior es un escenario perfecto de la clase ProgressRing, ya que el usuario no puede continuar usando la aplicación hasta que se haya completado el inicio de sesión.

ProgressRing: determinado

Ejemplo de la clase ProgressRing determinada

Cuando se conoce la duración de la operación y se quiere el objeto visual del anillo, cuando se instala, descarga, configura, etc.; es mejor usar una clase ProgressRing determinada.

UWP y WinUI 2

Importante

La información y los ejemplos de este artículo están optimizados para aplicaciones que usan el SDK de Aplicaciones para Windows y WinUI 3, pero generalmente son aplicables a las aplicaciones para UWP que usan WinUI 2. Consulte el material de referencia de las API de UWP para obtener información y ejemplos específicos de la plataforma.

Esta sección contiene información que necesita para usar el control en una aplicación para UWP o WinUI 2.

Los controles de progreso de las aplicaciones para UWP se incluyen como parte de la Biblioteca de interfaz de usuario de Windows 2. Para obtener más información e instrucciones sobre la instalación, consulta el artículo Windows UI Library (Biblioteca de interfaz de usuario de Windows). Hay API para este control en los espacios de nombres Windows.UI.Xaml.Controls y Microsoft.UI.Xaml.Controls.

Se recomienda usar la versión más reciente de WinUI 2 para obtener los estilos, las plantillas y las características más actuales de todos los controles. WinUI 2.2 o posterior incluye una nueva plantilla para este control que usa esquinas redondeadas. Para obtener más información, consulta Radio de redondeo.

Para usar el código de este artículo con WinUI 2, use un alias en XAML (usamos muxc) para representar las API de la Biblioteca de interfaz de usuario de Windows que se incluyen en el proyecto. Consulte Introducción a la Biblioteca de interfaz de usuario de Windows 2 para obtener más información.

xmlns:muxc="using:Microsoft.UI.Xaml.Controls"

<muxc:ProgressBar />
<muxc:ProgressRing />

Creación de un control de progreso

Abra la aplicación Galería de WinUI 3 y vea ProgressBar o ProgressRing.

La aplicación WinUI 3 Gallery incluye ejemplos interactivos de la mayoría de los controles, las características y la funcionalidad de WinUI 3. Obtenga la aplicación en Microsoft Store o el código fuente en GitHub.

Ambos controles de progreso son bastante simples, pero algunas características visuales de los controles no son fáciles de personalizar.

Cambiar el tamaño de la clase ProgressRing

Se puede cambiar el tamaño de la clase ProgressRing y ampliarlo tanto como quieras, pero su tamaño mínimo es 20x20epx. Para cambiar el tamaño de una clase ProgressRing, debes establecer su alto y ancho. Si solo se establece el alto o el ancho, el control supone que se usa el tamaño mínimo (20x20epx). Por el contrario, si se establecen dos tamaños distintos para el alto y el ancho, se aplica el tamaño más pequeño. Para garantizar que la clase ProgressRing sea la correcta para tus necesidades, establece tanto el alto como el ancho con el mismo valor:

<ProgressRing Height="100" Width="100"/>

Para hacer la clase ProgressRing visible y animarla, debes establecer la propiedad IsActive en true:

<ProgressRing IsActive="True" Height="100" Width="100"/>

progressRing.IsActive = true;

Colores de los controles de progreso

De manera predeterminada, se establece el color principal de los controles de progreso en el color de énfasis del sistema. Para invalidar este pincel, simplemente, cambia la propiedad Foreground en uno de los controles.

<ProgressRing IsActive="True" Height="100" Width="100" Foreground="Blue"/>
<ProgressBar Width="100" Foreground="Green"/>

Al cambiar el color de primer plano de la clase ProgressRing, cambiará el color de relleno del anillo. La propiedad Foreground de la clase ProgressBar cambiará el color de relleno de la barra. Para modificar la parte de la barra sin rellenar, simplemente, invalida la propiedad Background.

Mostrar un cursor de espera

En algunas ocasiones, resulta mejor mostrar solo un breve cursor de espera, cuando la operación o la aplicación necesite tiempo para pensar y tengas que indicar al usuario que no debe interactuar con la aplicación o el área donde el cursor de espera está visible hasta que el cursor de espera haya desaparecido.

Window.Current.CoreWindow.PointerCursor = new Windows.UI.Core.CoreCursor(Windows.UI.Core.CoreCursorType.Wait, 10);

Obtención del código de ejemplo