Click here to Skip to main content
11,931,104 members (66,485 online)
Click here to Skip to main content
Add your own
alternative version

Tagged as


45 bookmarked

Win8ProgressRing Control

, 27 Mar 2015 CPOL
Rate this:
Please Sign up or sign in to vote.
This article presents a user-drawn control, named Win8ProgressRing that mimics the Windows 8 Progress Ring.


Introduction Table of Contents

  Win8 Progress Ring Test Demonstration

This short article presents a control, named Win8ProgressRing, that mimics the Windows 8 Progress Ring.

Only a brief discussion of its implementation will be provided. In the following discussions, properties that are specified by the developer are displayed in BoldMixedCase text. Variables, used internally by the software are displayed in italicized_lowercase text.


Table of Contents


Visual Properties Table of Contents

Win8 Progress Ring Properties

The Win8ProgressRing control has two properties that form the user's visual image. In the figure to the right, the control's boundary is drawn in red.


The developer specifies the control's top-left corner by dragging the control from the ToolBox to a position on the form. This position becomes ( 0, 0 ) in the control's graphic environment. The developer specifies the control_height by either dragging the control's resizing handles or by specifying the Control_Height property. The control_width is set equal to the control_height.

The indicator color defaults to white. To change the indicator color, the developer specifies the new color through the Indicator_Color property.

The control's background color is transparent and cannot be changed.



Control Properties Table of Contents

The Win8ProgressRing control has the following properties available to the developer:

Name      Description
Animate      Gets or sets a value indicating whether the control rotates the indicators automatically. If true, the control animates the indicator rotation; if false, the control moves the indicators only when the Pulse method is invoked. The default value is true.
Control_Height      Gets or sets the height of the control. When changed, this property also causes other internal values for the control to be changed. The default value is 100 pixels.
// ********************* adjust_control_dimensions_from_height

void adjust_control_dimensions_from_height ( int new_height )

    indicator_radius = round ( ( double ) new_height / 
                               ( double ) SIZE_FACTOR );
    indicator_diameter = 2 * indicator_radius;

    control_height = SIZE_FACTOR * indicator_radius;
    control_width = control_height;

    outer_radius = control_height / 2;
    inner_radius = outer_radius - indicator_diameter;

    indicator_center_radius = inner_radius + 

    this.Height = control_height;
    this.Width = control_width;
Indicator_Color      Gets or sets the color of the indicators in the Win8ProgressRing control. The default value is Color.White.
Refresh_Rate      The time, in milliseconds, between movements of the indicators. The value must be greater than or equal to ten, and less than or equal to 200. The default is 100 milliseconds.

The Pulse method is used to rotate the indicators once each time it is invoked. Its signature is:

public void Pulse ( )


Implementation Table of Contents

Win8 Progress Ring Control Computations

The Win8ProgressRing control is a User-Drawn Control. Parts of the control are drawn when the control's OnPaint method is invoked.

The control's graphic is made up of two distinct graphic images: the background graphic and the indicator graphic.

Once drawn, the background graphic does not need to be redrawn unless Control_Height is changed. The indicator graphic must be redrawn when the background graphic is redrawn; when the animation changes the indicators' positions; or when the indicator color changes.


The control is made up of six circular indicators that travel around the center of the control. Initially the indicators are grouped together starting at 90 degrees.


The control uses Windows coordinates with the x-axis values increasing to the right; y-axis values increasing downward; and angles measured clockwise from the x-axis.

Starting with the most clockwise indicator, it is moved 11.25 degrees clockwise. If the indicator ends up in the fast movement area of the control, on the next pass, it will be moved some multiple of 11.25 degrees.

The angular advance (11.25) was derived from the desire to have eight indicators displayed in a quadrant. This results in 32 indicators around the control. Dividing 360 by 32 yields the advance of 11.25 degrees.

Because the trigonometric functions Sine and Cosine are invoked at each indicator advance, two tables are generated at initialization that contain 1440 values of the trigonometric functions in increments of 0.25 degrees.

Each of the six indicators is an instance of the Indicator class.

