How can I fade-in a control when a page loads? RRS feed

  • Question

  • Is there a way to fade-in controls in when a page loads?  That is, the controls are blank when the page displays then gradually fade in to full appearance?  Can this be done with timelines/storyboards/keyframes?

    Monday, August 10, 2009 6:13 PM

All replies

  • Yes this can easily be done with storyboards. Create a new storyboard (which will be automatically be set to the 'window loaded' trigger) and create a keyframe. Set the opacity of the element to 0%. Then go out a few seconds on the timeline and add a keyframe and set the opacity to 100%. Apply this to any number of elements or grids or whatever content you have.
    Monday, August 10, 2009 6:18 PM
  • Good idea might be to apply that opacity to the LayoutRoot (Grid) if you want to have all controls and parts of your UI fading in / out at the same time.

    Vibor Cipan, MVP
    UXPassion.com - Things about user experience, usability, IA, SEO, tutorials, blogging and Microsoft
    Tuesday, August 11, 2009 12:30 AM