How to Indicate Progress in Your Windows Phone Application

Introduction

Good aesthetic design mandates that applications show the
users the status of any operation via some sort of progress indicator. While Windows
Phone
7.0 did not have any built-in support for progress indication,
Windows Phone “Mango” has built-in support for progress indication. It includes
a control called ProgressIndicator, which can be used to indicate progress in
the SystemTray of your Windows Phone application.

Types of progress indicators

Applications typically need to show two different kinds of
progress – determinate and indeterminate.

A determinate progress bar is to be used when we know what the
actual progress of an operation is – like the number of bytes copied compared
to the total bytes to be copied.

An indeterminate progress bar is useful when we don’t know
what the actual progress is and we are waiting for some async event to complete
over which we have no control.

Both of these progress indicators can be shown in a Windows
Phone application by using the ProgressIndicator control bound with the SystemTray.

Hands-On

Let us create a Windows Phone application, which uses both
of these progress indicators.

Create a new Windows Phone project and call it
WPProgressIndicatorDemo.

On the MainPage.xaml, add a Button control and call it
buttonShowProgress.

Now, open MainPage.xaml.cs and add a class level object of
type ProgressIndicator. Since ProgressIndicator belongs to the Microsoft.Phone.Shell
namespace, you will need to add the following statements.

using Microsoft.Phone.Shell;

public partial class MainPage : PhoneApplicationPage
    {
        ProgressIndicator prog;
        // Constructor
        public MainPage()
        {

            InitializeComponent();
        }

Now add a method for the Click event on the
buttonShowProgress.

private void buttonShowProgress_Click(object sender, RoutedEventArgs e)
        {
            prog = new ProgressIndicator();
            prog.IsVisible = true;
            prog.IsIndeterminate = false;
            prog.Value = 0;
            SystemTray.SetProgressIndicator(this, prog);
            for (long i = 0; i < 100; i++)
            {
                prog.Value = i/100.0;
                Thread.Sleep(50);
 
            }
        }

Here, this method will show a case of determinate progress
(which covers the case of when we know the exact progress of an operation).

Here, we set the “Value” property of the ProgressIndicator
object and bind the progress indicator object to the System Tray. This ensures
that the System Tray will render the progress as indicated by the progress
indicator control.

Now, add another method to show indeterminate progress.

private void ShowInDeterminateProgress()
        {
            SystemTray.SetIsVisible(this, true);
 
            prog = new ProgressIndicator();
            prog.IsVisible = true;
            prog.IsIndeterminate = true;
 
            SystemTray.SetProgressIndicator(this, prog);
        }

Here, we set the “Indeterminate” property to true.

Finally, call the ShowInDeterminateProgress method inside
the constructor of MainPage class.

public MainPage()
        {
            InitializeComponent();
 
            ShowInDeterminateProgress();
        }

Now, we are ready to run this application. Compile and start
the application.

When the application starts for the first time, we see that
the systemtray, which is the topmost area of the phone screen, shows an
indeterminate progress bar.

Indeterminate progress bar
Figure 1: Indeterminate progress bar

As you can see, the red dots indicate progress as they
traverse from the left side to the right side of the screen.

 

Now to check the determinate progress bar, click on the
Button titled “Show Progress”.

When we click that button, a red bar starts from the top
left portion of the screen and moves to the right. This is a solid line which
indicates that it is a determinate progress bar.

Determinate progress bar
Figure 2: Determinate progress bar

Summary

In this article we learned how to show progress in your
Windows Phone application. If you are having a problem following along, you can
download the sample code below.

More by Author

Get the Free Newsletter!

Subscribe to Developer Insider for top news, trends & analysis

Must Read