Introduction

This article deals with the full coding and implementation of a waiting control in WPF.

Download WaitingControl.zip - 302.64 KB

Background

Gone are those days when we used hour glass to show a busy status; we live in the arena of WPF. I wanted to implement a UI which looks like a progress bar in IE 7. This is particularly very useful when we can't estimate the progress. eg) A search page which pulls the data from the database can be never estimated that the result will be returned in 1 sec or 10 sec.

I googled a lot to get some help on this. Being my whole effort in vain, I finally settled down in building my own. I am sure that this code should help a few developers.

Using the code

The code is straight forward which has two circles filled with gradient color and a story board which runs endless, unless stopped. You can change the color, gradient etc as you wish.

The attached project comes with a Control library (the control itself) and a sample application which implements the control.

<UserControl.Resources> 
    <Storyboard x:Key="Spin" x:Name="Spin"> 
        <DoubleAnimationUsingKeyFrames BeginTime="00:00:00" 
        RepeatBehavior="Forever" Storyboard.TargetName="path" 
        Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[2].(RotateTransform.Angle)"> 
            <SplineDoubleKeyFrame KeyTime="00:00:00" Value="0"/> 
            <SplineDoubleKeyFrame KeyTime="00:00:00.7000000" Value="360"/>
        </DoubleAnimationUsingKeyFrames>
    </Storyboard>
</UserControl.Resources>

The above storyboard rotates the doughnut shaped control by 360° in .7 seconds and repeats the animation forever.

<Path.Fill>
    <LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0"> 
        <GradientStop Color="#FF000000" Offset="0"/> 
        <GradientStop Color="#FFC5D1F9" Offset="1"/> 
    </LinearGradientBrush> 
</Path.Fill>

The above XAML should be your part of interest if you want to change the color. I would recommend using Microsoft Expression Blends for this.

13 routed events are implemented for the control which triggers on the 4 actions namely Start, End, Pause, Resume. The State property gives the state of the control.

ThrowsErrorOnInvalidOperation property gets / sets whether an invalid operation error is to be thrown eg) resume operation is invalid unless the control is paused.

Points of Interest

I struggled a lot before I could implement the routed events. I guess that this project should be a perfect one to learn on "Implementing routed events in your control".

Please feel free to write me in case of any support needed on this context. I would also like to hear from you, if this code was useful.

History

Version 1.0.0.0 : Control released with Start, End methods with its events

Version 2.0.0.0 :

Control released with Start, End, Pause, Resume methods and corresponding events.
State property implemented.
Invalid operation errors are introduced.

Version 2.1.0.0 :

Bugs fixed with the newly added methods.
Event names changed as per microsoft standards.
ThrowsErrorOnInvalidOperation property added.

Download WaitingControl.zip - 302.64 KB

Waiting Control / IE 7 Progressbar Control using WPF