Title: Display unique progress bars in C#

The standard ProgressBar control is easy to use, but with only a little extra effort you can create a progress bar with just about any appearance. This example displays progress bars as:

• A series of boxes
• A series of colored boxes
• A series of small boxes
• A bar of color shading from red to yellow
• A grayed image being filled in in full color

The basic approach is the same in all cases. A timer simulates progress. When its Tick event fires, the program updates the controls that represent progress. (In an actual program, you would update progress bars as the program performs actions.)

The first three progress bars all make controls visible to show progress. They each include a set of controls and display more and more controls to show progress.

The following ShowProgressWithVisible helper method shows the appropriate controls to represent progress. For example, if the progress is at 75%, then the method makes the first 75% of the controls visible.

// Show progress by displaying some hidden controls. private void ShowProgressWithVisible(float value, float max_value, Control[] controls) { // Calculate the index of the last visible control. int last_visible = (int)(controls.Length * value / max_value); // Make sure all controls up to this one are visible. for (int i = 0; i <= last_visible; i++) { if (!controls[i].Visible) controls[i].Visible = true; } }

This method calculates the number of controls that should be visible for the current level of progress. It then loops through the array of controls setting Visible = true for the controls that should be visible.

The other two progress bars are somewhat different. The color bar's timer uses the following code to fill its PictureBox with a color gradient.

// Display the next chunk of colors. using (LinearGradientBrush br = new LinearGradientBrush( new Point(0, 0), new Point(ColorsBm.Width, 0), Color.Red, Color.Yellow)) { using (Graphics gr = Graphics.FromImage(ColorsBm)) { float wid = ColorsBm.Width * ProgressColorBar / (max_progress - 1); float hgt = ColorsBm.Height; RectangleF rect = new RectangleF(0, 0, wid, hgt); gr.FillRectangle(br, rect); } } picColors.Refresh();

This code first makes a LinearGradientBrush that shades from red to yellow across the whole width of the control. It then fills a rectangle representing the progress with that brush. Only the appropriate area is filled, but the brush is the same for all progress levels so the colored area moves but the gradient doesn't.

The progress picture displays a grayed-out image. It then fills in the full-color image to show progress.

Before displaying the PictureBox, the following code fills it with the grayed-out picture.

// Display a pale picture. using (Graphics gr = Graphics.FromImage(PictureBm)) { Rectangle rect = new Rectangle(0, 0, PictureBm.Width, PictureBm.Height); using (TextureBrush br = new TextureBrush(picHidden.Image)) { gr.FillRectangle(br, rect); } using (SolidBrush br = new SolidBrush( Color.FromArgb(128, 255, 255, 255))) { gr.FillRectangle(br, rect); } } picVisible.Visible = true;

The code makes a rectangle representing the whole PictureBox and copies the full-color image into it. It then fills the rectangle with white but with alpha = 128 (opacity = 50%). That gives the picture its washed out appearance.

The following code shows how the program shows progress by filling in the full-color picture.

// Display the next chunk of picture. using (TextureBrush br = new TextureBrush(picHidden.Image)) { using (Graphics gr = Graphics.FromImage(PictureBm)) { float wid = PictureBm.Width * ProgressPicture / (max_progress - 1); float hgt = PictureBm.Height; RectangleF rect = new RectangleF(0, 0, wid, hgt); gr.FillRectangle(br, rect); } } picVisible.Refresh();

The code creates a TextureBrush from the full-color image. It makes a rectangle representing the progress and then fills it with the TextureBrush.

To make it easier to use each of these methods, the program controls each from a separate timer. You should be able to copy the code from a timer, together with the appropriate controls and some initialization code into your program to make it work. (Of course, you probably won't want the timer itself.)

Download the example to experiment with it and to see additional details.