CODEWITHSUNDEEP
xamlwindows-8windows-runtimewinrt-xaml
Martino Bordin
Martino Bordin

Reputation: 1471

Windows 8 GridView - Parallax Background Image

any idea on how to implement a parallax effect on gridview when scrolling it? I'm looking for an effect similar to the windows home screen, that moves background image when scrolling.

Thanks

Upvotes: 1

Views: 3347

Answers (2)

John Michael Hauck
John Michael Hauck

Reputation: 11

1) Name your ScrollViewer something like MyScrollviewer

2) Add a RenderTransform to your background user interface element like this:

  <your background.RenderTransform>
    <CompositeTransform TranslateX="{Binding ElementName=MyScrollViewer, Path=HorizontalOffset, Converter={StaticResource ParallaxConverter}}" />
  </your background.RenderTransform>

3) Implement a ParallaxConveter (multiplies by -.1)

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

Upvotes: 0

Filip Skakun
Filip Skakun

Reputation: 31724

You would need to handle the ScrollViewer.ViewChanged on the ScrollViewer used to scroll your GridView and update positioning of an image in the background. You can get the ScrollViewer using the WinRT XAML Toolkit's VisualTreeHelperExtensions extension method - essentially

ScrollViewer myScrollViewer = myScrollViewermyGridView.GetFirstDescendantOfType<ScrollViewer>();
myScrollViewer.ViewChanged += UpdateBackgroundImagePosition;

Upvotes: 2

Related Questions