// *********************************************** class Indicator

public class Indicator
    double  degrees = 0.0;
    double  fast = 1.0;

    // ************************************************* Indicator

    public Indicator ( )

        Degrees = 0.0;
        Fast = 1.0;

    // ************************************************* Indicator

    public Indicator ( double  degrees )

        Degrees = degrees;
        Fast = 1.0;

    // *************************************************** Degrees

    public double Degrees

            return ( degrees );
            degrees = value;

    // ****************************************************** Fast

    public double Fast

            return ( fast );
            fast = value;

    } // class Indicator

Finally, draw_indicator_graphic is invoked each time the interval timer raises the elapsed event.

// ************************************ draw_indicator_graphic

void draw_indicator_graphic (  Graphics graphics )
    Brush       brush = new SolidBrush ( Indicator_Color );
    Rectangle   rectangle = new Rectangle ( );

    for ( int i = ( MAXIMUM_INDICATORS - 1 );
              ( i >= 0 );
              i-- )
        double  degrees = indicators [ i ].Degrees;
        int     dx;
        int     dy;

        if ( degrees < 0.0 )
            degrees += 360.0;

        dx = round ( ( double ) indicator_center_radius *
                     cos ( degrees ) ) +
        dy = indicator_center_radius -
             round ( ( double ) indicator_center_radius *
                     sin ( degrees ) );

        rectangle.Location = new Point ( dx, dy );
        rectangle.Size = new Size ( indicator_diameter,
                                    indicator_diameter );
        graphics.FillEllipse ( brush, rectangle );

        degrees -= ( double ) indicators [ i ].Fast *

        if ( indicators [ i ].Fast > 1.0 )
            indicators [ i ].Fast += 0.25;

        if ( degrees < 0.0 )
            indicators [ i ].Fast = 1.25;
        else if ( degrees < START_AT )
            indicators [ i ].Fast = 1.0;

        indicators [ i ].Degrees = degrees;

    brush.Dispose ( );


Graphics Buffer Table of Contents

The GraphicsBuffer class contains an off-screen bitmap used to draw graphic objects without flicker. Although .Net provides a Double Buffered Graphics capability, it is overkill for the Win8ProgressRing control.

GraphicsBuffer has been included within the control.


Conclusion Table of Contents

This article has presented a control that mimics the Windows 8 Progress Ring.


References Table of Contents


Development Environment Table of Contents

Win8ProgressRing control was developed in the following environment:

     Microsoft Windows 7 Professional Service Pack 1
     Microsoft Visual Studio 2008 Professional
     Microsoft .Net Framework Version 3.5 SP1
     Microsoft Visual C# 2008


History Table of Contents

09/03/2013   Original Article
03/27/2015   Added Demonstration Executable download; performed minor editing; regenerated Table of Contents with the Auto-TOC Generator


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


About the Author

Software Developer (Senior)
United States United States
I started programming more than 42 years ago using AutoCoder and RPG (note no suffixing numbers). Programs and data were entered using punched cards. Turnaround between submitting a job for compilation and execution was about 3 hours. So much for the "good old days!" Today, I particularly enjoy programming real-time software. I consider myself capable in WinForms, Mobile Apps, and C# although there are occasions that I yearn to return to C and the Win32 API.

You may also be interested in...

Comments and Discussions

