TSmartProgressBar: A Smart C# ProgressBar with Percent Text
Customize a ProgressBar control with Label
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 colorForeColor
: percent text colorProgressBarFillColr
: bar colorProgressBarBlockWidth
: bar's widthProgressBarBlockSpace
: space width between barsProgressBarBorderStyle
: border styleProgressBarMarginOffset
: shows or hidestopOffset
andbottomOffset
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