Silverlight ‘Loading’ Spin Icon in XAML - Online Free Computer Tutorials.

'Software Development, Games Development, Mobile Development, iOS Development, Android Development, Window Phone Development. Dot Net, Window Services,WCF Services, Web Services, MVC, MySQL, SQL Server and Oracle Tutorials, Articles and their Resources

Tuesday, October 4, 2011

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

12 comments:

  1. Everything is very open with a really clear clarification of
    the issues. It was really informative. Your site is
    very useful. Thanks for sharing!

    Review my homepage ... fotosunhasdecoradas.wordpress.com

    ReplyDelete
  2. Hey! Do you use Twitter? I'd like to follow you if that would be okay.
    I'm definitely enjoying your blog and look forward to new updates.



    Review my webpage - guides for hearthstone

    ReplyDelete
  3. What could be more frightening than what Ken has in his basement.
    Blu-ray Deal of the Week: RVBX: Ten Years of
    Red vs. If you've thus far steered clear of social games, Candy Crush is a good place to start.


    Here is my website Bubble Witch Saga 2 Hack
    (www.facebook.com)

    ReplyDelete
  4. Affiliate Marketing Domain Name Gdi Free Affiliate Program What else could we possibly need.
    An online marketing system is the perfect way to get started online, because you get to build your list and
    get educated at the same time. Instead target and focus your internet marketing campaign towards your target audience and target market to achieve more success.


    Here is my website :: treatment for phobia ()

    ReplyDelete
  5. Quality articles or reviews is the secret to be a focus for the users to visit the web site, that's what this website is providing.


    Feel free to visit my website: bestshampooandconditioner.net

    ReplyDelete
  6. Not filing will add more penalties to your tab, and could
    possess the votes to do so, I go profit talk to the IRS electronically.


    my blog; podatki

    ReplyDelete
  7. Hey! I could have sworn I've been to this website before but after browsing through some
    of the post I realized it's new to me. Nonetheless, I'm definitely happy I found it and I'll be book-marking and
    checking back often!

    Here is my webpage production music options

    ReplyDelete
  8. For most up-to-date news you have to pay a quick visit internet and on the web I found this site as a
    most excellent web page for most up-to-date updates.

    Review my page pest control houston rats

    ReplyDelete
  9. Nice blog here! Also your site loads up very fast!
    What web host are you using? Can I get your affiliate link to your host?
    I wish my site loaded up as fast as yours lol

    Feel free to surf to my web blog :: affiliate.realpassiveprofits.com,
    ,

    ReplyDelete
  10. What's up to every single one, it's in fact a nice for me to pay a quick isit this web page,
    it contains important Information.

    Also visit my blogg :: food conttains wuole ()

    ReplyDelete
  11. Wow that was strange. I just wrote an very long comment but after
    I clicked submit my comment didn't show up.
    Grrrr... well I'm not writing all that over again. Anyhow, just wanted to say superb blog!


    My webpage; Sana Hemp Juice Reviews

    ReplyDelete