14,212,177 members
Article
Posted 23 Aug 2009

91.1K views
134 bookmarked

# Circular Progress Control - Mac OS X style

,
Rate this:
28 Aug 2009     CPOL
Create a circular progress control, like the one in Mac OS X, using GDI+.

## Introduction

I have always been impressed by the Mac OS X GUI. It is very neat and elegant. In this article, I will show you how to create a user control using GDI+ similar to the Asynchronous Circular Progress Indicator in Mac OS X.

Based on the comments that I received from BillWoodRuff and dequadin, I have refined my code further to create two new Circular Progress Controls

• Optimized Circular Progress Control
• Matrix Circular Progress Control
I will go through their details one by one...

## The Circular Progress Control

In the attached project, I have created a User Control, called CircularProgressControl, which encapsulates the rendering of the progress control. It also provides certain extra properties like the color of the control, the speed of the progress, and the starting angle of the control. Here is the class diagram of the CircularProgressControl:

The Start and Stop APIs let the user start the animation and stop it, respectively.

## Using the Control

In order to use this control, you can add a reference to this project and drag and drop the CircularProgressControl from the ToolBox onto your Form. You can set the color, speed, and starting angle. The starting angle is specified in degrees, and it increases in clockwise direction.

You can also set the direction of the rotation: CLOCKWISE or ANTICLOCKWISE. For that, you need to set the Rotation property to one of the values of the Direction enum.

public enum Direction
{
CLOCKWISE,
ANTICLOCKWISE
}

## Circular Progress Control Demystified

In order to render the spokes of the control, first the control calculates two circles - inner circle and outer circle. These two circles are concentric. The radii of these two circles are dependent on the size of the CircularProgressControl. The start point (X1, Y1) and the end point (X2, Y2) are calculated based on the angle of the spoke. The angle between two adjacent spokes (m_AngleIncrement) is based on the number of spokes (m_SpokesCount), and it is calculated as:

m_AngleIncrement = (int)(360/m_SpokesCount);

The Alpha value of the color of the first spoke is 255. After each spoke is rendered, the alpha value of the next spoke's color is reduced by a fixed amount (m_AlphaDecrement).

The thickness of the spoke also varies with the size of the CircularProgressControl.

The calculation and rendering are done in the PaintEventHandler of the control.

protected override void OnPaint(PaintEventArgs e)
{
// All the paintin will be handled by us.
//base.OnPaint(e);

e.Graphics.InterpolationMode =
System.Drawing.Drawing2D.InterpolationMode.HighQualityBicubic;
e.Graphics.SmoothingMode =
System.Drawing.Drawing2D.SmoothingMode.HighQuality;

// Since the Rendering of the spokes is dependent upon the current size of the
// control, the following calculation needs to be done within the Paint eventhandler.
int alpha = m_AlphaStartValue;
int angle = m_StartAngle;
// Calculate the location around which the spokes will be drawn
int width = (this.Width < this.Height) ? this.Width : this.Height;
m_CentrePt = new PointF(this.Width / 2, this.Height / 2);
// Calculate the width of the pen which will be used to draw the spokes
m_Pen.Width = (int)(width / 15);
if (m_Pen.Width < MINIMUM_PEN_WIDTH)
m_Pen.Width = MINIMUM_PEN_WIDTH;
// Calculate the inner and outer radii of the control.
// The radii should not be less than the
// Minimum values
m_InnerRadius = (int)(width * (140 / (float)800));
m_OuterRadius = (int)(width * (250 / (float)800));

// Render the spokes
for (int i = 0; i < m_SpokesCount; i++)
{
PointF pt1 = new PointF(m_InnerRadius *
PointF pt2 = new PointF(m_OuterRadius *

pt1.X += m_CentrePt.X;
pt1.Y += m_CentrePt.Y;
pt2.X += m_CentrePt.X;
pt2.Y += m_CentrePt.Y;
m_Pen.Color = Color.FromArgb(alpha, this.TickColor);
e.Graphics.DrawLine(m_Pen, pt1, pt2);

if (Rotation == Direction.CLOCKWISE)
{
angle -= m_AngleIncrement;
}
else if (Rotation == Direction.ANTICLOCKWISE)
{
angle += m_AngleIncrement;
}

}
}

When the Start API is called, a Timer, whose TickInterval is equal to the value of the Interval property of the CircularProgressControl, is started. Upon each Tick of the timer, the angle of the first spoke is increased or decreased based on the Rotation property, and then the Invalidate() method is called which forces the repaint of the control. The Stop API stops the timer.

## Optimized Circular Progress Control

In the Optimized Circular Progress Control, I have taken out the points calculation part from the OnPaint method in order to improve the control's performance and moved it to another method called CalculateSpokePoints. This method will be called in the constructor, when the Rotation property is changed and also when the size of the control is changed either at runtime or at design time (this is handled by subscribing to the ClientSizeChanged event). I have also defined a data structure to store the start point and end point of each spoke.

struct Spoke
{
public PointF StartPoint;
public PointF EndPoint;

public Spoke(PointF pt1, PointF pt2)
{
StartPoint = pt1;
EndPoint = pt2;
}
}

In the CalculateSpokePoints method, the points are calculated and encapsulated in the Spoke structure and stored in the m_SpokePoints.

/// <summary>
/// Calculate the Spoke Points and store them
/// </summary>
private void CalculateSpokesPoints()
{
m_Spokes = new List<Spoke>();

// Calculate the angle between adjacent spokes
m_AngleIncrement = (360 / (float)m_SpokesCount);
// Calculate the change in alpha between adjacent spokes
m_AlphaChange = (int)((255 - m_AlphaLowerLimit) / m_SpokesCount);

// Calculate the location around which the spokes will be drawn
int width = (this.Width < this.Height) ? this.Width : this.Height;
m_CentrePt = new PointF(this.Width / 2, this.Height / 2);
// Calculate the width of the pen which will be used to draw the spokes
m_Pen.Width = (int)(width / 15);
if (m_Pen.Width < MINIMUM_PEN_WIDTH)
m_Pen.Width = MINIMUM_PEN_WIDTH;
// Calculate the inner and outer radii of the control.
//The radii should not be less than the Minimum values

float angle = 0;

for (int i = 0; i < m_SpokesCount; i++)
{
PointF pt1 = new PointF(m_InnerRadius * (float)Math.Cos(
PointF pt2 = new PointF(m_OuterRadius * (float)Math.Cos(

pt1.X += m_CentrePt.X;
pt1.Y += m_CentrePt.Y;
pt2.X += m_CentrePt.X;
pt2.Y += m_CentrePt.Y;

// Create a spoke based on the points generated
Spoke spoke = new Spoke(pt1, pt2);
// Add the spoke to the List

if (Rotation == Direction.CLOCKWISE)
{
angle -= m_AngleIncrement;
}
else if (Rotation == Direction.ANTICLOCKWISE)
{
angle += m_AngleIncrement;
}
}
}

The Alpha value of the spoke drawn at 0 degree angle is calculated as follows

/// <summary>
/// Calculate the Alpha Value of the Spoke drawn at 0 degrees angle
/// </summary>
private void CalculateAlpha()
{
if (this.Rotation == Direction.CLOCKWISE)
{
if (m_StartAngle >= 0)
{
m_AlphaStartValue = 255 - (((int)((
m_StartAngle % 360) / m_AngleIncrement) + 1) *
m_AlphaChange);
}
else
{
m_AlphaStartValue = 255 - (((int)((360 +
(m_StartAngle % 360)) / m_AngleIncrement) + 1) *
m_AlphaChange);
}
}
else
{
if (m_StartAngle >= 0)
{
m_AlphaStartValue = 255 - (((int)((360 - (
m_StartAngle % 360)) / m_AngleIncrement) + 1) *
m_AlphaChange);
}
else
{
m_AlphaStartValue = 255 - (((int)(((
360 - m_StartAngle) % 360) / m_AngleIncrement) +
1) * m_AlphaChange);
}
}
}

Now the OnPaint method looks like this

/// <summary>
/// Handles the Paint Event of the control
/// </summary>
/// <param name="e">PaintEventArgs</param>
protected override void OnPaint(PaintEventArgs e)
{
e.Graphics.InterpolationMode =
System.Drawing.Drawing2D.InterpolationMode.HighQualityBicubic;
e.Graphics.SmoothingMode = System.Drawing.Drawing2D.SmoothingMode.HighQuality;

int alpha = m_AlphaStartValue;

// Render the spokes
for (int i = 0; i < m_SpokesCount; i++)
{
m_Pen.Color = Color.FromArgb(alpha, this.TickColor);
e.Graphics.DrawLine(m_Pen, m_Spokes[i].StartPoint,
m_Spokes[i].EndPoint);

alpha -= m_AlphaChange;
if (alpha < m_AlphaLowerLimit)
alpha = 255 - m_AlphaChange;
}
}

Each time the Timer.Elapsed occurs, I am manipulating the m_AlphaStartValue so that the spokes' alpha value keeps changing.

## Matrix Circular Progress Control

I have further modified the OptimizedCircularProgressControl to create this control. In the Paint method, I am employing the Translation and Rotation transformations.

/// <summary>
/// Handles the Paint Event of the control
/// </summary>
/// <param name="e">PaintEventArgs</param>
protected override void OnPaint(PaintEventArgs e)
{
e.Graphics.InterpolationMode =
System.Drawing.Drawing2D.InterpolationMode.HighQualityBicubic;
e.Graphics.SmoothingMode = System.Drawing.Drawing2D.SmoothingMode.HighQuality;

// Perform a Translation so that the centre of the control
// is the centre of Rotation
e.Graphics.TranslateTransform(m_CentrePt.X, m_CentrePt.Y,
System.Drawing.Drawing2D.MatrixOrder.Prepend);
// Perform a Rotation about the control's centre
e.Graphics.RotateTransform(m_StartAngle,
System.Drawing.Drawing2D.MatrixOrder.Prepend);

int alpha = 255;

// Render the spokes
for (int i = 0; i < m_SpokesCount; i++)
{
m_Pen.Color = Color.FromArgb(alpha, this.TickColor);
e.Graphics.DrawLine(m_Pen, m_Spokes[i].StartPoint,
m_Spokes[i].EndPoint);

alpha -= m_AlphaChange;
if (alpha < m_AlphaLowerLimit)
alpha = 255 - m_AlphaChange;
}

// Perform a reverse Rotation and Translation to obtain the
// original Transformation
e.Graphics.RotateTransform(-m_StartAngle,
System.Drawing.Drawing2D.MatrixOrder.Append);
e.Graphics.TranslateTransform(-m_CentrePt.X, -m_CentrePt.Y,
System.Drawing.Drawing2D.MatrixOrder.Append);
}

The angle of rotation is changed in the Timer.Elapsed event handler.

When you compile the attached source code (Optimized Progress Control) and execute it, you will see a Form in which I have place the 3 Controls side by side.

## Note

While using OptimizedCircularControl, if you are setting the StartAngle by yourself, make sure that you set the Rotation property first.

## Share

 Software Developer United States
An individual with more than a decade of experience in desktop computing and mobile app development primarily on the Microsoft platform. He loves programming in C#, WPF & XAML related technologies.
Current interests include web application development, developing rich user experiences across various platforms and exploring his creative side.

Ratish's personal blog: wpfspark.wordpress.com

 First PrevNext
 My vote of 5 version_2.01-Jul-11 2:20 version_2.0 1-Jul-11 2:20
 Re: My vote of 5 Ratish Philip3-Jul-11 4:44 Ratish Philip 3-Jul-11 4:44
 MFC Version of it. spinoza24-Jun-11 8:49 spinoza 24-Jun-11 8:49
 Re: MFC Version of it. Ratish Philip1-Jul-11 1:28 Ratish Philip 1-Jul-11 1:28
 My vote of 4 Slacker00728-Jan-11 0:34 Slacker007 28-Jan-11 0:34
 forgot to rate jeevgoran5-Nov-10 4:56 jeevgoran 5-Nov-10 4:56
 cool work jeevgoran5-Nov-10 4:54 jeevgoran 5-Nov-10 4:54
 Re: cool work Ratish Philip23-Nov-10 22:26 Ratish Philip 23-Nov-10 22:26
 My vote of 5 Member 366671417-Aug-10 1:54 Member 3666714 17-Aug-10 1:54
 Re: My vote of 5 Ratish Philip23-Nov-10 22:25 Ratish Philip 23-Nov-10 22:25
 Pleasure to see MFC VC+++ Implementation comberti3-Mar-10 3:56 comberti 3-Mar-10 3:56
 How can I use this great control running on large waiting process Edward11114-Oct-09 14:28 Edward111 14-Oct-09 14:28
 Re: How can I use this great control running on large waiting process [modified] Ratish Philip25-Oct-09 15:50 Ratish Philip 25-Oct-09 15:50
 Re: How can I use this great control running on large waiting process kjward13-Dec-09 7:10 kjward 13-Dec-09 7:10
 Thanks karenpayne2-Sep-09 7:43 karenpayne 2-Sep-09 7:43
 Re: Thanks Ratish Philip2-Sep-09 19:03 Ratish Philip 2-Sep-09 19:03
 nice work ! BillWoodruff25-Aug-09 0:06 BillWoodruff 25-Aug-09 0:06
 Re: nice work ! Ratish Philip25-Aug-09 1:10 Ratish Philip 25-Aug-09 1:10
 Re: nice work ! BillWoodruff25-Aug-09 3:55 BillWoodruff 25-Aug-09 3:55
 Allright Yves24-Aug-09 13:16 Yves 24-Aug-09 13:16
 Re: Allright Ratish Philip24-Aug-09 15:14 Ratish Philip 24-Aug-09 15:14
 Re: Misleading title? Ratish Philip23-Aug-09 14:48 Ratish Philip 23-Aug-09 14:48
 Re: Misleading title? Ratish Philip24-Aug-09 7:36 Ratish Philip 24-Aug-09 7:36
 Last Visit: 20-Jun-19 1:37     Last Update: 20-Jun-19 1:37 Refresh 12 Next »