We are going to make a busy indicator that will rotate in a circle indefinitely, and it will look like this..

So first, let’s create a new project in Expression Blend 4.  We are just going to use the Silverlight Application project template without a website.

Next, let’s resize the window to 400×400 just to make the window a little smaller.

To create the base of our busy indicator, let’s draw a ellipse on the window, with a size of 30×30.

Now we need to put a PathListBox control on the window.  Go to the Assets tab, then start typing PathListBox in the search box.  Once it is found, simply drag it onto the window.  It doesn’t really matter where it is placed.  I placed mine at the bottom left corner of the window.

By default, the control doesn’t have a border.  If it seems to “disappear”, you can always select it from the Objects & Timeline window.

So now, we need to turn our ellipse into a Path.  This can be done simply by right-clicking on the Ellipse, Path –> Convert To Path.  You will notice that the ellipse is now a Path type.

Now that our Ellipse is a Path, we can now set it as a Layout Path for the PathListBox.  Click on the PathListBox, then go to the Properties Window.  You will see a section for Layout Paths.  Click the round circle icon(arrow in second image), and select the Ellipse.  You will see that it’s now added as a layout path.

Now we are going to add a new Ellipse as a child to the PathListBox.

<ec:PathListBox
    HorizontalAlignment="Left"
    Height="100"
    Margin="51.333,0,0,12"
    VerticalAlignment="Bottom"
    Width="100">

    <ec:PathListBox.LayoutPaths>

        <ec:LayoutPath
            SourceElement="{Binding ElementName=path}" />

    </ec:PathListBox.LayoutPaths>

    <Ellipse
        Fill="Black"
        Height="7"
        Width="7"
        Stroke="Black" />

</ec:PathListBox>

Our Ellipse is simple, with a Height and Width of 7 and a Stroke and Fill of Black.

Now that we have one Ellipse, let’s copy and paste that Ellipse to create 10 total Ellipses.  You can copy and paste the XAML, or you can use the Objects and Timeline window to copy the ellipse object.  The XAML should look like this now…

<ec:PathListBox
    HorizontalAlignment="Left"
    Height="100"
    Margin="51.333,0,0,12"
    VerticalAlignment="Bottom"
    Width="100">

    <ec:PathListBox.LayoutPaths>

        <ec:LayoutPath
            SourceElement="{Binding ElementName=path}" />

    </ec:PathListBox.LayoutPaths>

    <Ellipse Fill="Black" Height="7" Width="7" Stroke="Black" />
    <Ellipse Fill="Black" Height="7" Width="7" Stroke="Black" />
    <Ellipse Fill="Black" Height="7" Width="7" Stroke="Black" />
    <Ellipse Fill="Black" Height="7" Width="7" Stroke="Black" />
    <Ellipse Fill="Black" Height="7" Width="7" Stroke="Black" />
    <Ellipse Fill="Black" Height="7" Width="7" Stroke="Black" />
    <Ellipse Fill="Black" Height="7" Width="7" Stroke="Black" />
    <Ellipse Fill="Black" Height="7" Width="7" Stroke="Black" />
    <Ellipse Fill="Black" Height="7" Width="7" Stroke="Black" />
    <Ellipse Fill="Black" Height="7" Width="7" Stroke="Black" />

</ec:PathListBox>

Switching back to the Design view in Blend, you will now see that our Path ellipse has 5 small, black ellipses on it.

Selecting the PathListBox, we will go back to the Layout Paths section in the Properties window to change some of the options.  These options will control the number of ellipses that are visible on the Path, the padding between the ellipses, object orientation to the path, and a few other options.

Here are the options that we need to set..

So our first option is the Distribution option.  This option allows you to specify whether the path should have all of the ellipses arranged evenly on the path(Even option), or whether the path should have all of the ellipses on the path using the provided Padding option to determine the padding between the ellipses(Padded option).  Since I have chosen the Even option, Blend will automatically set the Capacity to the maximum number of ellipses that I have defined(10).  Also, the Padding option(which is set to 10 by default) will be ignored.

The second option is the Capacity option.  This option allows you to specify how many ellipses should be on the path, up to the number of ellipses defined.   Since I want to use all of the ellipses we have defined, I will set this to 10.

The third option is the Padding option.  This option allows you to specify the amount of space between the ellipses.  When the Even Distribution option is chosen, this option is ignored.

The fourth option is the Orientation option.  This option allows you to specify the orientation of the ellipses in relation to the path curve.  Since we are using ellipses, changing this option will have no visible effect.

The fifth option is the Start option.  This option allows you to specify the distance from the start of the path to place the first ellipse.  In our case, when the Start option is at 0, the first ellipse is on the right of the path(at 3 o’clock if you think of the path as a clock).  Since I want the first ellipse to be at top-dead center, I set the Start option to -25%.

The sixth option is the Span option.  This option allows you to specify how much of the path will actually participate in the Layout Path.  Since we want the entire path to be included, we will leave this at 100%.

The last option is the FillBehavior option.  To better explain this option, I am going to let Microsoft do the talking…

In the FillBehavior box, choose one of the following:

• NoOverlap   If your layout path is an open path and you want to animate the Start property, select NoOverlap from theFillBehavior drop-down list. This reduces the effective span used to lay items out along the path, allowing enough room to animate Start without the items on the path overlapping when the list items return to the beginning of the layout path.
• FullSpan   Select FullSpan from the FillBehavior drop-down list to make sure that the entire span of the layout path is used. For example, if you have selected Even in the Distribution drop-down list and FullSpan in the FillBehavior drop-down list when working with an open path, an item will appear at the beginning and at the end of the path.

Our next task is to offset the colors of each of the ellipses to give them a “fading” effect.  To do this, select the ellipse directly to the left of the top-dead center ellipse, then in the Properties Window, set the Alpha value of the Fill color to 90%.

Do this for each of the ellipses as you move around the circle counter-clockwise.  For each ellipse, set the Alpha value to 10% less than the previous ellipse.  So our next ellipse would be set to 80%.

After you have completed, the last ellipse will have an Alpha value of 10%, and the path will now look like this…

Now, let’s make the borders disappear.  Select all of the ellipses INCLUDING the path ellipse, and in the Properties Window, set the Stroke to No Brush.

Now deselect all of the ellipses and ONLY select the Path ellipse, then in the Properties Window, set the Fill to No Brush.

So we have now completed the visual part of making the our busy indicator.  Next, we need to do an animation for the path to rotate.

From the Blend Designer, go to Window –> Workspaces –> Animation, or hit F6.  Now that we are in animation view, we will now create a new storyboard for our animation.  In the Objects and Timeline window, click the plus icon to create a new storyboard.

I will name it RotateStoryboard.

Once the storyboard is created, Blend will automatically to into recording mode.  Select the ellipse path, then click the Record Keyframe icon to record a keyframe of the current properties.

Now that we have our first keyframe, we want to move the timeline to 0.2 seconds(click and drag the arrow at the top of the yellow line).  With the ellipse path still selected, go to the Transform section of the Property Window, choose the Rotate tab, and set the Angle to 90.  This will add a second keyframe to the timeline.

Now move the yellow line to 0.4 seconds, and set the Angle to 180.

Now move the yellow line to 0.6 seconds, and set the Angle to 270.

Now move the yellow line to 0.8 seconds, and set the Angle to 360.