Click here to Skip to main content
15,867,330 members
Articles / Multimedia / GDI+
Article

Gradient-Animation Waiting-Bar control

Rate me:
Please Sign up or sign in to vote.
4.86/5 (34 votes)
29 Sep 20041 min read 103K   1.4K   52   18
When processing is taking a long time, this control is very useful for informing the user.

Sample image - GradientAnimation-WaitBar.jpg

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

C#
//
// 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.
C#
#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.

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

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

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

 
QuestionThreadsecure? Pin
dherrmann9-Nov-08 6:35
dherrmann9-Nov-08 6:35 
AnswerRe: Threadsecure? Pin
dherrmann3-Mar-11 2:11
dherrmann3-Mar-11 2:11 
GeneralKyung DuckHyun Code Licensing Question... Pin
plexar17-Sep-07 10:48
plexar17-Sep-07 10:48 
GeneralRe: Kyung DuckHyun Code Licensing Question... Pin
Kyung DuckHyun17-Sep-07 16:46
Kyung DuckHyun17-Sep-07 16:46 
QuestionHelp Pin
singhswat30-Jan-06 19:28
singhswat30-Jan-06 19:28 
NewsOff Color Bar at Some Widths Pin
Thomas Wells28-Dec-05 7:34
Thomas Wells28-Dec-05 7:34 
GeneralRe: Off Color Bar at Some Widths Pin
Thomas Wells28-Dec-05 7:54
Thomas Wells28-Dec-05 7:54 
GeneralJust what I needed! Pin
kruff4-Nov-05 10:26
kruff4-Nov-05 10:26 
QuestionProblem Pin
Carpetafhf27-Oct-05 0:38
Carpetafhf27-Oct-05 0:38 
GeneralMissing Dispose method Pin
Jay Alman20-Jan-05 6:21
Jay Alman20-Jan-05 6:21 
GeneralRe: Missing Dispose method Pin
Kyung DuckHyun24-Oct-05 0:45
Kyung DuckHyun24-Oct-05 0:45 
Questionprogress in form? Pin
Jonte20-Jan-05 4:01
Jonte20-Jan-05 4:01 
GeneralMDI APP Pin
Iup3Barb24-Nov-04 23:49
Iup3Barb24-Nov-04 23:49 
GeneralRe: MDI APP Pin
Kyung DuckHyun28-Nov-04 14:46
Kyung DuckHyun28-Nov-04 14:46 
QuestionCredit? Pin
Brian Nottingham30-Sep-04 6:27
Brian Nottingham30-Sep-04 6:27 
AnswerRe: Credit? Pin
Kyung DuckHyun30-Sep-04 14:34
Kyung DuckHyun30-Sep-04 14:34 
GeneralLooks very pretty Pin
Vladimir Afanasyev30-Sep-04 1:07
Vladimir Afanasyev30-Sep-04 1:07 
GeneralRe: Looks very pretty Pin
Kyung DuckHyun4-Oct-04 22:27
Kyung DuckHyun4-Oct-04 22:27 

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.