Arranging Shapes in a Circle with Expression Blend – Part One

Part One

A common UI metaphor in recent times is the circular wait cursor or progress indicator. This article shows some easy techniques within Expression Blend 2 that simplify creating this modern UI indicator. After showing how to easily layout multiple child elements in a 360-degree pattern, I will show animation techniques for spinning, sizing and fading sub-elements.

[Source code for article is available on CodeGallery]

Keeping Them Happy While Waiting

It’s a bad idea to start a long running task in your application and not provide concrete feedback to the user. If the user doesn’t know that you started downloading their requested file they will eventually click the download button again. To avoid this you must let them know that their work is under way.

At the minimum, you must alert them that the process has started. This immediate feedback is important to reassure the user that they did the right thing, plus it prevents multiple initiations of the process.

Additionally it is nice if you can convey how long the process will take. This permits the user to make an intelligent decision about what to do next. A coffee break might in order if I know that it’s going to take twenty minutes before I can install the downloaded file.

Finally, providing progress details can be beneficial. If you can display accurate information regarding the amount of time left before the task is finished, so much the better.

Ever since the first UI framework emerged, there have been attempts to provide standardized feedback to the end user. It has taken many forms over the past few decades.

Wait UI

Wait Cursor: One of the earliest attempts at user notification was the wait cursor, which an application would enable upon starting a task. The classic wait cursor is the hourglass or clock face. While this cursor is handy at letting the consumer know that the task has started it provides no other useful information.

ProgressBar: You’ve seen progress bars in action. These simple controls provide a lot of information to the end user. At a glance, you can see the task has started and how much of the task remains to be accomplished. Some versions of the progress bar shows informative text (example: 3 of 12 items downloaded) to provide even more details.

Wait UI in this Century

Change is a constant in the software industry. We are always on the lookout for a better, cleaner, prettier way to accomplish a given task. In the last couple years the circular animation has become a popular way to show wait UI.

Take Windows Vista for example. The busy cursor has morphed from an hourglass into a blue ring with an animated highlight buzzing ceaselessly about the blue band.

Figure 1: Busy cursor.

The Vista Sync Center sports a new icon that spins in the system tray. One glance at the arrows whirling about in the system tray tells you that your handheld device is synchronizing with your desktop.

Figure 2: Sync center animated icon.

The Web world has its share of circular eye candy too. Let’s turn to Silverlight for an example. When your browser encounters a Silverlight application it has to download the application XAP file to your local computer. Naturally during this process the Silverlight runtime displays its version of the ubiquitous 360-degree animation.

Figure 3: Sliverlight loading animation.

A couple of noteworthy items to observe with this animation. First, observe the progress text centered within the animation. Since the animation itself doesn’t provide progress information, the progress text is a useful addition. Second, this animation appears to be more of a pulsing action rather than a spinning action. It does this by making each blue dot grow larger and then suddenly hiding the dot. Each dot in the circle starts animating at a different time with the start time staggered around the circle. This animation is subtle yet curiously satisfying to watch.

Implementing a Circular Animation

In this article, I will show you how to create animations similar to the previous examples. I will use Expression Blend to create the WPF assets and animations. While all the demos are in WPF, rest assured that you could create Silverlight animations in nearly the same way.

Let us start by looking at the Vista busy cursor (see the following video). If you scrutinize this cursor, a few things are apparent. The UI consists of two circles. The center circle is white (or transparent) and is smaller than the outer circle. The outer circle is filled with a linear gradient that is light blue on the top and bottom and dark blue in the center. It also looks like there is a blue border on both circles.

Now watch the spinning animation. You should note that the gradients don’t appear to move. Instead, it looks like there is a semi-transparent ellipse that is superimposed over the band. This implies that it is the ellipse that is moving, not the underlying circles.

Video 1: Aero Busy Cursor

Now that you have a basic idea of the parts that make up the animation it’s time to open Expression Blend and make one for yourself.

The Basic Band

To get warmed up for the upcoming Blend design marathon you will start with a simple band animation.

1.	Open Expression Blend.
2.	Create a new project. I’m going to name mine CircularAnimation.
3.	Create a new container for the animation. It could be a Window, Page or UserControl. For my example I’m using a Page.
4.	Add an Ellipse to the Artboard. Choose the Shape palette on the Toolbox.
5.	Hold the Shift-key while drawing the Ellipse in the Artboard. This constrains the Ellipse to a circle.
6.	Change the Fill color. In the Property window choose the Brushes section. Click the Fill button, then the ‘No Brush’ button.
7.	Change the Ellipse border. Click the Stroke button. Click the GradientBrush button. The default colors are white and black for the gradient. Select each color selector in the color bar and choose an attractive color. Change the StrokeThickness to 12.

