System Tray Progress Indicator

  • Article

In my last post, I teased that system tray in Mango is now customizable and data binding friendly Winking smile 
On top of that, the SystemTray now has a ProgressIndicator   that you can use to replace your PerformantProgressBar and display progress on async operations.  

Here is everything you need to know (or everything I know) about ProgressIndicator. ProgressIndicator

It is a DependencyObject so  you can data bind to it.. 
You can use these properties to customize and manage the indicator:

  • IsVisible (type boolean) to show/hide it.  This is separate from SystemTray.IsVisible. The SystemTray must be visible for the progress indicator to be visible too.
  • IsIndeterminate (type boolean) property. When this property is set, you will see the infamous ‘dancing dots’ that we show for indeterminate progress every where on the phone.
  • Value property (type double) that you can use to show value (normalized 0 to 1) when your indicator is not indeterminate.
    It also
  • Text property is used to display a message in the progress indicator.

A few small quirks and tips :

  • The Text has a margin that you can’t control.  Not a huge deal, I assume consistent with OS.
  • The progress indicator’s text does pickup the Foreground color you are using for the SystemTray, but the indeterminate dancing dots (or the progress bar) do not pickup the color though. They are using PhoneAccentBrush.
  • I found out that I could not access (programmatically) the SystemTray.ProgressIndicator property until page is loaded. I got an InvalidOperationException saying “To get SystemTray ProgressIndicator the RootVisual must be a PhoneApplicationFrame and its Content must be a PhoneApplicationPage”. Not a huge deal, you can listen to loaded and check if you have initialized it before (since Loaded can fire multiple times in a page instance).
  • Use BindingOperations.SetBinding ()  to bind to DependencyObjects (where you normally use FrameworkElement.SetBinding).

The screenshot to the right  shows you all of SystemTray’s properties in action.   It has a white foreground and green background with 60% opacity, indeterminate progress indicator and (obviously) custom text in the indicator.
You can turn everything on and off to see the impact as you tweak each property.
It is all data bound; there is no manual setting of any properties.  I am running on light theme with orange highlight.

You can get the source  from my skydrive.

Happy Windows Phone “Mango” coding.