Click here to Skip to main content
15,867,686 members
Articles / Programming Languages / C#
Article

Gradient-Animation check progress bar control

Rate me:
Please Sign up or sign in to vote.
4.40/5 (29 votes)
6 Oct 20041 min read 80.4K   1.2K   61   2
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

Introduction

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.

Properties

This control has the following properties:

  • CHECKSTATE

    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.

C#
//
// 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)
        m_bmCheckBox.Dispose();
    Graphics gImage = null, gWnd = null;
    Rectangle rtCheckBox;
    AdjustAnimationCheckBoxRect_TextRect();
    rtCheckBox = m_rtCheckBox;

    Rectangle rtLeft = new Rectangle(0, 0, rtCheckBox.Width/2 + 1, 
                                                rtCheckBox.Height);
    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);
    gWnd.Dispose();

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

    br1.Dispose();
    br2.Dispose();
}

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:

C#
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
    if(m_curState == ANICHECKSTATE.UNCHECKED)
        return;

    // 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:

C#
......
using KDHLib.Controls;

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

    public Form1()
    {
        InitializeComponent();
        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 = 
                     KDHLib.Controls.AnimationCheckBox.CHECKBOXALIGN.MiddleLeft;
        // start the animation of control
        this.animationCheckBox1.CHECKSTATE = 
                       KDHLib.Controls.AnimationCheckBox.ANICHECKSTATE.CHECKING;
        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 = 
                    System.Drawing.ContentAlignment.MiddleLeft;

        this.Controls.Add(this.animationCheckBox1);
    }
    ......
}

Conclusion

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

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


Written By
Software Developer (Senior)
Korea (Republic of) Korea (Republic of)
This member has not yet provided a Biography. Assume it's interesting and varied, and probably something to do with programming.

Comments and Discussions

 
QuestionIs this a good solution? Pin
Karbunko7-Nov-05 7:07
Karbunko7-Nov-05 7:07 
GeneralDoes not work in Multi Threading Pin
Karbunko6-Nov-05 7:29
Karbunko6-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.