Silverlight ‘Loading’ Spin Icon in XAML

When loading large object collections in Silverlight, there is enough of a time delay so that I need some kind of animated icon that indicates a 'loading' state. There were many such icons used when loading data via AJAX, which are basically animated Gif's. As Gif's aren't supported in Silverlight, I needed to create one. I decided therefore to create a design in Expression Design, and then animate it in Blend, with a little tidying up in VS2008.

Im not sure how well it'll perform with large number of instances in a single control, but it does the trick for my needs.

The code for my animated spinning logo is below.

(Use the scaletransform in the grid to change the size)

  <Grid x:Name="LayoutRoot" Background="White"> 

      <Grid.RenderTransform> 

          <ScaleTransform x:Name="SpinnerScale" ScaleX="0.5" ScaleY="0.5" /> 

      </Grid.RenderTransform> 

      <Canvas RenderTransformOrigin="0.5,0.5" Width="120" Height="120"> 

          <Ellipse Width="21.835" Height="21.862" Canvas.Left="20.1696" Canvas.Top="9.76358" 

              Stretch="Fill" Fill="#E6000000"/> 

          <Ellipse Width="21.835" Height="21.862" Canvas.Left="2.86816" Canvas.Top="29.9581" 

              Stretch="Fill" Fill="#CD000000"/> 

          <Ellipse Width="21.835" Height="21.862" Canvas.Left="5.03758e-006" Canvas.Top="57.9341" 

              Stretch="Fill" Fill="#B3000000"/> 

          <Ellipse Width="21.835" Height="21.862" Canvas.Left="12.1203" Canvas.Top="83.3163" 

              Stretch="Fill" Fill="#9A000000"/> 

          <Ellipse Width="21.835" Height="21.862" Canvas.Left="36.5459" Canvas.Top="98.138" 

              Stretch="Fill" Fill="#80000000"/> 

          <Ellipse Width="21.835" Height="21.862" Canvas.Left="64.6723" Canvas.Top="96.8411" 

              Stretch="Fill" Fill="#67000000"/> 

          <Ellipse Width="21.835" Height="21.862" Canvas.Left="87.6176" Canvas.Top="81.2783" 

              Stretch="Fill" Fill="#4D000000"/> 

          <Ellipse Width="21.835" Height="21.862" Canvas.Left="98.165" Canvas.Top="54.414" 

              Stretch="Fill" Fill="#34000000"/> 

          <Ellipse Width="21.835" Height="21.862" Canvas.Left="92.9838" Canvas.Top="26.9938" 

              Stretch="Fill" Fill="#1A000000"/> 

          <Ellipse Width="21.835" Height="21.862" Canvas.Left="47.2783" Canvas.Top="0.5" 

              Stretch="Fill" Fill="#FF000000"/> 

          <Canvas.RenderTransform> 

              <RotateTransform x:Name="SpinnerRotate" Angle="0" /> 

          </Canvas.RenderTransform> 

          <Canvas.Triggers> 

              <EventTrigger RoutedEvent="ContentControl.Loaded"> 

                  <BeginStoryboard> 

                      <Storyboard> 

                          <DoubleAnimation Storyboard.TargetName="SpinnerRotate" 

                                   Storyboard.TargetProperty="(RotateTransform.Angle)" 

                                   From="0" To="360" Duration="0:0:01" 

                                   RepeatBehavior="Forever" /> 

                      </Storyboard> 

                  </BeginStoryboard> 

              </EventTrigger> 

          </Canvas.Triggers> 

      </Canvas> 

  </Grid> 

 

Note: If you want to turn this animated spinner on and off (say, when accessing a WCF service), you could do so with something like the code below:

First, in your XAML make the spinner invisible by default

  <Grid x:Name="Spinner" Background="White" Visibility="Collapsed">

Then in your code do something like below:

 

  var client = new DataServiceClient();

  client.DoWorkCompleted += (s, e) => Spinner.Visibility = Visibility.Collapsed;

  Spinner.Visibility = Visibility.Visible;

  client.DoWorkAsync();

 

hope some of you find this usefull