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
I work for Microsoft on MS technologies for application development. My interests include .net, WCF, Azure, Windows Phone, ASP.net, SL, WCF, WPF and many more.
You can visit my site at http://www.jebarson.info
Follow me on twitter @jebarson007