Gradient-Animation check progress bar control






4.40/5 (29 votes)
Oct 4, 2004
1 min read

80996

1186
Animating gradient-check-image control. When processing is taking a long time, this control is very useful for informing the user.
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.