c# - ¿Cómo se muestra la animación de carga para las aplicaciones de la tienda universal de Windows Phone 8.1?

windows-8.1 windows-phone-8.1

Question

Al realizar una función asíncrona para obtener datos locales, acceder a un archivo o llamar a una API, ¿cómo se activa la carga de la animación durante esta, posiblemente, larga rutina?

Aquí hay un ejemplo:

<Button onClick="Button_Click" />

public async void Button_Click(object sender, RoutedEventArgs e)
{
    var myData = await MyDataManager.GetMyData();
    await new MessageDiaglog("Data Loaded!").ShowAsync();
}

Ya que es una aplicación de tienda universal, asumo que debería funcionar igual tanto en Windows 8.1 como en Windows Phone 8.1.

ACTUALIZACIÓN DE LA SOLUCIÓN

Por respuesta igrali, actualicé mi código para futuras referencias:

<ProgressBar x:Name="LoadingBar" Visibility="Collapsed" IsEnabled="False" IsIndeterminate="true" Height="4" HorizontalAlignment="Stretch"/>
<Button onClick="Button_Click" />

public async void Button_Click(object sender, RoutedEventArgs e)
{
    LoadingBar.IsEnabled = true;
    LoadingBar.Visibility = Visibility.Visible;
    var myData = await MyDataManager.GetMyData();
    await new MessageDiaglog("Data Loaded!").ShowAsync();
    LoadingBar.IsEnabled = false;
    LoadingBar.Visibility = Visibility.Collapsed;
}

Este código funcionará tanto en el teléfono como en la tableta.

Answer 1

Hay una forma bastante estandarizada de hacer esto en Windows Phone. Ya que es una aplicación universal, probablemente la mejor opción es mostrar un anillo de progreso.

Lo agregas en XAML

<ProgressRing IsActive="True"/>

Puede mostrarlo explícitamente en el código detrás de cuando se hace clic en el botón, o usar una propiedad bool en un modelo de vista (si usa MVVM) y un ValueConverter para mostrarlo u ocultarlo simplemente cambiando una propiedad de verdadero a falso y viceversa.

También sugiero leer la documentación oficial sobre los controles de progreso y terminaré esta respuesta con un consejo de la documentación de ProgressRing que se puede encontrar aquí.

Establezca la propiedad IsActive para activar o desactivar el ProgressRing. Si IsActive es falso, el ProgressRing no se muestra, pero el espacio está reservado para él en el diseño de la interfaz de usuario. Para no reservar espacio para el ProgressRing, establezca su propiedad Visibilidad en Contraído.

Sugerencia Cuando el ProgressRing está activo, la animación del progreso continúa incluso si no está visible en la pantalla, por ejemplo, cuando la visibilidad está contraída. Esto puede mantener el hilo de la interfaz de usuario activo, utilizar recursos y perjudicar el rendimiento de la aplicación. Cuando el ProgressRing no está visible, debe desactivar la animación configurando IsActive en falso.