Click here to Skip to main content
13,548,587 members
Click here to Skip to main content
Add your own
alternative version


59 bookmarked
Posted 4 Oct 2004

Gradient-Animation check progress bar control

, 6 Oct 2004
Rate this:
Please Sign up or sign in to vote.
Animating gradient-check-image control. When processing is taking a long time, this control is very useful for informing the user.

Sample Image - Gradient waiting Bar


I saw the Oracle Setup screen made by Java language. In addition, I got a hint about the Animation-Checkbox. So I tried to make same control like the control in Oracle Installation.

This article demonstrates a Animating Gradient-Waiting-CheckBar control in C#. This control animates the gradient-image, combined by BeginGradientColor, EndGradientColor infinitely. When any processing (working) is taking a long time, this control is very useful for informing the user that the current thread is now processing the work. This control does not use Win32 API, just uses C# functions.


This control has the following properties:


    Control's state. State can be CHECKED, UNCHECKED, CHECKING (animation).

  • CheckBitmapSize

    Sets or gets the size of the gradient check image.

  • CheckBoxAlign

    Sets or gets the CheckBox location.

  • TextAlign

    Sets or gets the text align on this control.

  • BeginGradientColor

    Starting color of Gradient.

  • EndGradientColor

    Ending color of Gradient.

This control makes a Gradient Bitmap for performance. For making the gradient bitmap, this code uses C# code, not Win32 API.

// Make a Gradient Bitmap for CheckBox
// For performance, on sizing and changed Properties first
// makes a suitable bitmap image of gradient
// and then On paint this control uses it.
private void MakeGradientCheckBoxBrush()
    if(m_bmCheckBox != null)
    Graphics gImage = null, gWnd = null;
    Rectangle rtCheckBox;
    rtCheckBox = m_rtCheckBox;

    Rectangle rtLeft = new Rectangle(0, 0, rtCheckBox.Width/2 + 1, 
    Rectangle rtRight = new Rectangle(rtCheckBox.Width/2, 0, 
                        rtCheckBox.Width/2 + 1, rtCheckBox.Height);
    LinearGradientBrush br1 = new LinearGradientBrush(rtLeft, m_col1, 
                              m_col2, LinearGradientMode.Horizontal);
    LinearGradientBrush br2 = new LinearGradientBrush(rtRight, m_col2, 
                              m_col1, LinearGradientMode.Horizontal);

    // Get temporary DC and make a compatible bitmap with current Windows.
    gWnd = Graphics.FromHwnd(this.Handle);
    m_bmCheckBox = new Bitmap(rtCheckBox.Width, rtCheckBox.Height, gWnd);

    // make a new bitmap
    gImage = Graphics.FromImage(m_bmCheckBox);
    gImage.FillRectangle(br2, rtRight);
    gImage.FillRectangle(br1, rtLeft);


On Paint event, controls use the clip region for drawing the animation-checkbox bitmap. So, first the control sets the clip region and then paints the bitmap to the clip area. The control converts the ContentAlignment to StringFormat. Code is as follows:

protected override void OnPaint(PaintEventArgs e)
    base.OnPaint (e);

    Rectangle rt = this.ClientRectangle;
    Rectangle rtText, rtCheck;
    Graphics g = e.Graphics;

    rtCheck = m_rtCheckBox;
    rtText = m_rtText;

    SolidBrush br = new SolidBrush(this.ForeColor);
    g.DrawString(this.Text, this.Font, br, rtText, m_fmtText);

    // if the control's state is UNCHECKED,
    // control do not draw the ani-checkbox image

    // clone the original region
    Region r = m_clipCheckBoxRegion.Clone();
    // locate the region on the control
    r.Translate(rtCheck.Left, rtCheck.Top);
    Region backr = g.Clip;

    // set the clip area
    g.Clip = r;

    Rectangle bm, bm2;
    bm = new Rectangle(0, 0, rtCheck.Width, rtCheck.Height);
    bm2 = bm;
    bm2.X = bm2.Width - xloc;
    bm2.Width = xloc;

    g.DrawImage(m_bmCheckBox, rtCheck.Left + xloc, 
                 rtCheck.Top, bm, GraphicsUnit.Pixel);
    g.DrawImage(m_bmCheckBox, rtCheck.Left, rtCheck.Top, 
                             bm2, GraphicsUnit.Pixel);
    // restore the clip area by original clip area
    g.Clip = backr;

How to use it

You can develop it to serve your ideas. You can rewrite the above code as well, such as write alignment, borderstyle and so on. If you want to use this control, it is very easy. The code is shown below:

using KDHLib.Controls;

public class Form1 : System.Windows.Forms.Form
    private System.ComponentModel.IContainer components;
    private KDHLib.Controls.AnimationCheckBox animationCheckBox1;

    public Form1()
        this.m_bar = new KDHLib.Controls.GradientWaitingBar();

        this.animationCheckBox1.BeginGradientColor = System.Drawing.Color.White;
        this.animationCheckBox1.CheckBitmapSize = 
                                                new System.Drawing.Size(20, 20);
        this.animationCheckBox1.CheckBoxAlign = 
        // start the animation of control
        this.animationCheckBox1.CHECKSTATE = 
        this.animationCheckBox1.EndGradientColor = System.Drawing.Color.Red;
        this.animationCheckBox1.Location = new System.Drawing.Point(40, 47);
        this.animationCheckBox1.Name = "animationCheckBox1";
        this.animationCheckBox1.Size = new System.Drawing.Size(200, 24);
        this.animationCheckBox1.TabIndex = 2;
        this.animationCheckBox1.Text = "Installing Components";
        this.animationCheckBox1.TextAlign = 



It is a very simple control but it is very useful, I think. Thanks a lot for reading this document.


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

Kyung DuckHyun
Software Developer (Senior)
Korea (Republic of) Korea (Republic of)
No Biography provided

You may also be interested in...


Comments and Discussions

QuestionIs this a good solution? Pin
Karbunko7-Nov-05 7:07
memberKarbunko7-Nov-05 7:07 
GeneralDoes not work in Multi Threading Pin
Karbunko6-Nov-05 7:29
memberKarbunko6-Nov-05 7:29 

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
Web04 | 2.8.180515.1 | Last Updated 7 Oct 2004
Article Copyright 2004 by Kyung DuckHyun
Everything else Copyright © CodeProject, 1999-2018
Layout: fixed | fluid