Click here to Skip to main content
13,044,428 members (112,134 online)
Click here to Skip to main content
Add your own
alternative version


20 bookmarked
Posted 11 Jan 2007

Gradient and Boxed ProgressBars

, 11 Jan 2007
Rate this:
Please Sign up or sign in to vote.
A base progressbar control for the implementation of gradient and blocked progress bars.

Sample Image - GradientProgressBar.jpg


One basic limitation of the ProgressBar control provided by .NET is that it can't show the percentage on top of its rendered background. Given this limitation, I decided to create my own control as an exercise. But System.Windows.Forms.ProgressBar does not allow extra drawing to be done, so the new control must be created from scratch.

So I created a basic ProgressBar which has the basic properties Minimum, Maximum, Value, and Step, and an inner function PerformsStep which advances the Value appropriatly.

Appearance properties are provided for the aspects of color, border, and the percentage text. TextColorType specifies whether the text color used is the ForeColor, or it is automatically generated based on the background color that will be behind it.

Rolling functionality is supported, but it should not be used because it uses a Timer rather than a thread. It was created for testing purposes only.

Also, based on a tip I read, a custom Dictionary of Brush and Pen is used from the MyComponents.Objects namespace in order to maintain in memory every Brush and Pen used. These Dictionarys are optional and are automatically disposed.

This base control can be used in Forms, but its drawing is primitive and resembles progress bars of Win3.1.

Rendering is done by the following functions: DrawBackgroundRolling, DrawBackground, DrawText, and DrawBorder. DrawBackgroundRolling instead of DrawBackground is called when rolling is enabled. Any custom progressbar that wants to use the functionality must override the implementation of these functions which are called from the OnPaint event in the specific order, and only if they are needed, based on the relevant properties.

Custom controls

The first custom progressbar I built was one with a gradient between the color of the progress and the background. Two properties were introduced for this ProgressBarGradient. PercentageWidth specifies how much of the control's width will be used for the gradient transition. GradientType specifies whether PercentageWidth is 100% or specified.

Here is the code for DrawBackground:

protected override void DrawBackground(Graphics g)
    if (_iPercent == 0)
        FillRectangle(g, ClientRectangle, xBrushes[BrushBackGround]);
    Rectangle[] xRecs = null;
    xRecs = Prepare3Parts();
    Rectangle xRectLeft = xRecs[0];
    Rectangle xRectMiddle = xRecs[1];
    Rectangle xRectRight = xRecs[2];
    BrushAndFill(g, xRectMiddle, _ColorProgress, BackColor);
    FillRectangle(g, xRectLeft, xBrushes[BrushProgress]);
    FillRectangle(g, xRectRight, xBrushes[BrushBackGround]);


Prepare3Parts creates the left, middle, and right rectangles needed to draw the control.

The second custom progressbar is called ProgressBarBoxed and splits the control to boxes and fills them with the appropriate color relative to the current percent. The properties introduced are:

  • NumberOfBlocks specifies the number of blocks to split the progressbar.
  • ActiveBlockColor specifies the last color of the box if the percentage is between 1 and 99.
  • InnerGridType specifies the type of grid used to separate the boxes.

Here is the implementation of DrawBackground:

protected override void DrawBackground(Graphics g)
    if (_iPercent == 0)
        FillRectangle(g, ClientRectangle, xBrushes[BrushBackGround]);
    for (int i = 0; i < _MaxBlockToDraw; i++)
        FillRectangle(g, _BlockRects[i], xBrushes[BrushProgress]);
        FillRectangle(g, _BlockRects[_MaxBlockToDraw], xBrushes[BrushActiveBlock]);


Because the appearance of this control doesn't change at every change of Value, a trick is implemented to speed up the control. The base ProgressBar provides the functionality by implementing Invalide() of the control like this:

protected bool _TurnOffInvalidation;
protected new void Invalidate()
    if (!_TurnOffInvalidation)
    _TurnOffInvalidation = false;

FormProgressBarsTest was created to test the three variations of these progress bars and is derived form MyComponents.Windows.BaseForms.PropertyGridForm which is a form I have created to provide functionality for test forms of controls I create.

Finally, in the Solution, there is project named Functions where I store every function that may be reused in my projects.


This article, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)


About the Author

Greece Greece
I live in Athens Greece and currently I am working with Business scale application with .NET latest technologies

I've been developing applications for personal and friends usage with C++ using majorly Borland's various IDEs since 1994.
In 2002 I began working for an R&D institute where I was introduced to C# which I worships ever since.

I love core application development and I would like to publish more articles here and on my blog, but there is not enough time to do so.

I usualy "waste" my spare time watching sitcoms, preferable SCI-FI.
I would like to play chess but I can't find any real world players to hang out with.

You may also be interested in...

Comments and Discussions

GeneralSorry Pin
Sarafian27-Jan-08 23:02
memberSarafian27-Jan-08 23:02 
Generalcannot load into VS2005, crashed Pin
yoke27-Jan-08 21:46
memberyoke27-Jan-08 21:46 
GeneralRe: cannot load into VS2005, crashed Pin
Sarafian27-Jan-08 23:29
memberSarafian27-Jan-08 23:29 
GeneralNice Pin
Karl Shifflett21-Dec-07 2:17
memberKarl Shifflett21-Dec-07 2:17 
GeneralRe: Nice Pin
Sarafian27-Jan-08 23:30
memberSarafian27-Jan-08 23:30 
GeneralGraphics Flicker Pin
antodona29-Mar-07 6:14
memberantodona29-Mar-07 6:14 
GeneralRe: Graphics Flicker Pin
Sarafian27-Jan-08 23:31
memberSarafian27-Jan-08 23:31 

General General    News News    Suggestion Suggestion    Question Question    Bug Bug    Answer Answer    Joke Joke    Praise Praise    Rant Rant    Admin Admin   

Use Ctrl+Left/Right to switch messages, Ctrl+Up/Down to switch threads, Ctrl+Shift+Left/Right to switch pages.

Permalink | Advertise | Privacy | Terms of Use | Mobile
Web02 | 2.8.170713.1 | Last Updated 12 Jan 2007
Article Copyright 2007 by aSarafian
Everything else Copyright © CodeProject, 1999-2017
Layout: fixed | fluid