How to disable scrolling between FlipView items with mouse wheel on Windows 8.1

Question

I have Windows 8.1 Store C#/XAML app, in this app I have FlipView with several flipview items. In one item I have WebView that is quite long.
The problem - when I scroll using mouse wheel in the WebView and I reach the end of the page, the FlipView then scrolls to the next item, which is unwanted.

The expected behavior is to freely scroll within the WebView and not between FlipView items. Ideally the switching between FlipView items should work only using touch or programmatic change.

I've tried setting different ScrollViewer properties on FlipViewItem or nested items, changining ManipulationMode, but nothing worked so far.

Sample code:

<FlipView>
    <FlipViewItem>
        <Grid Background="Red"/>
    </FlipViewItem>
    <FlipViewItem>
        <Grid>
        <!-- when scrolling on this page, do not navigate to Blue or Red FlipViewItem-->
            <WebView Source="http://cnn.com"/>
        </Grid>
    </FlipViewItem>
    <FlipViewItem>
        <Grid Background="Blue"/>
    </FlipViewItem>
</FlipView>

what about subscribing to this, and setting it as handled when you are at the bottom of the page? msdn.microsoft.com/en-us/library/windows/apps/… — Tamás Deme
Thanks for the idea, handling PointerWheelChanged was key for the solution. — Martin Suchan

Martin Suchan Martin Suchan · Accepted Answer · 2015-07-10T06:37:05

Found it after trying almost all ScrollViewer attached properties on all elements around, the solution is actually really simple - as Tamás Deme hinted I need to handle the PointerWheelChanged event on Parent element containing the WebView.

<FlipView>
    <FlipViewItem>
        <Grid Background="Red"/>
    </FlipViewItem>
    <FlipViewItem>
        <Grid PointerWheelChanged="PointerWheelIgnore">
            <WebView Source="http://cnn.com"/>
        </Grid>
    </FlipViewItem>
    <FlipViewItem>
        <Grid Background="Blue"/>
    </FlipViewItem>
</FlipView>

...

private void PointerWheelIgnore(object sender, PointerRoutedEventArgs e)
{
    e.Handled = true;
}

Why this works? WebView is translating mouse wheel scrolling events to move the Web content around and setting the PointerRoutedEventArgs as Handled. But if the web content is already at the bottom, the WebView is not setting the PointerRoutedEventArgs as Handled and this event then bubbles up to the FlipView which flips between FlipViewItems. If I handle/stop the PointerWheelChanged event between WebView and FlipView, then there is no FlipView scrolling between items.

How to disable scrolling between FlipView items with mouse wheel on Windows 8.1

1 Answers