Archive for the ‘ Modern UI ’ Category

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!

%d bloggers like this: