Figure 1. Design in VS2005 (bar width = 12, space width = 3)
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
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
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
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.
Figure 2. The white space at the rightmost is too wide.
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);
int oneBlockWidth = m_ProgressBarBlockWidth +
int blockWidth = (valueWidth / oneBlockWidth) *
if (percent > 0.99m)
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)
g.FillRectangle(m_ProgressBarFillBrush, left, top, m_ProgressBarBlockWidth, height);
left += oneBlockWidth;
drawnBlockWidth += oneBlockWidth;
int tailBarWidth = this.ClientRectangle.Width - left - this.GetLeftOffSet();
if (tailBarWidth > 0 && tailBarWidth < oneBlockWidth)
drawnBlockWidth = this.ClientRectangle.Width - left - this.GetLeftOffSet();
if (drawnBlockWidth > 0)
top, drawnBlockWidth, height);
We calculate the
tailBarWidth and draw it if it is the rightmost bar, and we can see the result in Figure 3.
Figure 3. The white space at the rightmost is filled.
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.
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
ProgressBArPercent: shows or hides percent text
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!