Click here to Skip to main content
15,355,050 members
Articles / Desktop Programming / Windows Forms
Article
Posted 14 Sep 2009

Stats

61.6K views
2.8K downloads
51 bookmarked

Progress Indicator a'la Google

Rate me:
Please Sign up or sign in to vote.
4.66/5 (19 votes)
15 Sep 2009CPOL4 min read
This article presents code for a WinForms implementation of the Google-like compact progress indicator.

GoogleProgressIndicator/googleprogressindicator.png

Introduction

If you have been looking for an indeterminate progress indicator control for a WinForms application, this may be useful. It is modeled on the relatively new GoogleTM progress indicator (an annulus with a rotating indicator). The control has properties to change its color, size, rotation speed, and type (externally pulsed or animated).

Background

Although DirectX, XNA, and WPF have gained acceptance, the development of this control was limited to Drawing2D. Many users of WinForms may not have the prerequisites for any of the more advanced methods.

Using the Code

The run-time view of this control is controlled by the following properties and methods.

Properties

Name Type Units Default Purpose
Animate bool Boolean true Starts (true) and stops (false) the indicator animation
AnnulusColor Color Color Pale Turquoise Sets or gets the base color of the annulus
BackgroundColor Color Color SystemColor.
Control
Sets or gets the background color of the control
IndicatorAngularAdvance int Degrees 10 Sets or gets the number of degrees that the indicator moves on each tick or pulse
IndicatorColor Color Color White Sets or gets the color of the rotating indicator
IndicatorType enum INDICATORTYPES ANIMATED Sets or gets whether the control is ANIMATED or PULSED
InnerRadius int Pixels 8 Sets or gets the radius of the annulus inner circle
OuterRadius int Pixels 12 Sets or gets the radius of the annulus outer circle
RefreshRate int Milliseconds 150 Sets or gets the timer tick interval (i.e., the time between control refreshes)
TransitionColor Color Color Gray Sets or gets the transition color at annulus mid-position

Methods

Name Result
Pulse Causes indicator to advance

Dimensions and Color Effects

GoogleProgressIndicator/googleprogressindicatordimensions.jpg

The control dimensions are determined by the OuterRadius (or) value. In the preceding figure, the outer rectangle (red) is the control client rectangle.

The effect of a gradually changing color is called a "blend". In this case, the effect is obtained by using a two-color linear gradient brush along a vertical with a linear blend from the starting color (AnnulusColor) to the ending color (TransitionColor). The blend pattern is specified by two equally sized arrays, named "positions" and "factors". Both arrays contain proportions. The positions array contains values from 0.0F to 1.0F that define proportional distances along the vertical. The factors array contains values from 0.0F to 1.0F that define proportional color from the starting to the ending color along the vertical. In the preceding figure, the values in parentheses are the positions and factors, respectively, for blending of the linear gradient brush.

The InnerRadius (ir) value determines the circle (actually ellipse) that will be excluded from the center of the control. The difference between the outer radius and the inner radius values is the annulus thickness. The annular thickness is also the diameter of the rotating indicator.

Building the Control

The control is built in sixteen steps.

Google Progress Indicator Construction Steps

Both the control's client rectangle and the outer bounding rectangle are specified by the value of OuterRadius. In step two, the background is colored as BackgroundColor. Then the outer bounding rectangle is used to develop the outer region, first by creating a path from an ellipse and then by creating a region from the path. The inner bounding rectangle is specified by the value of InnerRadius and is used to develop the inner region. Regions are used to define the annulus by excluding the inner region from the outer region (step 8). Color is applied using a Linear Gradient Brush with a starting color of AnnulusColor and an ending color of TransitionColor. Blending is performed as described earlier. The annulus is built in its own graphics buffer and is only revised when a color- or size-changing event occurs.

The indicator is built in its own graphic buffer at every timer tick or whenever the control is pulsed. The indicator is initially drawn at the right center position of the annulus. Then a translation and a rotation transformation occur. Thereafter both graphics (annulus and indicator) are rendered to the screen.

