Click here to Skip to main content
Click here to Skip to main content
Search within:



 
Comments & Discussions (33)

Color ProgressBar

By , 30 Apr 2004
 

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

Using the Control

Adding ColorProgressBar control to Windows Form Toolbox

  1. Right-click the Windows Form Toolbox and choose Customize Toolbox... from the shortcut menu. The Customize Toolbox dialog box opens.
  2. 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.
  3. 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

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
Web Developer www.LightspeedSigns.com
United States United States
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.

Article Top
 
Sign Up to vote   Poor Excellent
Add a reason or comment to your vote: x
Votes of 3 or less require a comment

Comments and Discussions

 
You must Sign In to use this message board.
Search this forum  
    Spacing  Noise  Layout  Per page   
First PrevNext
GeneralMy vote of 4memberdan30085 May '13 - 5:54 
Only thing missing is to be able to have text on the bar Smile | :)
Sign In·View Thread·Permalink
GeneralMy vote of 5memberAfaan Bilal3 Jan '13 - 6:14 
Very helpful and elegant!
Sign In·View Thread·Permalink
QuestionGreat and nice job! how can use in WPF?memberpablomartin28 Aug '12 - 23:32 
Great and nice job! how can use in WPF.
I trying to use in my wpf project with no any luck.
Really be great have this component as native wpf component, anyway , you know how add to wpf?
Sign In·View Thread·Permalink
GeneralMy vote of 5memberabdul_khader2 May '12 - 5:28 
Really superb article.It Helps beginners very much. Thanks a lot BOSS...
Sign In·View Thread·Permalink
Generalrequesting agreementmembergiova8 Nov '09 - 2:26 
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.
Sign In·View Thread·Permalink
GeneralRe: requesting agreementmembergiova8 Nov '09 - 7:58 
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...
Sign In·View Thread·Permalink
GeneralThanksmemberrushsky27 Oct '09 - 21:11 
he is chinaese?
Sign In·View Thread·Permalink
GeneralMy vote of 2memberChizik4 May '09 - 21:00 
it's more interesting to color every step in his own color Wink | ;-)
Sign In·View Thread·Permalink
GeneralI'm new and I'd like to use this but I don't where to put everything.memberDFlat4Now2 Oct '08 - 10:24 
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)
{
 
}
 

 
}
Sign In·View Thread·Permalink
GeneralMarqueememberUltraWhack31 Mar '08 - 10:20 
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
Last Visit: 31 Dec '99 - 18:00     Last Update: 23 May '13 - 16:25Refresh1234 Next »

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

About Article
An attractive and fancier ProgressBar.
Type Article
Licence 
First Posted 30 Apr 2004
Views 157,151
Bookmarked 56 times

, +
Top News

The Next Version of Android - Some of What's Coming

Get the Insider News free each morning.
Related Videos
jQuery UI: Progress Bar Widget
HTML 5 - 0503 Handling Color
Vertical ProgressBar
Custom ProgressBar Control
EasyProgressBarPacket
Glass Style ProgressBar
Fully Customizable XP Progress Bar (with examples)
The Amazing ProgressBar Control
Gradient and Boxed ProgressBars
Basic C# Web Browser in Visual Studio 2008
NeroBar
iTunes Bar Look-a-Like
A Smooth ProgressBar for everyone! Part Duex
ColorBar - A Gradient Colored ProgressBar
ASP.NET ProgressBar Control
Mouse progress control
MP3 Player for Windows 7
TSmartProgressBar: A Smart C# ProgressBar with Percent Text
WPF Slideshow
Using ANSI Colors within .NET
Progess Bar Control for ASP.NET
Reusable Progress Bar Server Control
Permalink | Advertise | Privacy | Mobile
Web02 | 2.6.130523.1 | Last Updated 1 May 2004
Article Copyright 2004 by Alan Zhao
Everything else Copyright © CodeProject, 1999-2013
Terms of Use
Layout: fixed | fluid