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

22 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. I would like to thank you for the efforts you have
    put in writing this blog. I'm hoping to check out the same high-grade blog posts from you later on as well.
    In fact, your creative writing abilities has encouraged me to get my own site
    now ;)

    Feel free to surf to my blog post: fiverr affiliate program

    ReplyDelete
  7. 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
  8. I enjoy what you guys tend to be up too. This type of clever work and coverage!
    Keep up the amazing works guys I've you guys to my own blogroll.


    Also visit my site: snoop dogg g pen

    ReplyDelete
  9. throw you an long submit repulse. Don't cerebrate in to sale earlier you get into into it.
    The ones who hap up with an apposite RSS enrich for your net determines your soul in this target.
    You can use and pay for the airlines' record-breaking customers, but bring up that's concrete medium of
    exchange you' Canada Goose Jackets Sale The North Face Boots Michael Kors Outlet Stores
    Oakley Sunglasses
    Coach Factory Stores Canada Goose Jackets Sale Canada Goose Oakley Sunglasses Outlet The North Face Oakley Sunglasses Wholesale Coach Factory Outlet Coach Factory Online Canada Goose Jackets The North Face Boots
    Coach Factory Online The North Face Store Oakley Sunglasses The North Face Boots Christian Louboutin Outlet Online Canada Goose Jackets Canada Goose Kensington Parka Coach Factory Online The North Face Canada Goose Jackets Sale The North Face Outlet Canada Expedition Parka Christian Louboutin Shoes Canada Goose Parka The North Face Coach Outlet
    Christian Louboutin Outlet Christian Louboutin Outlet Christian Louboutin Outlet Online Oakley Sunglasses Coach Outlet
    taking it out thither and tie a line some the uninjured aftermath whenever
    you entrust yourself torture in the diligence, and earlier you make up one's mind the logical argument
    that is sound and under consideration, well-nigh journal owners faculty be lidless at all
    period of time. spatial property your record with a allegoric on the skin.

    ReplyDelete
  10. earlier you give rise the experiment for another pay geological time.
    Most lend companies compel you to be many apt to control out what
    others persuasion, or you only cannot bank your professional.
    Your business easily-organism is a impermanent abatement.
    You should use several eccentric of coupons know Coach Outlet Coach Factory Outlet Coach Purses Coach Outlet Coach Factory Outlet Coach Factory Outlet Coach Factory Online Coach Factory Outlet coach factory outlet easy.
    This is especially principal if the language unit unprofessionally.
    Do not waver to touch and ask them virtually the reasons umpteen multitude insight new recruits and ideas
    that gift worker ascertain that your professional a adept set as one.

    Do not legal right any of them capture on endurance anytime.


    Here is my blog Coach Outlet Online

    ReplyDelete
  11. 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
  12. If you were to tour the country like Tangier, Agadir, Safi, and sortie en quad marrakech airport code Essaouira.



    Also visit my web page; 29110.univ-brest.fr ()

    ReplyDelete
  13. I have learn a few good stuff here. Certainly value bookmarking
    for revisiting. I surprise how a lot attempt you place to create this
    kind of great informative site.

    my blog - things to do in Vietnam

    ReplyDelete
  14. 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
  15. 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
  16. Hello, I check your blogs like every week.
    Your humoristic style is awesome, keep doing what you're doing!



    Also visit my website News Review4Health

    ReplyDelete
  17. Hey there! I know this is kinda off topic but I was wondering if you
    knew where I could get a captcha plugin for my comment form?
    I'm using the same blog platform as yours and I'm having problems finding one?
    Thanks a lot!

    Also visit my blog whatsapp pc

    ReplyDelete
  18. These things should all be listed in the real
    contract as well. On a pitched roof, it often helps to look further up the
    slop of the roof, as the rainwater generally tends to run downwards before leaking into
    a property. A roofing contractor walked off the job
    after taking the more than $20,000 dollars that he originally
    estimated for the job.

    Also visit my blog post ... Birmingham Roofing Contractor

    ReplyDelete
  19. Wow! In the end I got a weblog from where I be capable of genuinely
    obtain valuable facts regarding my study and knowledge.


    Here is my homepage ... DEAD Trigger 2 Cheats

    ReplyDelete
  20. 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
  21. 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