Control Source Code

The source code was developed using the Microsoft Visual C# 2008 Express Edition. In the event that the reader downloads this development environment, the MSDN Help Library for the Visual C# 2008 Express Edition should also be downloaded. The source code in GoogleProgressIndicator.cs contains the source for the GraphicsBuffer class. The two classes appear in the same compilation unit so that a reference to an external class (i.e., GraphicsBuffer) is not required.

License

This article, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

Share

About the Author

gggustafson
Software Developer (Senior)
United States United States
In 1964, I was in the US Coast Guard when I wrote my first program. It was written in RPG (note no suffixing numbers). Programs and data were entered using punched cards. Turnaround was about 3 hours. So much for the "good old days!"

In 1970, when assigned to Washington DC, I started my MS in Mechanical Engineering. I specialized in Transportation. Untold hours in statistical theory and practice were required, forcing me to use the university computer and learn the FORTRAN language, still using punched cards!

In 1973, I was employed by the Norfolk VA Police Department as a crime analyst for the High Intensity Target program. There, I was still using punched cards!

In 1973, I joined Computer Sciences Corporation (CSC). There, for the first time, I was introduced to a terminal with the ability to edit, compile, link, and test my programs on-line. CSC also gave me the opportunity to discuss technical issues with some of the brightest minds I've encountered during my career.

In 1975, I moved to San Diego to head up an IR&D project, BIODAB. I returned to school (UCSD) and took up Software Engineering at the graduate level. After BIODAB, I headed up a team that fixed a stalled project. I then headed up one of the two most satisfying projects of my career, the Automated Flight Operations Center at Ft. Irwin, CA.

I left Anteon Corporation (the successor to CSC on a major contract) and moved to Pensacola, FL. For a small company I built their firewall, given free to the company's customers. An opportunity to build an air traffic controller trainer arose. This was the other most satisfying project of my career.

Today, I consider myself capable.

Comments and Discussions

 
GeneralMy vote of 5 Pin
Technoses10-Mar-12 1:58
MemberTechnoses10-Mar-12 1:58 
Very good artical
GeneralMy vote of 5 Pin
MC197215-Jul-11 2:46
MemberMC197215-Jul-11 2:46 
GeneralThanks Pin
Wimmo15-Sep-09 11:34
MemberWimmo15-Sep-09 11:34 
GeneralRe: Thanks Pin
sam.hill15-Sep-09 14:08
Membersam.hill15-Sep-09 14:08 
GeneralRe: Thanks Pin
Wimmo15-Sep-09 22:28
MemberWimmo15-Sep-09 22:28 
GeneralRe: Thanks Pin
sam.hill16-Sep-09 5:52
Membersam.hill16-Sep-09 5:52 
GeneralRe: Thanks Pin
bscaer28-Sep-09 4:53
Memberbscaer28-Sep-09 4:53 
GeneralRe: Thanks Pin
Pascal Ganaye21-Aug-11 10:04
MemberPascal Ganaye21-Aug-11 10:04 
GeneralThanks for Corrections Pin
gggustafson15-Sep-09 4:11
mvagggustafson15-Sep-09 4:11 
GeneralRe: Thanks for Corrections Pin
sam.hill15-Sep-09 5:11
Membersam.hill15-Sep-09 5:11 
GeneralMy vote of 1 Pin
sam.hill14-Sep-09 17:55
Membersam.hill14-Sep-09 17:55 
GeneralRe: My vote of 1 Pin
RK KL15-Sep-09 8:14
MemberRK KL15-Sep-09 8:14 
GeneralRe: My vote of 1 Pin
sam.hill15-Sep-09 13:48
Membersam.hill15-Sep-09 13:48 
GeneralRe: My vote of 1 Pin
sam.hill15-Sep-09 14:03
Membersam.hill15-Sep-09 14:03 

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.