This short article presents a
Win8MarqueeProgressIndicator, that was requested by a reader of
Win8ProgressRing Control. Basically, this control flattens the
Only a brief discussion of its implementation will be provided.
the following discussions, properties that are specified by
the developer are displayed in
used internally by the software are displayed in
Table of Contents
The symbol [^] returns the reader
to the top of the Table of Contents.
Visual Properties [^]
The Win8MarqueeProgressIndicator control has two properties that
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
After some computations, the
is set equal to the
The indicator color defaults to white. To change the indicator
color, the developer specifies the new color through the
The control's background color is transparent and cannot be
Control Properties [^]
The Win8MarqueeProgressIndicator control has the following
properties available to the developer:
|| || Description
| || || |
|| || Gets or sets a value indicating whether the control moves the
indicators automatically. If
true, the control
moves the indicators without further intervention; if
the control moves the indicators
only when the Pulse method is invoked. The default
value is true.
|| || 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
the following method is invoked.
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;
|| || Gets or sets the color of the indicators in the
Win8MarqueeProgressIndicator control. The default value is
|| || 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 ( )
The Win8MarqueeProgressIndicator control is a
User-Drawn Control. Parts of the control are drawn when the
OnPaint method is invoked.
The control's graphic is made up of two distinct
graphic images: the background graphic and the indicator
Once drawn, the background graphic does not need to be redrawn
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.
invoked each time the interval timer raises the elapsed event.
void draw_indicator_graphic ( Graphics graphics )
Brush brush = new SolidBrush ( Indicator_Color );
Rectangle rectangle = new Rectangle ( );
for ( int i = ( MAXIMUM_INDICATORS - 1 );
( i >= 0 );
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,
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
GraphicsBuffer has been included within the control.
This article has presented a control that provides a Windows 8
style marquee progress indicator.
Development Environment [^]
Win8MarqueeProgressIndicator control was developed in the following
| ||Microsoft Windows 7 Professional Service Pack 1 |
| ||Microsoft Visual Studio 2008 Professional |
| ||Microsoft .Net Framework Version 3.5 SP1 |
| ||Microsoft Visual C# 2008 |
|| || Original Article