Mobile Development at U2U Consult

Based in Brussels, Belgium, U2U Consult has been offering consulting & development services in the EMEA region for over 10 years. We offer mobile development on all platforms from Apple to Android & Microsoft.

Here is (yet another) WPF circular busy indicator control based on Sacha Barber's Circular Progress Bar. This type of control is useful to indicate that a part of your user interface is waiting for the result of an asynchronous call. The user control is hosts a Canvas in which 9 circles are displayed, with decreasing opacity. A rotation transformation produces the spinning effect. Here's its default look:

The canvas is embedded in a Viewbox for easy resizing. To keep the circles round, the control is kept square (you might want to read this again ;-). This is done by binding its Width to its Height. It's a two-way binding, so you can set either property to set the control's size:

The CPU-consuming rotation is only triggered when the Visibility is set to Visible. The control keeps a low GUI profile: it is by default invisible, its background is transparent, it even has a zero opacity:

The Fill property of the ellipses is bound to the control's Foreground property, through a Style. This is very intuitive, and requires no extra dependency properties:

<Style

TargetType="Ellipse">

<Setter Property="Width" Value="20" />

<Setter Property="Height" Value="20" />

<Setter Property="Stretch" Value="Fill" />

<Setter Property="Fill">

<Setter.Value>

<Binding Path="Foreground">

<Binding.RelativeSource>

<RelativeSource

Mode="FindAncestor"

AncestorType="{x:Type local:CircularProgressBar}" />

</Binding.RelativeSource>

</Binding>

</Setter.Value>

</Setter>

</Style>

Remember that the Foreground property is more than just a color, it can be any type of Brush. Here are some examples:

SolidBrush

RadialGradientBrush

ImageBrush

To give you control over the spinning speed, I created a dependency property called RotationsPerMinute:

///<summary>

/// Spinning Speed. Default is 60, that's one rotation per second.

///</summary>

publicstaticreadonlyDependencyProperty RotationsPerMinuteProperty =

DependencyProperty.Register(

"RotationsPerMinute",

typeof(double),

typeof(CircularProgressBar),

newPropertyMetadata(60.0));

There is a similar dependency property that allows to to specify the delay before the control becomes visible: StartupDelay. This is actually why I needed to start with a zero Opacity. When the control becomes visible, we wait for a short while before setting its Opacity to 1. This keeps the user interface nice and easy without too briefly flashing indicators. I (re-)used the animation timer to implement the delay. This way we are sure not to freeze the user interface. To show the user that something was started, we show a wait cursor while ... waiting. When the control becomes really visible, we reset the cursor to its original image: