Gradient-Animation Waiting-Bar control

• Download source files - 1.91 Kb
• Download demo project - 23.0 Kb

Introduction

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

Code listing

Following code is the GradientWaitingBar class:

Header of This control

//

// This control is Gradient Waiting Bar.

//

using System;
using System.Windows.Forms;
using System.Drawing;
using System.Drawing.Drawing2D;
using System.Diagnostics;

Properties

This control has the following properties:

• Speed Scrolling speed of control.
• GradientColor1 Start color of gradient.
• GradientColor2 End color of gradient.
• ScrollWay Direction of scrolling gradient.
• Interval Timer interval of scrolling gradient.

#region "Properties"
// property of timer

[System.ComponentModel.Description("Gets or sets " + 
 "the Interval of timer tick count for Speed of GradientWaitingBar"), 
 System.ComponentModel.Category("Behavior")]
public int Interval
{
    get    {
        return m_timer.Interval;
    }
    set    {
        m_timer.Interval = value;
    }
}

// property of speed in scrolling.

[System.ComponentModel.Description("Gets or sets the " + 
 "speed of gradient for GradientWaitingBar"), 
 System.ComponentModel.Category("Behavior")]
public int Speed
{
    get
    {
        return m_nSpeed;
    }
    set
    {
        m_nSpeed = value;
    }
}
// property of begin color in linear gradient

[System.ComponentModel.Description("Gets or sets the starting" + 
 " color of the gradient for GradientWaitingBar"), 
 System.ComponentModel.Category("Appearance")]
public Color GradientColor1
{
    get
    {
        return m_col1;
    }
    set
    {
        m_col1 = value;
        MakeBitmapForWaitingBar();
    }
}

// property of end color in linear gradient

[System.ComponentModel.Description("Gets or sets the ending " + 
 "color of the gradient for GradientWaitingBar"), 
 System.ComponentModel.Category("Appearance")]
public Color GradientColor2
{
    get
    {
        return m_col2;
    }
    set
    {
        m_col2 = value;
        MakeBitmapForWaitingBar();
    }
}

// property of scrolling direction in control

[System.ComponentModel.Description("Gets or sets" + 
  " the direction of scrolling the gradient"), 
  System.ComponentModel.Category("Appearance")]
public SCROLLGRADIENTALIGN ScrollWAY
{
    get
    {
        return m_nScrollway;
    }
    set
    {
        m_nScrollway = value;
        MakeBitmapForWaitingBar();
    }
}        

#endregion

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 performance, on sizing and changed Properties

// first makes a suitable bitmap image of gradient

// and then On paint this control uses it.

//

private void MakeBitmapForWaitingBar()
{
  //check the windows size

  if(this.ClientRectangle.Width == 0 || this.ClientRectangle.Height == 0)
      return;
  if(m_bitmap != null)
      m_bitmap.Dispose();
  
  Graphics gimage = null, gWnd = null;
  Brush br1, br2;
  Rectangle rt1, rt2;
  
  // Get temporary DC and make a compatible bitmap with current Windows.

  gWnd = Graphics.FromHwnd(this.Handle);
  m_bitmap = new Bitmap(this.ClientRectangle.Width, 
                 this.ClientRectangle.Height, gWnd);
  gWnd.Dispose();
  
  if(m_nScrollway == SCROLLGRADIENTALIGN.HORIZONTAL)
  {
      rt1 = this.ClientRectangle;
      rt1.Width = this.ClientRectangle.Width/2+1;
  
      rt2 = rt1;
      rt2.X = this.ClientRectangle.Width/2;
      rt2.Width = this.ClientRectangle.Width/2+1;
      br1 = new LinearGradientBrush(rt1, m_col1, m_col2, 
                          LinearGradientMode.Horizontal);
      br2 = new LinearGradientBrush(rt2, m_col2, m_col1, 
                          LinearGradientMode.Horizontal);
  }
  else
  {
      rt1 = this.ClientRectangle;
      rt1.Height = this.ClientRectangle.Height/2 + 1;
  
      rt2 = rt1;
      rt2.Y = this.ClientRectangle.Height / 2;
      rt2.Height = this.ClientRectangle.Height/2 + 1;
      br1 = new LinearGradientBrush(rt1, m_col1, m_col2, 
                               LinearGradientMode.Vertical);
      br2 = new LinearGradientBrush(rt2, m_col2, m_col1, 
                               LinearGradientMode.Vertical);
  }
  
  // make a new bitmap

  gimage = Graphics.FromImage(m_bitmap);
  gimage.FillRectangle(br2, rt2);
  gimage.FillRectangle(br1, rt1);
  gimage.Dispose();
}

How to use it

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

......
using KDHLib.Controls.GradientWaitingBar;

public class Form1 : System.Windows.Forms.Form
{
    private System.ComponentModel.IContainer components;
    private KDHLib.Controls.GradientWaitingBar m_bar = null;
    
    public Form1()
    {
        InitializeComponent();
        this.m_bar = new KDHLib.Controls.GradientWaitingBar();
        
        this.m_bar.BackColor = System.Drawing.Color.White;
        // set the gradient colors

        this.m_bar.GradientColor1 = System.Drawing.Color.LightPink;
        this.m_bar.GradientColor2 = System.Drawing.Color.GhostWhite;
        this.m_bar.Interval = 100;
        this.m_bar.Location = new System.Drawing.Point(384, 16);
        // Make a vertical Gradient scrolling bar

        this.m_bar.ScrollWAY = 
          KDHLib.Controls.GradientWaitingBar.SCROLLGRADIENTALIGN.VERTICAL;
        this.m_bar.Size = new System.Drawing.Size(16, 144);
        
        // set the speed

        this.m_bar.Speed = 5;
        this.m_bar.TabIndex = 0;
        this.Controls.Add(this.m_bar);
    }
    ......
}

Conclusion

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