Admire your ring before moving to the next step.

Animate the Band

In this step you will animate the ring 360 degrees.

1.	Add a storyboard to the page.
2.	In the Objects and Timeline window click the Add (+) button.
3.	Choose a name for the storyboard.  I left mine at the default of "Storyboard1".
4.	In the Objects and Timeline Panel, click at the two second mark.
5.	Choose the Transform section in the Property pane. Now you need to specify a 360 rotation.  Since the default value for a RotateTransform is 0 degrees, you must be careful to specify an ending value of 359 degree to make the animation look correct.

That’s all for now.  Press F5 to run the application and watch the colors spin once about the circle. It should look similar to the following video (Video 2).

Video 2: Spinning Ring

Creating the Vista wait cursor

The key concept in this next demonstration is understanding how to spin a small ellipse around a center point. With a few rudimentary math skills you can make a circle move in an orbit about a central body. If you master one simple Expression Blend trick, however, you can be an ‘orbit’ master without writing a single line of code.

Create the Starter Ellipse

To start this section you will create another page and basic animation similar to the previous demonstration.

1.	Add a new Page to the demo application. Use the Project menu to change the startup item to your new item. For Example, in the accompanying screenshot I am changing the Startup item to MainWindow.xaml.
2.	Add a new Ellipse (circle) to the page. Create a 360 rotation animation similar to the one you created in the previous demo.

The Gradient Trick

Are you ready to master the orbiting gradient trick?

Applying a transform to a radial gradient brush is the secret sauce that makes this trick work. If you do it the right way you can mimic a small circle that is positioned on the edge of the real ellipse.

1.	Create the Gradient
2.	Select the ellipse and change the fill to a RadialGradient.
3.	Choose a color for the first gradient stop.  Make the other gradient stop the same color.
4.	Click the gradient bar to add another gradient stop.
5.	To simulate a border make the middle gradient stop black.  Then change the right-most gradient stop to transparent.  You accomplish this by setting its alpha channel to zero.
6.	Move the gradients stops so that they are arranged similar to the accompanying screen shot.
7.	Your ellipse should look something like this.

Brush Transform Tool

Blend contains a marvelous aid called the Brush Transform tool, that simplifies the editing of your tile or gradient brushes.  I’ve written about this tool before (Constraining the Brush Transform Tool,  Using a TileBrush in Expression Blend).  Using this tool you will move the gradient to the upper-right corner of the containing ellipse.

1.	Choose the Brush Transform tool from the Toolbox.
2.	Select your ellipse. Drag one of the corner handles to scale the gradient.
3.	Shrink the gradient and move it to the upper right corner of the containing ellipse.
4.	Notice that you cannot see the entire gradient. Move the gradient back into the body of ellipse.

That’s it.  You are finished. Since you already animated the ellipse earlier in this demo you can run the application and watch the animation.

Here is what the animation should look like when you are finished (Video 3).

Video 3: Animated Gradient

Simulate Movement Around a Track

Take a look at the Vista busy cursor video again (video 1). Do you see that the white spot is moving around the outside band? You can simulate that effect by using the technique you just learned. You will need to add a border to your ellipse and apply a gradient fill to the border but that is not difficult.

The animation consists of three ellipses all centered on the same point.

1.	Add another page to your project.
2.	Add three ellipses to the page.  Make all three the same size and in the same location.  Name them as shown in the accompanying screenshot (Outer, Center, Highlight).
3.	Change the Scale of the Center ellipse to 0.7.
4.	This is what the finished ellipses look like.  Examine the sample project file for more details.
5.	Highlight: A semi-transparent white gradient created using the previous ‘Brush Transform tool’ technique.  Notice that the ellipse is not circular and is wider than it is tall.
6.	Outer: An outer circle filled with a linear gradient fill.
7.	Center: A smaller white circle with black border
8.	The finished graphic should look similar to the following.

Then you apply a 360-degree animation to the Highlight ellipse and you are done. This is getting closer to our goal of looking like the Vista busy cursor.  It’s a bit crude, and it still needs some work but it is close enough for our purposes.

I’ve included a completed sample project (CircularAnimation.zip) for you to explore and learn more about how these animations are constructed.

[Source code for article is available on CodeGallery]

What’s Next?

In part two of this article I will show you how to arrange elements evenly about the perimeter of a circle and how to recreate the Silverlight loading animation.