Category: Silverlight

In a recent Silverlight addition I was making for a website, I wanted to make a busy indicator to show the user something was happening while I was off making web service calls.  To make the busy indicator, I decided to take advantage of the new PathListBox control in Expression Blend 4(and SL 4).

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.

You can now hit the Play button and watch the animation start.

Now let’s stop the animation from recording by clicking the record button at the top.

Now we need to make the animation run forever.  To do this, we will select the storyboard by clicking it in the Objects and Timeline window.  In the Properties Window, we will set the RepeatBehavior property to Forever.

Now we need to make the storyboard start when the control is loaded.  To do that, we will use a behavior.  Specifically, we will use the ControlStoryboardAction behavior.  We will switch back to the design view by hitting F6 or Window –> Workspaces –> Design.

In the Assets window, we will choose Behaviors, then select ControlStoryboardAction(make sure you have cleared the search box which may still have PathListBox in it).

We will drag this behavior and drop it on the UserControl.

In the Properties Window, set the EventName to Loaded, and set the Storyboard to RotationStoryboard.  This will play the storyboard when the UserControl has been loaded.

And we are done.  Hit F5 to run the application, and behold your custom, beautiful busy indicator.

I recently wanted to add a theme from the Silverlight 4 Toolkit, and ran into this runtime error…

12212010122804pm

XamlParseException: Failed to create a ‘System.Type’ from the text ‘input:AutoCompleteBox’.

I was perplexed as I didn’t have an AutoCompleteBox in my project.  It turns out that when you drag a theme from the Toolbox onto the designer, VS2010 doesn’t automatically add all of the references needed(it will add 2).  If you drag a theme from the Toolbox into XAML, VS2010 won’t add ANY references.

It also seems that because themes encompass a majority of controls, there must be a reference for those controls in the project.  After much trial and error, here are the 8 references that will be needed when using a theme from the toolkit:

References

If I removed any of these references, the application would throw a runtime exception similar to the screenshot above.

The “BureauBlack” reference will change depending on the theme that you choose to use in your application.  There is a reference for every theme in the toolkit.

Hope this help out anybody who runs across this problem.

This will be the first of a number of posts highlighting the new controls that have been added to the WP7 Toolkit.  It’s a really great set of tools that makes life easier for us developers.

Download WP7 Toolkit

So the first control I am going to talk about is the ToggleSwitch control.  It’s a control that resembles a lightswitch and is a nice was of showing an On/Off or True/False setting instead of using a plain checkbox.

So let’s create a Windows Phone 7 project called ToggleSwitchDemo.

Open the Toolbox and find the ToggleSwitch control.  If it’s not listed, right-click on the Toolbox –> Choose Items –> then scroll down until you find the ToggleSwitch control in the list.

Once the control is in the Toolbox, drag it onto the page.  By default, it will look like this….

11-14-2010 10-21-33 AM

Run the application using F5, then click on the ToggleSwitch.  It will change from Off to On.

11-14-2010 10-24-16 AM 11-14-2010 10-24-28 AM

There are a number of options that are available for the text for the ToggleControl.  The Header property will change the heading of the control.  The Content property will set the content of the control(On/Off).

In one of my application, I used the ToggleSwitch to allow the user to turn on/off Ads that I have in the app.  So for me, I changed the Header to “Ads”, and since I default the ToggleSwitch to being On(IsChecked is True), I set the Content to “Ads are enabled.

The ToggleSwitch also allows you to handle when the control is checked and unchecked.  So here is how my ToggleSwitch would look in XAML

<toolkit:ToggleSwitch
    Name="AdsToggleSwitch"
    Header="Ads"
    Content="Ads are enabled"
    Height="111"
    HorizontalAlignment="Left"
    Margin="1,197,0,0"
    VerticalAlignment="Top"
    Width="456"
    IsChecked="True"
    Checked="AdsToggleSwitch_Checked"
    Unchecked="AdsToggleSwitch_Unchecked" />

Then the code for the Checked and Unchecked events…

private void AdsToggleSwitch_Checked(object sender, RoutedEventArgs e)
{
     AdsToggleSwitch.Content = "Ads are enabled";
}

private void AdsToggleSwitch_Unchecked(object sender, RoutedEventArgs e)
{
     AdsToggleSwitch.Content = "Ads are disabled";
}

Now my control would look like this…

11-14-2010 10-41-21 AM 11-14-2010 10-41-30 AM

The ToggleSwitch is a great control that allows your app to keep the “Metro” look and feel that a plain CheckBox wouldn’t allow you to do without custom coding.