Praisecomment Pin
Member 1215837621-Nov-15 22:36
memberMember 1215837621-Nov-15 22:36 
GeneralRe: comment Pin
gggustafson22-Nov-15 6:25
professionalgggustafson22-Nov-15 6:25 
SuggestionDemo project doesn't run out of the box.... Pin
Johnny J.24-Mar-15 0:01
professionalJohnny J.24-Mar-15 0:01 
GeneralRe: Demo project doesn't run out of the box.... Pin
gggustafson24-Mar-15 2:54
professionalgggustafson24-Mar-15 2:54 
GeneralRe: Demo project doesn't run out of the box.... Pin
Johnny J.24-Mar-15 3:05
professionalJohnny J.24-Mar-15 3:05 
GeneralRe: Demo project doesn't run out of the box.... Pin
gggustafson24-Mar-15 3:20
professionalgggustafson24-Mar-15 3:20 
GeneralRe: Demo project doesn't run out of the box.... Pin
Johnny J.24-Mar-15 3:33
professionalJohnny J.24-Mar-15 3:33 
GeneralRe: Demo project doesn't run out of the box.... Pin
gggustafson27-Mar-15 9:36
professionalgggustafson27-Mar-15 9:36 
GeneralRe: Demo project doesn't run out of the box.... Pin
Johnny J.27-Mar-15 12:55
professionalJohnny J.27-Mar-15 12:55 
Questionmy vot of +5 Pin
abbaspirmoradi5-Dec-13 10:29
professionalabbaspirmoradi5-Dec-13 10:29 
AnswerRe: my vot of +5 Pin
gggustafson5-Dec-13 11:34
professionalgggustafson5-Dec-13 11:34 
GeneralMy vote of 5 Pin
Jayanta Chatterjee28-Nov-13 20:11
memberJayanta Chatterjee28-Nov-13 20:11 
GeneralRe: My vote of 5 Pin
gggustafson29-Nov-13 6:25
professionalgggustafson29-Nov-13 6:25 
SuggestionMy Vote 5, Visualstudiogallery Pin
Klaus Ruttkowski21-Nov-13 0:57
memberKlaus Ruttkowski21-Nov-13 0:57 
GeneralRe: My Vote 5, Visualstudiogallery Pin
gggustafson21-Nov-13 3:13
professionalgggustafson21-Nov-13 3:13 
GeneralMy vote of 5 Pin
Athari5-Sep-13 12:14
professionalAthari5-Sep-13 12:14 
GeneralRe: My vote of 5 Pin
gggustafson5-Sep-13 12:53
membergggustafson5-Sep-13 12:53 
Questionnice Pin
CIDev5-Sep-13 8:17
memberCIDev5-Sep-13 8:17 
AnswerRe: nice Pin
gggustafson5-Sep-13 11:55
membergggustafson5-Sep-13 11:55 
GeneralNice work Pin
One-T4-Sep-13 21:20
memberOne-T4-Sep-13 21:20 
GeneralRe: Nice work Pin
gggustafson5-Sep-13 4:39
membergggustafson5-Sep-13 4:39 
GeneralMy vote of 5 Pin
Roberto Guerzoni4-Sep-13 21:19
memberRoberto Guerzoni4-Sep-13 21:19 
GeneralRe: My vote of 5 Pin
gggustafson5-Sep-13 4:40
membergggustafson5-Sep-13 4:40 
GeneralMy vote of 5 Pin
patel_pratik4-Sep-13 20:25
memberpatel_pratik4-Sep-13 20:25 
GeneralRe: My vote of 5 Pin
gggustafson5-Sep-13 4:40
membergggustafson5-Sep-13 4:40 
GeneralMy vote of 5 Pin
hyblusea4-Sep-13 17:52
memberhyblusea4-Sep-13 17:52 
GeneralRe: My vote of 5 Pin
gggustafson4-Sep-13 19:29
membergggustafson4-Sep-13 19:29 
QuestionRequest Pin
Ravi Bhavnani4-Sep-13 11:49
professionalRavi Bhavnani4-Sep-13 11:49 
AnswerRe: Request Pin
gggustafson4-Sep-13 14:10
membergggustafson4-Sep-13 14:10 
QuestionNice one! Pin
Ravi Bhavnani4-Sep-13 11:47
professionalRavi Bhavnani4-Sep-13 11:47 
AnswerRe: Nice one! Pin
gggustafson4-Sep-13 14:09
membergggustafson4-Sep-13 14:09 

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.

| Advertise | Privacy | Terms of Use | Mobile
Web04 | 2.8.151126.1 | Last Updated 27 Mar 2015
Article Copyright 2013 by gggustafson
Everything else Copyright © CodeProject, 1999-2015
Layout: fixed | fluid