Tips for ProgressBar Performance in WP7

It turns out that there are some performance gotcha’s surrounding the use of a ProgressBar control in “indeterminate” mode in the WP7 SDK.   Indeterminate mode is the infinite mode where the progress bar is animated with 5 dots flying across the screen indicating that the app will be busy for an indeterminate amound of time. 

Here are two tips (from the mouth of Jeff Wilcox) which you should be aware of if you use this control in the “indeterminate” mode:

1.  Don’t Use the Default PerformanceBar Style

There is an unfortunate performance issue with the default way the PerformanceBar is constructed in the WP7 SDK.   To achieve the effect of the dots flying across the screen the standard control actually uses 5 slider controls (where the thumb of the slider is actually styled to be the dots).  Not too surprisingly this turns out not to be a very efficient means of achieving the animation, since the sliders designed to be slider controls not animation mechanisms.  The net result is that using slider control for the animation generates a lot of work for the UI thread, when in actual fact we want to off load tasks such as animation to the Compositor thread where ever possible and leave the UI thread for things like layout passes and our application logic.

The good news is that Jeff Wilcox has posted a new alternative way to animate the indeterminate progress bar using another, more Compositor thread friendly method – the RelativeAnimatingContentControl.  He also provides a style which can be applied to any existing ProgressBar to make it use the RelativeAnimatingContentControl rather than the sliders.

Using Jeff’s new PerformanceProgressBar is fairly simple:

  1. Download and add the RelativeAnimatingContentControl.cs to your project.
  2. Define a new ProgressBar style (in your app.xaml or generic.xaml) called PerformanceProgressBarStyle you can download the XAML for this style from: PerformanceProgressBarStyle.txt.  Don’t forget to add the xml unsupported namespace to which ever XAML file you add the style to:
    xmlns:unsupported="clr-namespace:Microsoft.Phone.Controls.Unsupported"
  3. Apply the PerformanceProgressBarStyle style to all your ProgressBars (unfortunately you have to remember to do this on all ProgressBars – there is no way to do this globally, like there is in WPF)
    <ProgressBar IsIndeterminate="True" Style="{StaticResource PerformanceProgressBar}"/>

2. Make Sure You Turn Off the Perpetual Animation when the ProgressBar is Not Visible

If you are using an indeterminate progress bar you will likely be tempted to do this

<ProgressBar IsIndeterminate="True" Visibility="{Binding IsBusy}"/>
 
That is: hard code IsIndeterminate to true and then just control whether or not the ProgressBar is visible or not. 
 
Unfortunately this will impact performance of the phone (and more importantly battery  life).  The reason is that as long as the IsIndeterminate property is true the application will continue animating the dots – even if the ProgressBar is not visible!  So never hard code the ProgressBar’s IsIndeterminate property always bind to it to the visibility of the ProgressBar so that if the ProgressBar is not visible the animation stops. 

 

The easiest way to do this is to bind the IsIndeterminate and Visibility properties to the same underlying value.

 

<ProgressBar IsIndeterminate="{Binding IsBusy}"Visibility = "{Binding IsBusy, Converter={StaticResource VisibilityConverter}}"/>

 

In this case we are binding both to a boolean IsBusy property on the View Model. We use a VisibilityConverter class to convert the boolean value to a valid visibility option.
Advertisements

5 thoughts on “Tips for ProgressBar Performance in WP7

  1. Pingback: Tips for ProgressBar Performance in WP7 (via C Is For Coder) | Light Side of the .Net Force

  2. Pingback: ProgressBar and PerformanceProgressBar performance issues with IsIndeterminate = true | Xyzzer's Dev Blog

  3. Pingback: ProgressBar Wp7 | Nubochi project

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s