Here’s a progress bar for showing loading operations that lets the animation smoothly finish before disappearing. It’s a lot more like that in the Windows Phone itself, and easy to use: just data bind to the IsLoading property (a new property; the standard IsIndeterminate still will immediately start or stop the animation, so don’t try that!).

This control is easier to use than my original PerformanceProgressBar implementation, since you just drop it onto a page, no need to set the style or add the style to the app.

As I’ve become the phone progress bar guy with the introduction of PerformanceProgressBar, I’ve actually received a number of specific requests from people to make it easier to use. I also receive questions like “why isn’t this in the toolkit” and “when will it be fixed in the platform.” I don’t have answers to those things quite yet, but what I do have is an easier version that fulfills some very specific requests.

I haven’t decided yet if this is my recommended progress bar or not, so don’t quote me on saying this is perfect…

The source is up on GitHub at https://github.com/jeffwilcox/wpessentials/tree/master/samples/progressbar/
Download a ZIP of the sample app current as of 11/15/2010 here (24 KB)

What this sample addresses

“Let the animation complete please!”

The scenario was a request by a customer to me via e-mail. Since the indeterminate storyboard has the repeat behavior of “Forever”, the Completed event never fires, which makes it difficult to allow the dots to animate completely across the screen at the end of a loading/indeterminate operation. I had to do some work to get around this limitation.

Let me just drop a control on the page to make the performance version easier to use

By creating a derived control, developers will find it easier to use by just dropping on a page, since the default style can contain all the nifty PerformanceProgressBar optimizations.

Optimize for just the loading/indeterminate state

Most people needing these performance fixes are just using the IsIndeterminate mode. This control addresses this by just having a simple property for true/false, removing the need to also consider collapsing the regularly templated control.

Using the actual PerformanceProgressBar control

If you open up the project, you’ll see the files you need: a few that implement the control, plus the Generic.xaml with the default styles. To then use it on a page:

Register the XMLNS

In the sample project, since the control is in the project, I just use a local reference. If you place it in a class library, include the right assembly name, too.

xmlns:localControls="clr-namespace:Microsoft.Phone.Controls" 

Data bind or set using the IsLoading property and NOT IsIndeterminate

<localControls:PerformanceProgressBar 
    VerticalAlignment="Top"
    IsLoading="{Binding IsLoading}" />

This is a little hacky, since I would prefer to either re-use or adapt the standard progress bar, but it was the quickly way to enable this. The IsIndeterminate property can still be set, and this will immediately turn on/off the behavior, so beware!

No need to data bind the Visibility property any longer

Just a note. Previously this was required to keep the standard progress bar from showing a slightly transparent background with the phone’s accent color, but my template for this indeterminate-only control takes care of the collapsing automatically.

Small implementation note for performance geeks

Although this control builds on the performance progress bar work I’ve done, to enable this to work, I’ve had to remove the repeat behavior of “Forever” on the animation and instead have the animation restart in code. That call happens on the UI thread, so in an extremely long and blocking operation, the restart of the animation may be delayed. Be assured that the actual animation of the dots across the screen will all still happen by the independent animations processor on the compositor thread, so no worries there, it’ll still be visually smooth. But it’s a small caveat.

GitHub!

I’m experimenting with using GitHub to store this kind of sample app and code in the future, as it’ll be a good place to keep track of bug fixes and changes and allow others to contribute. Thanks to Chris Gansen for pointing me in the right direction.

My GitHub repository for phone development is at https://github.com/jeffwilcox/wpessentials/ and I hope to start building that out some.

I eventually will add a proper controls project as a standalone class library, easy for anyone to use. Until then, I’ll just place sample apps up there. Let me know what you think about this!