Click here to Skip to main content
12,761,780 members (36,989 online)
Click here to Skip to main content
Add your own
alternative version

Tagged as


21 bookmarked
Posted 10 Sep 2013

Win8MarqueeProgressIndicator Control

, 5 Dec 2013 CPOL
Rate this:
Please Sign up or sign in to vote.
This article presents a user-drawn control, named Win8MarqueeProgressIndicator.

Introduction [^]

Win8 Marquee Progress Indicator Test Demonstration

This short article presents a control, named Win8MarqueeProgressIndicator, that was requested by a reader of Win8ProgressRing Control. Basically, this control flattens the Win8ProgressRing control.

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

The symbol [^] returns the reader to the top of the Table of Contents.

Visual Properties [^]

Win8 Marquee Progress Indicator

The Win8MarqueeProgressIndicator control has two properties that form the user's visual image.

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_width by either dragging the control's resizing handles or by specifying the Control_Width property. After some computations, the control_height is set equal to the indicator_diameter.

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 [^]

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

Name       Description
Animate       Gets or sets a value indicating whether the control moves the indicators automatically. If true, the control moves the indicators without further intervention; if false, the control moves the indicators only when the Pulse method is invoked. The default value is true.
Control_Width       Gets or sets the width of the control. When changed, this property also causes other internal values for the control to be changed. The value supplied for Control_Width must be a multiple of 33 that is greater than or equal to 99 and less than or equal to 462. The default value is 462 pixels. When Control_Width changes, the following method is invoked.
// ********************** adjust_control_dimensions_from_width

void adjust_control_dimensions_from_width ( int new_width )

    indicator_diameter = round ( 
                             ( double ) new_width / 
                             ( double ) MAXIMUM_POSITIONS );

    control_width = indicator_diameter * MAXIMUM_POSITIONS;
    control_height = indicator_diameter;

    this.Height = control_height;
Indicator_Color       Gets or sets the color of the indicators in the Win8MarqueeProgressIndicator control. The default value is Color.White.
Refresh_Rate       Gets or sets 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 [^]

Win8 Marquee Progress Indicator Movement

The Win8MarqueeProgressIndicator 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_Width 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 rightward along the width of the control. At the far right, the indicators wrap around to the far left. Initially the indicators are centered within the control width.

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

Starting with the most rightward indicator, it is moved to the next allowed indicator position (i.e., the indicator in position 18 is moved to position 20). To the right of control center are positions that will cause the indicators to appear to be accelerating. When an indicator is moved to position 32, its next position will be 0. Now as the indicator moves rightward it should appear to decelerate.

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-- )
        int     index;
        double  position;
        int     x;
        int     y;

        index = position_indices [ i ];

        if ( index >= POSITIONS )
            index = 0;
        position = positions [ index ];

        x = round ( position *
                    ( double ) indicator_diameter );
        y = 0;

        rectangle.Location = new Point ( x, y );
        rectangle.Size = new Size ( indicator_diameter,
                                    indicator_diameter );
        graphics.FillEllipse ( brush, rectangle );

        position_indices [ i ] = index;

    brush.Dispose ( );

Graphics Buffer [^]

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 Win8MarqueeProgressIndicator control.

GraphicsBuffer has been included within the control.

Conclusion [^]

This article has presented a control that provides a Windows 8 style marquee progress indicator.

References [^]

Development Environment [^]

Win8MarqueeProgressIndicator 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 [^]

09/05/2013   Original Article


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

QuestionAnimation... Pin
SledgeHammer015-Dec-13 9:12
memberSledgeHammer015-Dec-13 9:12 
AnswerRe: Animation... Pin
gggustafson5-Dec-13 9:44
professionalgggustafson5-Dec-13 9:44 
QuestionVery nice sir Pin
Sacha Barber5-Dec-13 3:59
mvpSacha Barber5-Dec-13 3:59 
AnswerRe: Very nice sir Pin
gggustafson5-Dec-13 5:08
professionalgggustafson5-Dec-13 5:08 
GeneralMy vote of 5 Pin
Paul @ The Computer Station16-Sep-13 2:38
groupPaul @ The Computer Station16-Sep-13 2:38 
GeneralRe: My vote of 5 Pin
gggustafson16-Sep-13 7:37
membergggustafson16-Sep-13 7:37 
GeneralAwesome! Pin
Ravi Bhavnani11-Sep-13 8:30
professionalRavi Bhavnani11-Sep-13 8:30 
GeneralRe: Awesome! Pin
gggustafson11-Sep-13 11:51
membergggustafson11-Sep-13 11:51 

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.

Permalink | Advertise | Privacy | Terms of Use | Mobile
Web01 | 2.8.170217.1 | Last Updated 5 Dec 2013
Article Copyright 2013 by gggustafson
Everything else Copyright © CodeProject, 1999-2017
Layout: fixed | fluid