locked
How To Create Metro App Like Start Screen

    Question

  • Not looking for full samples, but a good place to start.

    I see that it's a grid layout, but what I'm interested in is the moving background. Is this effect done via updating the background image based on the amount that the slider has moved? or does Win.JS.Animations have a built in support function for this effect. I have been looking at the parallax scrolling code for JavaScript, but seems like that is a bit overboard.

    It's a very elegant look and feel. I would like to implement this in my next metro app.

     

    Any Pointers?

    Sunday, February 5, 2012 5:20 PM

Answers

  • I do not believe we have a control that encapsulates that behavior.  I think you can get a similar behavior by getting the controls _viewport and attaching adding a scroll event listener.  Then you could adjust the background image to move a fraction of the amount that the scrolling data moves.

    -Jeff


    Jeff Sanders (MSFT)
    Monday, February 6, 2012 4:30 PM
    Moderator

All replies

  • I do not believe we have a control that encapsulates that behavior.  I think you can get a similar behavior by getting the controls _viewport and attaching adding a scroll event listener.  Then you could adjust the background image to move a fraction of the amount that the scrolling data moves.

    -Jeff


    Jeff Sanders (MSFT)
    Monday, February 6, 2012 4:30 PM
    Moderator
  • thank you, I figured I'd have to put some personal code into the app to achieve this effect...
    Tuesday, February 7, 2012 4:56 PM
  • I just wrote blog entry that shows a simple way to add a parallax background to a metro application in XAML

    http://w8isms.blogspot.com/2012/06/metro-parallax-background-in-xaml.html.

    Maybe something similar can be done in JavaScript?

    Saturday, June 2, 2012 5:03 AM