TSmartProgressBar: A Smart C# ProgressBar with Percent Text

• Download source - 65.1 KB

Introduction

TSmartProgressBar is an open source progressbar control in C# applications, and it has the functions below:

• shows percent text and its color when progress go
• customizes backcolor and progress bar's color
• customizes bar width and space width between bars
• sets borderstyle
• shows or hides the bar topoffset and bottomoffset

Background

We all feel the .NET ProgressBar control lacks smartness, we cannot show percent, cannot change the backcolor or progress bar color, and so on. Usually, we override the OnPaint of one control if we want to set backcolor, but it fails because the .NET ProgressBar control does not allow OnPaint event to be overridden (Note: It is not correct, please see the discussion messages at the bottom of the page).

Furthermore, if we customize a control from UserControl or Control, we must consider the famous and troublesome problem of background flicker when progress goes fast, which has been solved at How to create a smooth progress bar in Visual C#. However, we cannot show percent text according to the methods in this article since the rectangle of percent text flickers still! Why?

• It does not flicker when percent is smaller than 50%, because the invalidated region positions left to percent text whose background color is the same as that of the control.
• It will flicker when progress goes fast and percent is over 50%, since we must invalidate two rectangles and repaint their background color: one is the rectangle of bar, the other is that of percent text.

When I try to design one control from Label, I find that I can use the Text property to show percent, and its background does not flicker anyway.So, I customize TSmartProgressBar from Label, and successfully solve the two main problems: one is background flicker, the other is showing percent text. Furthermore, I find that it is simpler than that described in the article before: I need not consider the problem of text alignment and drawing, I need not calculate the invalid update rectangle for method Invalidate() too.

Key Point

We can set the bar width or space width between bars in TSmartProgressBar, if we do not handle the tail part at the rightmost, it will be too wide as shown in Figure 2.

So, we must calculate the width of tail partial bar, and draw it. The method for drawing task is DrawProgressBar whose code is listed below:

private void DrawProgressBar(Graphics g)
{
   decimal percent = (decimal)m_Value / (decimal)m_Maximum;
 
   int valueWidth = (int)((this.ClientRectangle.Width - 
	this.GetLeftOffSet() * 2) * percent);	// width corresponds to Value
   int oneBlockWidth = m_ProgressBarBlockWidth + 
	m_ProgressBarBlockSpace;  		// bar width + space width
   int blockWidth = (valueWidth / oneBlockWidth) * 
	(oneBlockWidth);  			// width corresponds to real blocks

   if (percent > 0.99m)  			// add block length to avoid trunc error
   {
       if (this.ClientRectangle.Width - this.GetLeftOffSet() * 2 - blockWidth > 0)
       {
          blockWidth += (this.ClientRectangle.Width - 
		this.GetLeftOffSet() * 2 - blockWidth) / (oneBlockWidth);
       }
   }

   int left = this.ClientRectangle.Left + this.GetLeftOffSet();
   int top = this.ClientRectangle.Top + this.GetTopOffSet();
   int height = this.ClientRectangle.Height - this.GetTopOffSet() * 2;

   int drawnBlockWidth = oneBlockWidth;
   while (drawnBlockWidth <= blockWidth)  	// draw progress bars
   {
      g.FillRectangle(m_ProgressBarFillBrush, left, top, m_ProgressBarBlockWidth, height);
      left += oneBlockWidth;
      drawnBlockWidth += oneBlockWidth;
   }

   // below code used to draw the tail part.
           
   int tailBarWidth = this.ClientRectangle.Width - left - this.GetLeftOffSet();
   if (tailBarWidth > 0 && tailBarWidth < oneBlockWidth)  // tail is not a full bar
   {
      drawnBlockWidth = this.ClientRectangle.Width - left - this.GetLeftOffSet();
      if (drawnBlockWidth > 0)
      {
         g.FillRectangle(m_ProgressBarFillBrush, left, 
		top, drawnBlockWidth, height);	// draw partial bar
      }
   }
} 

We calculate the tailBarWidth and draw it if it is the rightmost bar, and we can see the result in Figure 3.

Using the Code

After unzipping the TSmartProgressBar.zip, we can click doubly the solution fileTestTSmartProgressBar.sln to view the test project if we have Visual Studio 2005/2008, or we can run file TestTSmartProgressBar.exe in folder \bin\debug\ to test the control.

The TSmartProgressBar has the properties given below:

• BackColor: control background color
• ForeColor: percent text color
• ProgressBarFillColr: bar color
• ProgressBarBlockWidth: bar's width
• ProgressBarBlockSpace: space width between bars
• ProgressBarBorderStyle: border style
• ProgressBarMarginOffset: shows or hides topOffset and bottomOffset
• ProgressBArPercent: shows or hides percent text

Obviously, TSmartProgressBar can be extended. For example, show elapsed time, draw 2D bar as .NET ProgressBar does, display percent text at right hand, and so on.

We can download the TSmartProgressBar demo at the Chinese web page http://download.csdn.net/source/612515 too, which I uploaded before (only demo and no source code).

Points of Interest

There is always a short way if we find the correct method!

History

• Release 9/18/2008