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
