<< Coming Soon | ObservableCollection Base Class With Expression Blend Designer Support >>

Silverlight ‘Loading’ Spin Icon in XAML

by Dean 18. January 2009 15:36

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

Dean

6c95b9d6-d453-46e5-905e-4f7886a0a552|7|4.9

Tags: silverlight, xaml

Silverlight

WPF – Loading Spinner Via MVVM and Attached PropertiesWhen I used to write a lot of Ajax for ASP.NET (many years ago) I quite like the feature whereby you...Using CLR 4 Dynamics To Mock Bindable Objects in XAMLWhen I’m building prototypes in WPF or working on a GUI spike in an agile development team I often f...Enumeration Binding in SilverlightA contractor colleague of mine (Phil Steel) had an interesting Silverlight problem yesterday. He wan...

Comments

Philipp (website link)

January 19. 2009 17:28

Simple yet effective, and it looks very nice. Thanks for sharing this one!

Cheers,
Philipp

Thierry

February 28. 2009 05:34

Hi,

Great article! I've been looking for this for the last 2 days, trying to find an equivalent for animated gif and this is absolutely amazing. I was really blown away when I actually ran the code. I'm not familiar with the fancy animation you can do with Silverlight, but really, this is superb.

Can you tell me one thing though, I would like to trigger this at load time or on demand. What do I mean? When my page loads up data the first time, this should be done at load up time which I can do based on your article but how do I go about it to call it when I for example click on an update button and I want to display this, then I want to call my update function?

Do you recommend that I turn this into a control that I load just before calling the update and then remove it from the page when my update is done?

Thanks.

Thierry.

Dean Chalk (website link)

February 28. 2009 08:39

Hi Tierry

I have added an extra paragraph at the end of the post to demonstrate turning the spinner on and off.

Hope it helps

Dean

Thierry

February 28. 2009 23:15

Hi Dean,

Great, thanks a lot for this. I'll be give it a try in a bit. I'm trying to turn this into a re-usable control as I want to pretty much include this in any pages that will make a wfc call and from what I can see right now, there will be quite a few.

Just to let you know that the method I started playing with i.e. loading the control just before making a wfc call, and then remove it after the wfc call was completed seem to also work, though your is definitely better & cleaner.

I'll let you know how I get on.

Thanks.

T.

gold coast computer services (website link)

April 9. 2010 12:17

Looks great! I’d love to see a version that could be stopped and started too. Even better would be if it was packaged as a control (something I’m trying to do with yours now). Thanks!

edu

May 14. 2010 11:05

I don't get this part..

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

gives me a "; expected" error

Chee Chon

October 13. 2010 05:52

This is great and thanks for sharing it!

A tip: Just put the whole <Canvas> tag into a <Viewbox> instead of a <Grid>, and it will scale automatically.

ashish

October 30. 2010 12:25

thanks boss its excellent
i was search this last 15 days
once again thanks a lot

tintin1983

December 9. 2010 03:33

It's simple and powerful. Thanks buddy.

Enrico

July 13. 2011 13:23

Thanks a lot,
Very helpful.
Enrico

DotNetXenon

September 20. 2011 19:55

Excellent! Exactly what I was looking for.. Thank u so much..

DotNetXenon

September 20. 2011 21:11

I have added the busy indicator code to a usercontrol and it shows up fine. I am not able to hide it after call to service.
Following code is not working.
BusyIndSpinnerControl.Visibility = Visibility.Collapsed;

Can you please point on how to fix it?

Dhivya

November 2. 2011 09:23

Hi Dean,
Article is simple and working fine.But the slow in page loading impacts on Spinner too where it got struck while it spins.Can u pls tell how to overcome this?

Add comment

Name*
E-mail* (Will show your Gravatar icon)
Website
Country Country flag

b i u quote

Comment
Preview

FAO Comment Spammers : Please note that this blog is fully moderated by me personally and no comment spam will ever appear on this site.

Notify me when new comments are added

Silverlight ‘Loading’ Spin Icon in XAML

Month List

RecentComments

Page List

Silverlight ‘Loading’ Spin Icon in XAML

Tag cloud

Month List

RecentComments

Category list

Page List

BlogRoll