locked
Horizontally scrolling background image RRS feed

  • Question

  • Hi everyone,

    I have a Hub template application with a few hub sections so you have to scroll to the right to see the rest. I have a background image set on the containing (root) grid. Is there a way I could achieve the effect of when the user scrolls horizontally to see all the content that I could slightly move the background image back and forth? You know, sort of like how Windows 8 does it when you scroll through your apps on the Start page.

    Thanks,

    Mark Moeykens

    Sunday, December 15, 2013 5:57 PM

Answers

  • I think this is what you are after:
    http://code.msdn.microsoft.com/windowsapps/ParallaxBackground-A-Metro-f929e558

    Matt Small - Microsoft Escalation Engineer - Forum Moderator
    If my reply answers your question, please mark this post as answered.

    NOTE: If I ask for code, please provide something that I can drop directly into a project and run (including XAML), or an actual application project. I'm trying to help a lot of people, so I don't have time to figure out weird snippets with undefined objects and unknown namespaces.

    • Marked as answer by Anne Jing Friday, December 20, 2013 6:15 AM
    Monday, December 16, 2013 3:36 PM
    Moderator
  • The keyword to search for is "parallax". If you check the sample gallery you'll find a community sample demonstrating this there.

    The basic concept is to bind the horizontal translation of the background image proportional to the horizontal position of the foreground. 

    --Rob

    • Marked as answer by Anne Jing Friday, December 20, 2013 6:15 AM
    Monday, December 16, 2013 3:43 PM
    Moderator

All replies

  • I think this is what you are after:
    http://code.msdn.microsoft.com/windowsapps/ParallaxBackground-A-Metro-f929e558

    Matt Small - Microsoft Escalation Engineer - Forum Moderator
    If my reply answers your question, please mark this post as answered.

    NOTE: If I ask for code, please provide something that I can drop directly into a project and run (including XAML), or an actual application project. I'm trying to help a lot of people, so I don't have time to figure out weird snippets with undefined objects and unknown namespaces.

    • Marked as answer by Anne Jing Friday, December 20, 2013 6:15 AM
    Monday, December 16, 2013 3:36 PM
    Moderator
  • The keyword to search for is "parallax". If you check the sample gallery you'll find a community sample demonstrating this there.

    The basic concept is to bind the horizontal translation of the background image proportional to the horizontal position of the foreground. 

    --Rob

    • Marked as answer by Anne Jing Friday, December 20, 2013 6:15 AM
    Monday, December 16, 2013 3:43 PM
    Moderator