Matt Berseth

I am still playing around with the ProgressBar control I blogged about a few weeks ago.  I recently updated it to include a handful of few new features and two new skins -below is a quick run down of what has changed.  I am pretty happy with how the control works in IE and Opera, but the Continuous mode animation is a little choppy in FF - I still need to get that figured out.

Live Demo (IE6, IE7, FF, Opera) | Download

New Skins

Like I mentioned in my earlier post - I wanted to make sure I could easily apply new skins to the progress control without rewriting the thing.  And I am pretty happy with how this has turned out so far.  I had 8 total skins in the original post and I have just created 2 more.  The first one is very similar to Vista's progress bar and the one below that is fairly close to what the Safari browser uses.

Custom ToolTips

The AjaxControlToolkit's Slider control has a pretty useful tooltip feature that I incorporated into the ProgressBar control.  The Slider allows you to specify the desired tooltip using a string format and the control will automatically replace all '{0}' tokens within the tooltip with the Slider's current value. 

So I added similar functionality to my ProgressBar control and it works in exactly the same way.  The ProgressBar has a ToolTip property (it actually inherits it from the WebControl base class).  And you can set the value of this property to either a constant string - something like 'Updating ...' and you will see the string displayed as a tooltip ...

... or if you use the '{0}' token, every occurrence of it will be replaced with the ProgressBar's current value.  So if you set the ToolTip property to '{0}% - abc '{0}%' - you will see something like this ...

The demo page has a section where you can test this out.

Custom Status Text

I added a StatusText property to the ProgressBar that works in a similar fashion.  You can set it to some constant value and that is what will always be displayed, but if you include the '{0}' token the value will be substituted with the ProgressBar's value.  Again, check out the demo to test how this works.

Initial Value Animation

I also added a property that allows you to control whether the ProgressBar uses animation when setting the initial value.  When the Animate property is set to true, the progress control will run the animation that takes the value from 0 to what ever the initial value is.  When this value is false, no animation is run.

DataTable Integration

And finally I created a small sample that uses the ProgressBar control within the ItemTemplate of a ListView.  The demo for this sample allows you to choose if you want the ProgressBar to animate from 0 to the initial value or not. 

And of course you can set the value of the ProgressBar within the ListView's ItemTemplate using the usual data binding syntax.

That's it.  Enjoy!