How to Use Progress Indicator in Windows Phone 8

Progress bar is the very nice and interactive control that tells the user that the app is currently busy doing something and hence he should wait to get the response from the app, the task may be fetching data, uploading data or something else. The Progress Indicator is in the system tray. The System Tray is the top section that contains the time, network and battery indicator.



System Tray WP8

I had an application that takes the user Geo-location and maps it to the map control on an app load event and hence sometimes it took a huge amount of time and the user sometimes thought that the app is not responsive and hence I realized the use of the Progress Indicator in my application. Here are the steps that will help you to add a Progress Indicator to your application.

Step 1

The following creates a new Progress Indicator object and adds it to the system tray:

SystemTray.ProgressIndicator = new ProgressIndicator();
SystemTray.ProgressIndicator.Text = "Acquiring";

The first line creates a new Progress Indicator object and the next line sets the Progress Indicator text, it is the text shown when some progress is going on in our app, I have set it to "acquiring" since it is acquiring the location of my user.

Step 2

The following creates a function that will toggle the visibility of the Progress Indicator:

private void SetProgressIndicator(bool value)
{
    SystemTray.ProgressIndicator.IsIndeterminate = value;
    SystemTray.ProgressIndicator.IsVisible = value
}

This will set the visibility of the Progress Indicator when required and hide it when not. The first line says "IsIndeterminate" it means it will show the progress regardless of the progress value and the progress bar will keep moving (usually we use IsIndeterminate = true) , the next line sets the visibility.

Step 3

Next, identify the time consuming process of your app.

You need to identify the code snippets that might take some time or are a network dependent process and you need to set the visibility of the Progress Indicator to be true before then and when the process is completed the Progress Indicator is hidden, as in the following:

SetProgressIndicator(true);
MapLocation(myGeoposition);
SetProgressIndicator(false);

In this example I have set the visibility of the Progress Indicator to be true before implementing my MapLocation method that takes some time and hence after mapping the location the Progress Indicator's visibility is set to false. This is as simple as it seems but very helpful and makes the app more user friendly. Let's see the output screen of the code above.



Progress Indicator WP8

Hope this helps you in your application. Use Progress Indicators to make your app more attractive. Cheers.