Gradient-Animation check progress bar control

• Download source files - 2.85 Kb
• Download demo project - 57.9 Kb

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.

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

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:

......
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.