Click here to Skip to main content
65,938 articles
CodeProject is changing. Read more.
Articles
(untagged)

Waiting Control / IE 7 Progressbar Control using WPF

0.00/5 (No votes)
13 May 2008 1  
Timeless or non-progress based waiting / progress control using WPF

Introduction

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

waiting2.png

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

License

This article has no explicit license attached to it but may contain usage terms in the article text or the download files themselves. If in doubt please contact the author via the discussion board below.

A list of licenses authors might use can be found here