How do you show the loading animation for windows phone 8.1 universal store apps?

Question

When performing an async function to either get local data, access a file, or call an API, how do you trigger the loading animation during this, possibly, long routine?

Here's an example:

<Button onClick="Button_Click" />

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

Since it's a universal store app, I assume it should work the same in both windows 8.1 and windows phone 8.1.

UPDATE FROM SOLUTION

Per igrali answer, I updated my code for future reference:

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

This code will work on both the Phone and Tablet.

Igor Ralic Igor Ralic · Accepted Answer · 2014-05-25T16:03:04

There's a pretty standardized way of doing this on Windows Phone. Since it's a Universal app, probably the best choice is to show a progress ring.

You add it in XAML

<ProgressRing IsActive="True"/>

You can show it either explicitly in code behind when button is clicked, or use a bool property in a viewmodel (if you use MVVM) and a ValueConverter to show it or hide it by simply changing one property from true to false and vice versa.

I also suggest reading the official documentation about progress controls and I'll end this answer with a tip from ProgressRing documentation that can be found here

Set the IsActive property to turn the ProgressRing on or off. If IsActive is false, the ProgressRing is not shown, but space is reserved for it in the UI layout. To not reserve space for the ProgressRing, set it's Visibility property to Collapsed.

Tip When the ProgressRing is active, the progress animation continues even if its not visible on the screen, such as when it's Visibility is Collapsed. This can keep the UI thread awake, use resources, and impair app performance. When the ProgressRing is not visible, you should disable the animation by setting IsActive to false.

How do you show the loading animation for windows phone 8.1 universal store apps?

1 Answers