ASP.NET ProgressBar Control

• Download source - 6.25 Kb

Introduction

I was using the Microsoft Vote control that can be found here. It shows the percentage of votes that each choice has using a bar, just like the CodeProject article's rating.

Using it I found the problem that it wouldn't show anything in Netscape since it doesn't render the   in empty cells. My ProgressBar class handles this problem and has new capabilities

How to show a progress bar in HTML

As far as I'm concerned there's 4 ways to accomplish this:

Using HTML tables

This is actually the way Microsoft ProgressBar does the trick. To show a 40% value you create a table with 1 row and 5 columns, and the first 2 cells have the bar color, as the code below:

<table border='0' cellspacing='0' cellpadding='0' height='10px' bgColor='#B5CCFF'>
<tr>
	<td height='10px' width='5' bgColor='Blue'></td>
	<td width='5' bgColor='Blue'></td>
	<td width='5' bgColor='Blue'></td>
	<td width='5' bgColor='Blue'></td>
	<td width='5' bgColor='Blue'></td>
	<td width='5' bgColor='Blue'></td>
	<td width='5' bgColor='Blue'></td>
	<td width='5' bgColor='Blue'></td>
	<td width='5' bgColor='Blue'></td>
	<td width='5'></td>
	<td width='5'></td>
	<td width='5'></td>
	<td width='5'></td>
	<td width='5'></td>
	<td width='5'></td>
	<td width='5'></td>
	<td width='5'></td>
	<td width='5'></td>
	<td width='5'></td>
	<td width='5'></td>
</tr>
</table>

Result: (if you are using a Netscape browser you won't see a thing)

Note that there's 20 cells to draw the bar. So when can show the value in steps of 5% (100 / 20 = 5). The HTML table above isn't visible in Netscape browsers since the table cells are empty. To solve this browser specific problem you can set each cell value to   (non breaking space) or a transparent gif. The benefit of using the last one is that the bar will have the height that you want.

Using an Image

You create a 1x1 pixel image with the bar color. We set the image tag width according to the percentage. Take a look at the sample below:

<table border='0' cellpadding='0' cellSpacing='0' bgColor='Red'>
<tr>
	<td width='100'><img src='bar.gif' width='50' height='10px'></td>
</tr>
</table>

Result:

The red background color is set in the table. This approach is compatible with all browsers that I tested (IE, Netscape and Opera).

Creating an image on the fly

This is the most sophisticated solution. You create the image file on the fly according to the parameters. This is compatible with all the browsers since you will create a simple image. You can create sophisticated images with gradient bar or other graphic effects. The only problem with this solution is that you are consuming your WebServer resources to create the image every time it's needed.
Example:

A image for all possible values

You could have a image for each of the values that could be represented, e.g. bar0.gif, bar05.gif, bar10.gif and so on. This approach isn't handled by the ProgressBar class, although it's simple.

The ProgressBar class

The logic is really simple, just take a look at the sources.

Public Instance Properties

BorderColor	Inherited. Defines the border color, the default is Color.Empty
BackColor	Inherited. Defines the background color, the default is Color.Empty
ForeColor	Inherited. Defines the foreground color, the default is Color.Empty
PercentageStep	It's the percentage step. The default value is 5, so only values % 5 == 0 are allowed. This value must be divisible by 100. Should be used only if you'll render the bar as a HTML table.
FillImageUrl	It's the image that should be used in empty cells when rendering to a Netscape browser. Should be used only if you'll render the bar as a HTML table.
BarImageUrl	It's the image that should be used as the bar.
ImageGeneratorUrl	The page that will generate the image for the progress bar. The values will be send to it through the QueryString, where width is 'w', height is 'h', backColor is 'bk', borderColor is 'bc', foreColor is 'fc' and percentage is 'p'.
Percentage	The percentage value.

A faster solution

Besides having more features the ProgressBar can render less html code comparing to the Microsoft control. Take a look at comparison table below:

Solution		Rendered Html Size (in bytes)
ProgressBar class	Using Html tables	705
	Using a gif file (with border, w/o border)	264, 170 + gif file size
	Creating the image file on the fly	170 + generated image file size
Microsoft ProgressBar	Using Html table	1381

The values may vary according to the values used.

How to create images on the fly

To do it will be creating a page that has the content type an image/gif (or other image format). After generating the graphic will stream it to the browser using the Response.OutputStream stream. For more information take a look at the source code provided.