Click here to Skip to main content
11,578,524 members (58,155 online)
Click here to Skip to main content

Progress Bar Google Chrome

, 29 May 2011 CPOL 23.2K 2.4K 33
Rate this:
Please Sign up or sign in to vote.
A Google Chrome themed progress, with customizable gradients.

ProgressBarPreview.png

Introduction

This article demonstrates creating a Google Chrome themed ProgressBar control from scratch.

Background

Any ProgressBar control relies on a value and its graphical representation. Google Chrome downloader has a circular representation of its progress.

Using the Code

ChromeProgressBar is designed the same way the Chrome ProgressBar works. This converts the progress values into a circular graphical representation.

private void PaintProgress(PaintEventArgs e)
{
   using( SolidBrush progressBrush = new SolidBrush(this.ProgressColor))
   {
       Rectangle rect = LayoutInternal.ProgressRectangle;

       rect.Inflate(-2, -2);
       rect.Height -= 2; rect.Width -= 2;

       float startAngle = -90;
       float sweepAngle = Progress / 100 * 360;
       
       e.Graphics.FillPie(progressBrush, rect, startAngle, sweepAngle);
   }
}

Here is how the circle and the segments are drawn, with the graphics path and four lines. The clipping region of the Graphics object is adjusted to clip the lines that run beyond the circle.

private void PaintBorder(PaintEventArgs e)
{
    GraphicsPath borderPath = new GraphicsPath();
    Rectangle progressRect = LayoutInternal.ProgressRectangle;
    borderPath.AddArc(progressRect, 0, 360);
    ....
    ....
    ....

    using (Pen borderPen = new Pen(this.BorderColor, 2))
    {
        e.Graphics.DrawPath(borderPen, borderPath);

        e.Graphics.DrawLine(borderPen,
            new Point(progressRect.Left + progressRect.Width / 2, progressRect.Top),
            new Point(progressRect.Left + progressRect.Width / 2, progressRect.Bottom));

        e.Graphics.DrawLine(borderPen,
            new Point(progressRect.Left, progressRect.Top + progressRect.Height / 2),
            new Point(progressRect.Right, progressRect.Top + progressRect.Height / 2));

        e.Graphics.DrawLine(borderPen,
             new Point(progressRect.Left ,progressRect.Top),
             new Point(progressRect.Right,progressRect.Bottom));

        e.Graphics.DrawLine(borderPen,
            new Point(progressRect.Left, progressRect.Bottom),
            new Point(progressRect.Right, progressRect.Top ));
    }

    e.Graphics.Clip = clip;
}

Points of Interest

Take a look at the InternalLayout class to see how the control layouts individual items on the control. The nested Internal Layout class takes ChromeProgressBar as an argument and provides all the necessary layout information required for the control leaving the painting process alone to the ChromeProgressBar.

Hope this will you with a good start in creating controls. Please do leave your valuable comments and suggestions.

License

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

Share

About the Author

VallarasuS
Software Developer
India India
I code, learn, listen, and some day in a near future be a proud farmer.

You may also be interested in...

Comments and Discussions

 
GeneralMy vote of 4 Pin
zuojunyuan23-Nov-11 16:16
memberzuojunyuan23-Nov-11 16:16 
Generalanti-aliasing Pin
Unruled Boy29-May-11 23:58
memberUnruled Boy29-May-11 23:58 
GeneralRe: anti-aliasing Pin
vallarasus30-May-11 0:46
membervallarasus30-May-11 0:46 
GeneralToo short for an article Pin
Venkatesh Mookkan29-May-11 18:53
memberVenkatesh Mookkan29-May-11 18:53 
GeneralArticle is a bit light Pin
DaveAuld29-May-11 2:59
memberDaveAuld29-May-11 2:59 
GeneralRe: Article is a bit light Pin
vallarasus29-May-11 8:11
membervallarasus29-May-11 8:11 
GeneralRe: Article is a bit light Pin
Venkatesh Mookkan29-May-11 18:52
memberVenkatesh Mookkan29-May-11 18:52 
GeneralRe: Article is a bit light Pin
vallarasus1-Jun-11 7:16
membervallarasus1-Jun-11 7:16 

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

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

| Advertise | Privacy | Terms of Use | Mobile
Web04 | 2.8.150603.1 | Last Updated 29 May 2011
Article Copyright 2011 by VallarasuS
Everything else Copyright © CodeProject, 1999-2015
Layout: fixed | fluid