¿Cómo se muestra la animación de carga para windows phone 8.1 aplicaciones de la tienda universal?

Question

¿Cómo se muestra la animación de carga para windows phone 8.1 aplicaciones de la tienda universal?

Cuando se realiza una función asincrónica para obtener datos locales, acceder a un archivo o llamar a una API, ¿cómo se activa la animación de carga 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();
}

Dado que es una aplicación de la tienda universal, supongo que debería funcionar igual en Windows 8.1 y Windows phone 8.1.

ACTUALIZACIÓN DESDE LA SOLUCIÓN

Por igrali respuesta, he actualizado mi código para referencia futura:

<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 y Tablet.

25

c#win-universal-app windows-8.1 windows-phone-8.1

Author: msimons, 2014-05-25

Source

1 answers

score 26 · Accepted Answer

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

Se añade en XAML

<ProgressRing IsActive="True"/>

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

También sugiero leer el documento oficial documentación sobre 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 es reservado para él en el diseño de la interfaz de usuario. No reservar espacio para el ProgressRing, establece su propiedad de visibilidad en Colapsado.

Propina Cuando el ProgressRing está activo, el progreso la animación continúa incluso si no es visible en la pantalla, como cuando es visibilidad es Derrumbar. Esto puede mantener el subproceso de IU despierto, usar recursos y deteriorar el rendimiento de la aplicación. Cuando el ProgressRing no es visible, debe desactivar la animación configurando isActive a false.