web-dev-qa-db-fra.com

Comment affichez-vous l'animation de chargement pour les applications du magasin universel Windows Phone 8.1?

Lorsque vous effectuez une fonction asynchrone pour obtenir des données locales, accéder à un fichier ou appeler une API, comment déclenchez-vous l'animation de chargement pendant cette, éventuellement longue routine?

Voici un exemple:

<Button onClick="Button_Click" />

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

Puisqu'il s'agit d'une application de magasin universel, je suppose qu'elle devrait fonctionner de la même façon dans Windows 8.1 et Windows Phone 8.1.

MISE À JOUR DE LA SOLUTION

Par réponse igrali, j'ai mis à jour mon code pour référence future:

<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;
}

Ce code fonctionnera à la fois sur le téléphone et la tablette.

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

Il existe une façon assez standardisée de le faire sur Windows Phone. Puisqu'il s'agit d'une application universelle, le meilleur choix est probablement d'afficher un anneau de progression.

Vous l'ajoutez en XAML

<ProgressRing IsActive="True"/>

Vous pouvez l'afficher explicitement dans le code derrière lorsque vous cliquez sur le bouton, ou utiliser une propriété bool dans un viewmodel (si vous utilisez MVVM) et un ValueConverter pour l'afficher ou le masquer en changeant simplement une propriété de vrai à faux et vice versa.

Je suggère également de lire la documentation officielle sur les contrôles de progression et je terminerai cette réponse par un conseil de la documentation ProgressRing qui peut être trouvé ici

Définissez la propriété IsActive pour activer ou désactiver ProgressRing. Si IsActive est faux, le ProgressRing n'est pas affiché, mais un espace lui est réservé dans la présentation de l'interface utilisateur. Pour ne pas réserver d'espace pour ProgressRing, définissez sa propriété Visibility sur Collapsed.

Conseil Lorsque la ProgressRing est active, l'animation de progression se poursuit même si elle n'est pas visible à l'écran, par exemple lorsque sa visibilité est réduite. Cela peut garder le thread d'interface utilisateur éveillé, utiliser des ressources et nuire aux performances de l'application. Lorsque ProgressRing n'est pas visible, vous devez désactiver l'animation en définissant IsActive sur false.

26
Igor Ralic