Windows 8 Nested GridView Scrolling

One annoying issue I’ve had with proper mouse wheel scrolling is that if you have a ScrollViewer that contains several different item controls, then mouse wheel scrolling is not always working as expected. For example if you have the following setup

then while you have your mouse pointer over any nested GridView, mouse wheel scrolling stops working. There is actually a simple explanation to this and that is how routed events works. The “inner” GridView will handle the scroll event and stop it from bubbling up the visual tree.
Although my first approach was to create a custom style for the inner GridView that removes the GridView inner ScrollViewer and only have the outer ScrollViewer. This seems to work, since mouse wheel scrolling is now working as expected. But, once I tried the app on a Slate, then all the touch events stopped working. I could no longer select items by a “swiping down” action on GridView items. I was trying all kinds of solution without any success. Then it struck me, the inner GridView is stopping the scroll event from bubbling up, then perhaps all I need to do is to add an event handler to the PointerWheelScrollEvent and make sure it is not handled.

So in the constructor for the View that contains the ScrollViewer with nested GridViews I simply add the following

GridView1.AddHandler(UIElement.PointerWheelChangedEvent, new PointerEventHandler(OnPointerWheelChanged), true);

GridView2.AddHandler(UIElement.PointerWheelChangedEvent, new PointerEventHandler(OnPointerWheelChanged), true);

// etc...

and add the following simple implementation for the PointerWheelChanged event handler

private void OnPointerWheelChanged(object sender, PointerRoutedEventArgs e)
      e.Handled = false;

By doing the above changes, the nested GridViews are no longer stopping the mouse wheel changed event from bubbling up the visual tree, and the outer ScrollViewer now works properly, and all touch actions with built in animations now also works as expected.

Lessons learned, always “go back to basics” don’t try to complicate things. There is usually a simple solution :)

Happy Coding!

  1. Thanks a lot :) Almost gave up, but then I found this post…you’re a life saver

    • Kobe Aerts
    • April 29th, 2013

    Wow thnx!!!

    • aidnanddo
    • November 16th, 2013

    Hi, you can change the default template of a gridview, and delete the ScrollViewer.

    • You can, although you will destroy some of the built in features of the gridview in that case, especially for touch devices.
      I tried that approach but gave up, might be possible though.

  2. Very Thankx..

  1. No trackbacks yet.

Leave a Reply

Fill in your details below or click an icon to log in: Logo

You are commenting using your account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: