CodeProject: Color ProgressBar. Free source code and programming help

Announcements

	Windows 7 Comp Win a laptop!
	Monthly Competition

Articles

Desktop Development

Web Development

Enterprise Systems

Content Management Server

Microsoft BizTalk Server

SQL Reporting Services

Platforms, Frameworks & Libraries

Windows Communication Foundation

Windows Presentation Foundation

Windows Workflow Foundation

Cryptography & Security

Threads, Processes & IPC

WinHelp / HTMLHelp

Uncategorised Quick Answers

Graphics / Design

Expression

Usability

Development Lifecycle

Debug Tips

Design and Architecture

Uncategorised Technical Blogs

Services

Code-signing Certificates

Job Board

CodeProject VS2008 Addin

Feature Zones

Product Showcase

Code Signing Resources

WhitePapers / Webcasts

ASP.NET Web Hosting

Advanced Search
Add to IE Search

Discuss

Report

31 votes for this article.

Popularity: 6.12 Rating: 4.10 out of 5

Introduction

This is a fairly simple Progress Bar control inherited from Windows.Forms.Control. The reason I reinvented this "wheel" is I don't like the looks of traditional ProgressBar provided in VS.NET. My ColorProgressBar looks more attractive and fancier, yet keeps the functionalities of old ProgressBar. I hope I will get some genuine comments or suggestion from you.

Complete source code can be downloaded from the link above.

Control Properties

BarColor
The primary color of ColorProgressBar.
BorderColor
The border color of ColorProgressBar.
FillStyle
Bar styles, "Solid" or "Dashed".
Maximum
The maximum value of ColorProgressBar.
Minimum
The minimum value or the initial value of ColorProgressBar.
Value
The current value of ColorProgressBar.
Step
The value of each increment or decrement when you call methods PerformStep() and PerformStepBack().

Control Methods

PerformStep()
Call the PerformStep() method to increase the value set in the Step property.
PerformStepBack()
Call the PerformStepBack() method to decrease the value set in the Step property.
Increment(int value)
Call the Increment() method to increase the integer value you specify.
Decrement(int value)
Call the Decrement() method to decrease the integer value you specify.

Example

- See snapshot above

A timer is used to fake progress.

//

// Control declarations

//

this.cpb1 = new ColorProgressBar.ColorProgressBar();
this.cpb2 = new ColorProgressBar.ColorProgressBar();
this.cpb3 = new ColorProgressBar.ColorProgressBar();
this.cpb4 = new ColorProgressBar.ColorProgressBar();
this.cpb5 = new ColorProgressBar.ColorProgressBar();
this.cpb6 = new ColorProgressBar.ColorProgressBar();
this.timer1 = new System.Windows.Forms.Timer(this.components);


// 

// cpb1

// 

this.cpb1.BarColor = System.Drawing.Color.FromArgb(((System.Byte)(255)), 
                     ((System.Byte)(128)), ((System.Byte)(128)));
this.cpb1.BorderColor = System.Drawing.Color.Black;
this.cpb1.FillStyle = ColorProgressBar.ColorProgressBar.FillStyles.Dashed;
this.cpb1.Location = new System.Drawing.Point(56, 48);
this.cpb1.Maximum = 100;
this.cpb1.Minimum = 0;
this.cpb1.Name = "cpb1";
this.cpb1.Size = new System.Drawing.Size(150, 15);
this.cpb1.Step = 10;
this.cpb1.TabIndex = 0;
this.cpb1.Value = 0;
// 

// cpb2

// 

this.cpb2.BarColor = System.Drawing.Color.FromArgb(((System.Byte)(255)), 
                     ((System.Byte)(255)), ((System.Byte)(128)));
this.cpb2.BorderColor = System.Drawing.Color.Black;
this.cpb2.FillStyle = ColorProgressBar.ColorProgressBar.FillStyles.Solid;
this.cpb2.Location = new System.Drawing.Point(56, 72);
this.cpb2.Maximum = 100;
this.cpb2.Minimum = 0;
this.cpb2.Name = "cpb2";
this.cpb2.Size = new System.Drawing.Size(150, 15);
this.cpb2.Step = 10;
this.cpb2.TabIndex = 1;
this.cpb2.Value = 100;
// 

// cpb3

// 

this.cpb3.BarColor = System.Drawing.Color.FromArgb(((System.Byte)(128)), 
                     ((System.Byte)(255)), ((System.Byte)(128)));
this.cpb3.BorderColor = System.Drawing.Color.Black;
this.cpb3.FillStyle = ColorProgressBar.ColorProgressBar.FillStyles.Dashed;
this.cpb3.Location = new System.Drawing.Point(56, 104);
this.cpb3.Maximum = 100;
this.cpb3.Minimum = 0;
this.cpb3.Name = "cpb3";
this.cpb3.Size = new System.Drawing.Size(192, 24);
this.cpb3.Step = 10;
this.cpb3.TabIndex = 2;
this.cpb3.Value = 0;
// 

// cpb4

// 

this.cpb4.BarColor = System.Drawing.Color.FromArgb(((System.Byte)(128)), 
                     ((System.Byte)(255)), ((System.Byte)(255)));
this.cpb4.BorderColor = System.Drawing.Color.Black;
this.cpb4.FillStyle = ColorProgressBar.ColorProgressBar.FillStyles.Solid;
this.cpb4.Location = new System.Drawing.Point(56, 144);
this.cpb4.Maximum = 100;
this.cpb4.Minimum = 0;
this.cpb4.Name = "cpb4";
this.cpb4.Size = new System.Drawing.Size(192, 24);
this.cpb4.Step = 10;
this.cpb4.TabIndex = 3;
this.cpb4.Value = 100;
// 

// cpb5

// 

this.cpb5.BarColor = System.Drawing.Color.FromArgb(((System.Byte)(255)), 
                     ((System.Byte)(128)), ((System.Byte)(255)));
this.cpb5.BorderColor = System.Drawing.Color.Black;
this.cpb5.FillStyle = ColorProgressBar.ColorProgressBar.FillStyles.Solid;
this.cpb5.Location = new System.Drawing.Point(56, 184);
this.cpb5.Maximum = 100;
this.cpb5.Minimum = 0;
this.cpb5.Name = "cpb5";
this.cpb5.Size = new System.Drawing.Size(272, 32);
this.cpb5.Step = 10;
this.cpb5.TabIndex = 4;
this.cpb5.Value = 0;
// 

// cpb6

// 

this.cpb6.BarColor = System.Drawing.Color.FromArgb(((System.Byte)(255)), 
                     ((System.Byte)(128)), ((System.Byte)(0)));
this.cpb6.BorderColor = System.Drawing.Color.Black;
this.cpb6.FillStyle = ColorProgressBar.ColorProgressBar.FillStyles.Dashed;
this.cpb6.Location = new System.Drawing.Point(56, 232);
this.cpb6.Maximum = 100;
this.cpb6.Minimum = 0;
this.cpb6.Name = "cpb6";
this.cpb6.Size = new System.Drawing.Size(272, 32);
this.cpb6.Step = 10;
this.cpb6.TabIndex = 5;
this.cpb6.Value = 100;
// 

// timer1

// 

this.timer1.Enabled = true;
this.timer1.Tick += new System.EventHandler(this.timer1_Tick);

//

// Actual manipulation by timer1

//

private void timer1_Tick(object sender, System.EventArgs e)
{
    //

    // All values are reset at the end to have endless loop

    //

    cpb1.PerformStep();
    if (cpb1.Value == cpb1.Maximum)
        cpb1.Value = cpb1.Minimum;

    cpb2.PerformStepBack();
    if (cpb2.Value == cpb2.Minimum)
        cpb2.Value = cpb2.Maximum;

    cpb3.Increment(1);
    if (cpb3.Value == cpb3.Maximum)
        cpb3.Value = cpb3.Minimum;

    cpb4.Decrement(1);
    if (cpb4.Value == cpb4.Minimum)
        cpb4.Value = cpb4.Maximum;

    cpb5.Increment(1);
    if (cpb5.Value == cpb5.Maximum)
        cpb5.Value = cpb5.Minimum;

    cpb6.Decrement(1);
    if (cpb6.Value == cpb6.Minimum)
        cpb6.Value = cpb6.Maximum;
}

Missing Features

Percentage indicator.

Contributions

Many thanks to the CodeProject member mav.northwind on helping me rewrite the onPaint() method, see his post here.

Using the Control

Adding ColorProgressBar control to Windows Form Toolbox

Right-click the Windows Form Toolbox and choose Customize Toolbox... from the shortcut menu. The Customize Toolbox dialog box opens.
Choose the .NET Framework Components tab and click Browse. Browse to the ColorProgressBar\bin\Release or \debug folder and select ColorProgressBar.dll. ColorProgressBar appears in the list of components in the Customize Toolbox dialog box.
Check the box next to ColorProgressBar and Select OK. The ColorProgressBar is now added to the tab of the Windows ToolBox.

My Other Control Project

Custom Button with Color and Shape

Feedbacks

Please vote for this article.

And email me or leave your messages if you have:

bug reports
code improvements
any comments or suggestions.

License

This article has no explicit license attached to it but may contain usage terms in the article text or the download files themselves. If in doubt please contact the author via the discussion board below.

A list of licenses authors might use can be found here

About the Author

Alan Zhao

Member

Hi, my name is Alan Zhao. I live in Glens Falls, NY. Say hi to me if you see me one day.

also visit me at www.LinkGone.com - Make your long URLs easy to read, remember and reuse.

Occupation:	Web Developer
Company:	www.LightspeedSigns.com
Location:	United States

Other popular C / C++ Language articles:

Member Function Pointers and the Fastest Possible C++ Delegates
A comprehensive tutorial on member function pointers, and an implementation of delegates that generates only two ASM opcodes!
How a C++ compiler implements exception handling
An indepth discussion of how VC++ implements exception handling. Source code includes exception handling library for VC++.
A Beginner's Guide to Pointers
An article showing the use of pointers in C and C++
XML class for processing and building simple XML documents
Link CMarkup into your VC++ app and avoid complex XML tools and dependencies
PugXML - A Small, Pugnacious XML Parser
Discussion of techniques for fast, robust, light-weight XML parsing.

Article Top

You must Sign In to use this message board.

FAQ
Noise Tolerance Layout Per page

Msgs 1 to 25 of 29 (Total in Forum: 29) (Refresh)

FirstPrevNext

requesting agreement

giova

16hrs 28mins ago

Hello.

I would like to make an free control mainly based on your project.
I will just add few more features to your class.
if you are ok with it, here the class's header i've pre-wrote; hopping you will be ok with it:

/// <summary>
    /// ProgressBarStyled is the merging between 3 great technics/open source projects :
    /// 
    /// ProgressBar Filling Style : ColorProgressbar
    /// ProgresBar Custome Shaping : Progressbar Advanced
    /// Text Overlay : jacobjordan's article
    /// 
    /// Here detail of thoses technics/projects : 
    /// 
    /// ColorProgressbar : witch is the root if this class (well 90% of this class comes from ColorProgressBar)
    /// ColorProgressbar autor is : Alan Zhao (http://www.codeproject.com/Members/Alan-Zhao)
    /// ColorProgressbar Projet URL : http://www.codeproject.com/KB/cpp/colorprogressbar.aspx
    /// 
    /// Progressbar advanced autor is : Gil.Schmidt (http://www.codeproject.com/script/Membership/View.aspx?mid=1283625)
    /// Progressbar advanced url is : http://www.codeproject.com/KB/cpp/AdvancedProgressBar.aspx
    /// 
    /// Last reference is "Add the percent into a progress bar" article from jacobjordan (http://www.dreamincode.net/forums/index.php?showuser=90926)
    /// article url is : http://www.dreamincode.net/forums/showtopic62979.htm
    /// 
    /// Regarding Licence, see "ColorProgressbar" & "Progressbar advanced" licences ; please consider myself as a LEGO man, i've just merged what was good from all of this.
    /// 
    /// GiovaFR (http://www.gio-va.com)

Best Regards.

Re: requesting agreement

giova

10hrs 56mins ago

Well my job is allmost over; just few improvement to add, also the Shape property to implement.

here the current result

On this picture, you see :

1st progressbar : simply with default properties values.

2nd progressbar : with properties set so the progressbar appareance is close of the .NET progressbar

3rd progressbar : with DisplayPercent property set to false, and using ValueChanged event to customize displayed text; also i've set Font to bold, and ForeColor to white.

4th & 5th progressbars : with TextAlign set to left (with margin.left property set to 15); 2nd one with text align set to Right

Last progressbar is a fake, because often people asks how to do a K2000 effet, i simply used the .NET progressbar, and set its style to K2000 Wink

Many other features and improvement into my class, described with comments (events, properties added, minor bugfixes,and so on)

Just awaiting agreement to publish...

Thanks

rushsky

22:11 27 Oct '09

he is chinaese?
Sign In·View Thread·PermaLink

My vote of 2

Chizik

22:00 4 May '09

it's more interesting to color every step in his own color
Sign In·View Thread·PermaLink

I'm new and I'd like to use this but I don't where to put everything.

DFlat4Now

11:24 2 Oct '08

Here's what I have before I say yours:

using System;
using System.Collections.Generic;
using System.ComponentModel;
using System.Data;
using System.Drawing;
using System.Linq;
using System.Text;
using System.Windows.Forms;

namespace ProgressBarSimple2
{
public partial class Form1 : Form
{
public Form1()
{
InitializeComponent();

timer1.Interval = 1000;
timer1.Enabled = true;

timer2.Interval = 1000;
timer2.Enabled = true;

timer3.Interval = 1000;
timer3.Enabled = true;
}

private void timer1_Tick(object sender, EventArgs e)
{
if (progressBar1.Value < 5)
{
progressBar1.Value += 1;
progressBar1.Update();
}
else
{
progressBar1.Value = 0;
progressBar1.Update();
}
}

private void timer2_Tick(object sender, EventArgs e)
{
if (progressBar2.Value < 8)
{
progressBar2.Value += 1;
progressBar2.Update();
}
else
{
progressBar2.Value = 0;
progressBar2.Update();
}
}

private void timer3_Tick(object sender, EventArgs e)
{
if (progressBar3.Value < 10)
{
progressBar3.Value += 1;
progressBar3.Update();
}
else
{
progressBar3.Value = 0;
progressBar3.Update();
}
}

private void progressBar1_Click(object sender, EventArgs e)
{

}

private void progressBar2_Click(object sender, EventArgs e)
{

}

private void progressBar3_Click(object sender, EventArgs e)
{

}

}

Marquee

UltraWhack

11:20 31 Mar '08

Nice control. Rather than using timers, How about introducing the marquee effect similar to what is available with VB.NET express 2008's progressbar ?
Sign In·View Thread·PermaLink

C sharp

nayyumaung

21:11 16 Jan '07

Excellent,fri sdfsf
Sign In·View Thread·PermaLink

Excellent

jlgbzh

2:44 13 Jun '05

Very good. Two hours for rescripting it in VB application (and undestand your C code) with no problem. Excellent !
Sign In·View Thread·PermaLink

Invalidate() method doesn't update always

rudy.net

20:52 28 May '05

Alan,
To test your control I placed it on a Form and then added a loop that gets activated by clicking on a Button (which calls event Button_Click). In the loop I just called PerformUpdate() method.
The problem was that the control did not get redrawn until the Button_Click finished.
I replaced all the calls to Invalidate() by calls to UpdateProgressBar() which is defined below.
I haven't had much experience with GDI+ so if you have a better way, please let me know.

private void UpdateProgressBar()
		{
			PaintEventArgs e = new PaintEventArgs(this.CreateGraphics(),this.ClientRectangle);
			OnPaint(e);
		}

Re: Invalidate() method doesn't update always

eliakaris

4:39 8 Jun '05

Invalidate waits for the best time to paint. To force a paint you have to use the Refresh(); method call.
Sign In·View Thread·PermaLink

Enhancement of the project

DDISoft

23:04 23 Mar '05

Hello Alan, I wonder if I can post a new article based VERY much on your code. Basically I used the progress bar you did but I didn’t like how it looks. So I made it look more like XP style.

Enhancements:

- XP look.
- Bars now are drawn like XP progress bar (I mean the hole bar not only a part of it)

Basically this is it. You can email you how the new progress bar looks like.

P.S. Great work.

Re: Enhancement of the project

Alan Zhao

11:09 27 Mar '05

Thanks DDISoft, I am very happy to see the improvements you did on Color ProgressBar. You're very welcome to post a new article with these improvements. Thanks again! Alan
Sign In·View Thread·PermaLink

Re: Enhancement of the project

DDISoft

4:07 31 Mar '05

It is done. You can check it out at http://www.codeproject.com/cs/miscctrl/ColourProgressBar.asp[^] He he notice the project name I did not make it sounds so close to your name on purpose. I'm sorry about that.
Sign In·View Thread·PermaLink

VisualStyle

vandergeld

0:42 24 Feb '05

Application.EnableVisualStyles(); Application.DoEvents(); This will give you the xp-look this certainly isn't boring is it? Diablo
Sign In·View Thread·PermaLink	1.00/5 (1 vote)

Thank You.

Karv

11:30 2 Feb '05

Thank you for this code, it has made me much happier, not having to suffer progress bars in Battleship Grey under the "Silver" theme in XP, and saved me countless hours tyring to do something which imo should have been included with .NET studio in the first place. / karv
Sign In·View Thread·PermaLink

How to clear progress bar

Anonymous

15:30 28 Jul '04

How to clear progress bar?
Sign In·View Thread·PermaLink	1.33/5 (3 votes)

Re: How to clear progress bar

rlnoble

22:01 9 Oct '04

I would imagine you just set the value to 0 like normal progress bars.
Sign In·View Thread·PermaLink	1.40/5 (5 votes)

Progress indicator

SeveredCross

8:01 13 Jun '04

I believe I have coded a progress indicator. I have been writing my own ProgressBar (it extends the regular progressbar with your coloring methods - your code was very useful, I only modified a few things, well written and with the ability to automatically copy a file to another location and display the percentage of that operation as it is proceeding), and I also was hunting for a method to draw the percentage, and draw it centered in the progressbar. After a little messing around with PointF() and GDI+, I came up with this:


Font percentageFont = new Font("Arial",Height / 4);
e.Graphics.DrawString(Value.ToString() + "%",percentageFont,new SolidBrush(Color.Black),new PointF((float)(Width / 2 - 1.5 * percentageFont.Size),Height / 2 - percentageFont.GetHeight(e.Graphics) / 2));

You can also replace


SolidBrush bgBrush = new SolidBrush(bgColor);
e.Graphics.FillRectangle(bgBrush, this.ClientRectangle);

with


e.Graphics.Clear(bgColor);

In all my tests, this has worked well, even with resizing controls and at several different resolutions (1024x768, 1152x864,800x600). Hope it helps! Smile

Cool Control

coderforrent

17:27 2 May '04

Nice. I like it. www.CoderForRent.com GET A PROGRAMMING JOB TODAY! We have the cheapest rates anywhere. FREELANCE WORK AVAILABLE NOW!
Sign In·View Thread·PermaLink	2.23/5 (8 votes)

SPAMMER

abhadresh

17:30 2 May '04

ab
Sign In·View Thread·PermaLink	1.57/5 (3 votes)

Suggestion leppie 10:37 1 May '04

Hi Looks nice Try using a GradientBrush fill to make things more flexible. Cheers leppie ^{top secret AdvancedTextBox}
Sign In·View Thread·PermaLink

Re: Suggestion

Alan Zhao

14:02 1 May '04

But will GradientBrush fill have the same 3D feel? Can you show me an example? Thank!
Sign In·View Thread·PermaLink

Re: Suggestion

mav.northwind

23:48 1 May '04

You could use this as a basis for your painting.
This piece of code assumes
_col as the Color variable storing the ProgressBar's color
_min as the Minimum value
_max as the Maximum value
_val as the current Value

Feel free to include it in your source!

protected override void OnPaint(System.Windows.Forms.PaintEventArgs e)
{
    //
    // Calculate matching colors
    //
    Color dCol = ControlPaint.Dark(_col);
    Color ddCol = ControlPaint.Dark(_col);
    //
    // Fill background
    //
    SolidBrush sb = new SolidBrush(ddCol);
    e.Graphics.FillRectangle(sb, this.ClientRectangle);
    sb.Dispose();
    //
    // Calculate width of bar
    //
    int w = (this.Width*_val)/(_max-_min);
    if (w==0) // GDI+ doesn't like rectangles 0px wide or high...
        return;
    //
    // Rectangles for upper and lower half of bar
    //
    Rectangle topRc = new Rectangle(0, 0, w, this.Height/2);
    Rectangle botRc = new Rectangle(0, this.Height/2, w, this.Height/2);
    //
    // The gradient brush
    //
    LinearGradientBrush lgb;
    //
    // Paint upper half
    //
    lgb = new LinearGradientBrush(new Point(0, 0), new Point(0, this.Height/2), dCol, _col);
    e.Graphics.FillRectangle(lgb, topRc);
    lgb.Dispose();
    //
    // Paint lower half (this.Height/2-1 because there would be a dark line in the middle of the bar)
    //
    lgb = new LinearGradientBrush(new Point(0, this.Height/2-1), new Point(0, this.Height), _col, dCol);
    e.Graphics.FillRectangle(lgb, botRc);
    lgb.Dispose();
}

Re: Suggestion

Alan Zhao

6:46 2 May '04

Thanks mav.northwind, I rewrote the onPaint() method based on you suggestion. The updated project is available now. You're credited above in the article. Thanks again!!!
Sign In·View Thread·PermaLink

Re: Suggestion

mav.northwind

7:32 2 May '04

You're very welcome, no big deal here Wink

Btw., another version using a PathGradientBrush this time (leaves more room for further experiments):

int h = this.Height;
GraphicsPath p = new GraphicsPath();
// Points for TopLeft, TopRight, CenterRight, BottomRight, BottomLeft, CenterLeft
p.AddPolygon(new Point[] { new Point(0,0),
  new Point(w,0),
  new Point(w,h/2),
  new Point(w,h),
  new Point(0,h),
  new Point(0,h/2)
});

// No need for 2 Rectangles any more...
Rectangle fillRc = new Rectangle(0,0,w,h);

PathGradientBrush pgb = new PathGradientBrush(p);
pgb.CenterColor = _col;
pgb.CenterPoint = new Point(w/2, h/2);
// The SurroundColors match the path's points
pgb.SurroundColors = new Color[] { dCol, dCol, _col, dCol, dCol, _col};
// Fill the whole rectangle with PathGradientBrush
e.Graphics.FillRectangle(pgb, fillRc);
pgb.Dispose();

Last Visit: 19:54 8 Nov '09 Last Update: 19:54 8 Nov '09

12 Next »

General News Question Answer Joke Rant Admin

PermaLink | Privacy | Terms of Use
Last Updated: 30 Apr 2004
Editor: Smitha Vijayan