How to use Progress Indicator in Windows Phone

By | August 31, 2013

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

System Tray WP8

System Tray WP8

I had an application which takes the user Geo-location and maps it on the map control on app load event and hence sometimes it took a huge time and user sometimes feel the app is not responsive and hence I realized the use of progress indicator in my application. Here are the steps which will hell you add a progress indicator to your application.

Step 1 – Create a new progress Indicator object and add it to system tray

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

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” as it is acquiring location of my user.

Step 2 – Create a Function which will toggle the visibility of 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 – Identify the time consuming process of your app

You need to identify the code snippets which might take some time or are 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.

e.g.

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 which 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. Lets see the output screen of above code.

Progress Indicator WP8

Progress Indicator WP8

Hope this helps you in your application. Use progress indicators to make your app more attractive. Cheers.

Leave a Reply

Your email address will not be published. Required fields are marked *