Wednesday, September 29, 2010

C# Tutorial: Create a Custom ProgressBar [Custom Controls]

Here is the code

using System.Drawing.Drawing2D;
////////////////////////////////////////////////////////
label1.ForeColor = Color.Black;
this.ForeColor = SystemColors.Highlight; // Set the default color of the Pbar

protected float percent = 0.0f; // Protected because we don't want this to be accessed from the outside
// Create a Value property for the Pbar
public float Value
{
    get
    {
        return percent;
    }
    set
    {
        // Maintain the Value between 0 and 100
        if (value < 0) value = 0;
        else if (value > 100) value = 100;
        percent = value;
        label1.Text = value.ToString() + "%"; 
        // Redraw the Pbar every time the Value changes
        this.Invalidate(); 
    }
}
protected override void OnPaint(PaintEventArgs e)
{
    base.OnPaint(e);
    Brush b = new SolidBrush(this.ForeColor); // Create a brush that will draw the background of the Pbar
    // Create a linear gradient that will be drawn over the background. FromArgb means you can use the Alpha value wich is the transparency
    LinearGradientBrush lb = new LinearGradientBrush(new Rectangle(0, 0, this.Width, this.Height), Color.FromArgb(255, Color.White), 

Color.FromArgb(50, Color.White), LinearGradientMode.ForwardDiagonal);     
    // Calculate how much has the Pbar to be filled for "x" %
    int width = (int)((percent / 100) * this.Width);
    e.Graphics.FillRectangle(b, 0, 0, width, this.Height);
    e.Graphics.FillRectangle(lb, 0, 0, width, this.Height);
    b.Dispose(); lb.Dispose(); 
}

/////////// Pbar_SizeChanged /////////////
// Maintain the label in the center of the Pbar
label1.Location = new Point(this.Width / 2 - 21 / 2 - 4, this.Height / 2 - 15 / 2);

Or download the solution

9 comments:

  1. Awesome Custom Progress Bar, thanks for this.

    ReplyDelete
  2. Great Job. Very useful information to learn. Do you know if I can make a custom control for c# and reuse it for windows forms CLI, Visual C++ ?

    ReplyDelete
  3. OMG exactly the tutorial I was looking for) thanks for great job

    ReplyDelete
  4. Thank you so much, this is awsome! :D

    ReplyDelete