ScrollViewer GridView XAML

Question

I am currently building a Windows 8 XAML C# application. In a page I have a scrollviewer for horizontal swiping and scrolling. I have several controls in it which work really well with the scorllviewer. But when you scroll and your cursor is on top of the ListView / GridView, then that control will handle scrollnig instead of the scrollviewer. With swiping this doesn't happen, but with the mouse scrollwheel it stops the scrollvieweing scroll. Does anybody know how to disable this behavior or have a workaround?

Answer 1

After working with this problem for quite a while i decided to change tactics. At least in my solution I changed the inner GridView to just be an ItemsControl. That way I can handle all the click/tap but still let scroll work as expected.

Of course this solution isn't for everybody as sometimes you need all the selection stuff as well. But for me it worked as I only needed the item click/tap.

Hope it helps

Answer 2

I found a workaround here: msdn workaround

Basicly you have to do the following:

Base XAML:

   <Grid Name="BaseElement">
        <ScrollViewer Name="MainScrollViewer" Style="{StaticResource HorizontalScrollViewerStyle}" VerticalScrollMode="Auto">
            <GridView />
            <GridView />
        </ScrollViewer>
    </Grid>

1. Add a new Handler to the root element:

   BaseElement.AddHandler(PointerWheelChangedEvent, new PointerEventHandler(Bubble_PointerWheelChanged), true);
   

2. Implement the Handler to handel the scrolling:

   private void Bubble_PointerWheelChanged(object sender, PointerRoutedEventArgs e)
   {
       // Could walk up the tree to find the next SV or just have a reference like here:
       MainScrollViewer.ScrollToHorizontalOffset(MainScrollViewer.HorizontalOffset - e.GetCurrentPoint(null).Properties.MouseWheelDelta);
   }
   

Answer 3

1.Add this code in View.cs:

  private void ThumbnailViewer_OnMouseWheel(object sender, MouseWheelEventArgs e)
    {
        ThumbnailViewerScroller.ScrollToHorizontalOffset(ThumbnailViewerScroller.HorizontalOffset - e.Delta);
    }

2.add code in Xaml:

  <ScrollViewer
            x:Name="ViewerScroller"               
            MouseWheel="ThumbnailViewer_OnMouseWheel">
<StackPanel>
...
</StackPanel>
</ScrollViewer>

Answer 4

This is a problem I see, too. It does not exist in touch - only seems to occur when the mouse wheel is used. I don't know of a workaround yet. I don't think there is one.

Answer 5

I also had the same problem. Then I tried removing scroll-bars from the Grid template as mentioned in below thread.. it worked fine for me..

https://stackoverflow.com/a/10305608/2444509

Answer 6

Best Solution ever.

public class CustomGridView : GridView
{
    protected override void OnApplyTemplate()
    {
        base.OnApplyTemplate();
        var sv = this.GetTemplateChild("ScrollViewer") as UIElement;
        if (sv != null)
            sv.AddHandler(UIElement.PointerWheelChangedEvent, new PointerEventHandler(OnPointerWheelChanged), true);
    }

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

More info: GridView in a ScrollViewer