< Back

Create a Silverlight Ajax Loader Icon

If you're like me and you love those cute little Ajaxy loader icons, you are in for a surprise if you want do the same in a Silverlight app.  Apparently, Silverlight doesn't natively support the GIF format.

Fantastic.

So, your options are either shell out some cash for a professional control library or do it yourself with Silverlight’s animation capabilities. And, here we go.

1. Get a graphic

I recommend going to http://ajaxload.info/.  They rock plenty of styles and you can easily change colors and backgrounds.

2. Code the XAML

Drop the image into your view and attach a RenderTransform behavior to it.

<Image 
	Canvas.ZIndex="100" 
	Name="ajaxLoader" 
	Width="32" 
	Height="32" 
	Source="/images/ajax-loader.png" 
	Canvas.Left="87" 
	Canvas.Top="200" >
            <Image.RenderTransform>
                <RotateTransform 
			Angle="0" 
			CenterX="17" 
			CenterY="17" x:Name="rotate" />
            </Image.RenderTransform>
 </Image>

Make sure to choose your centering coordinates based off the size of your image and have the image sit above underlying layers using the Canvas.ZIndex property. On to the animating.

<UserControl.Resources>
	<Storyboard x:Name="rotateLoaderStoryBoard">
            	<DoubleAnimation
             		Storyboard.TargetName="rotate"
              		Storyboard.TargetProperty="Angle" 
			RepeatBehavior="Forever"
              		From="0" 
			To="360" 
			Duration="00:00:02.2000000" />
 	</Storyboard>
 </UserControl.Resources>

Use SL’s Storyboard element and target your freshly added image. Have it’s Angle property rotate from 0 to 360 degrees. You may need to tweak the Duration depending on how fast you want to trigger an epileptic episode. That’s it for the XAML.

3. Wire up the events

rotateLoaderStoryBoard.Begin();

You can trigger the control however you please. In my case, I had some web service calls while initializing the application, so I run the animation from start-up.

Once the asychronous calls return, I stop and hide the image via the following:

rotateLoaderStoryBoard.Stop();
ajaxLoader.Visibility = System.Windows.Visibility.Collapsed;

Wrap it up

This is just one quick way to help the user out with visual indicators. If you get serious about it, you probably should wrap it up into an autonomous UserControl or custom Silverlight control. And, add more effects like fading the control out when the back-end is done iterating – or often in my case, caught in a recursive loop of death.

Happy coding!

Connect with us

Thank You!

We really appreciate your interest in what we do.

We'll get back to you as soon as we can.