Menu Close

WP7 Tips : Adding a Progress Overlay to a Page (Part 2)


In part 1, we saw how to add a progress overlay on top of content on the screen. There may be times where you’d want to show progress but in a less intrusve way. For this, we can use a progress indicator displayed in the System Tray.

The system tray is the portion of the screen that displays phone information, like time and signal strength. An example of the SystemTray isshown below, highlighted in Green.


It’s less intrusive to show progress here, but it’s worth noting that newer users of Windows Phone 7 might not know to look here to begin with. Sometimes obvious can be better than subtle, consider this when designing your application and decide on the best choice for your application.

To add a process indication we’ll be using the Microsoft.Shell.SystemTray class which has the following properties:

  • BackgroundColor
  • ForegroundColor
  • IsVisible
  • Opacity
  • ProgressIndicator
(As a side note, that also means you can style the system tray to match the rest of your application’s theme if you wanted to. Which is a nice touch!)
To add a progress indicator to the SystenTray, we add the following xaml to the page:
        <shell:ProgressIndicator x:Name="shellProgress" IsIndeterminate="True" IsVisible="False" Text="Loading..." />

This can then be displayed in a similar way to the previous example, by setting the IsVisible property in the code behind:

shellProgress.IsVisible = true;
shellProgress.IsVisible = false;

And that’s all you need to do. When IsVisible is set to true a progress indicator will be show, as seen below:

I’ve modified the code from the previous example to use the SystemTray progress indicator, you can find this code here


Posted in Mobile Development, News

1 Comment

  1. Pingback:WP7 Tips: ­adding ­a ­progress ­overlay to ­a page » My Virtual Word

Leave a Reply

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