Ignore horizontal mouse scrolling with nested ScrollViewer

问题

I have a ScrollViewer around a Grid to vertically scroll it's content.

<ScrollViewer>
    <Grid Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">
    ...
    </Grid>
</ScrollViewer>

Inside of this Grid i have another Scrollviewer with horizontal content.

<Grid>
    <ScrollViewer Name="ScrollViewer" VerticalScrollMode="Disabled" VerticalScrollBarVisibility="Disabled" HorizontalScrollMode="Disabled" HorizontalScrollBarVisibility="Hidden">
    ...
    </ScrollViewer>
    <Button Name="ButtonRight" HorizontalAlignment="Right" VerticalAlignment="Stretch" Tapped="ButtonRight_Tapped" />
    <Button Name="ButtonLeft" HorizontalAlignment="Left" VerticalAlignment="Stretch" Tapped="ButtonLeft_Tapped" />
<Grid>

The HorizontalScrollMode is disabled and HorizontalScrollBarVisibility is hidden because with mouse input, i want to scroll the content with the left/right buttons. The HorizontalScrollMode is disabled to prevent horizontal scrolling when the mouse is inside the ScrollViewer.

private void ButtonRight_Tapped(object sender, TappedRoutedEventArgs e)
{  
    ScrollViewer.ChangeView(ScrollViewer.HorizontalOffset + ScrollViewer.ActualWidth, 0, 1);
}

With this configuration i can scroll the page vertically even when the mouse is inside the horizontal ScrollViewer. Here is an image to give you an idea:

The problem is with touch. How can i still scroll horizontally when the user is using a touch device? When i enable HorizontalScrollMode touch works as desired, but with a mouse it scrolls horizontally which i try to prevent.

Is there a way to ignore the horizontal scrolling with nested ScrollViewers?

回答1:

I found a pretty simple solution to solve my problem.

I've added a PointerEntered to my nested horizontal ScrollViewer

<ScrollViewer Name="ScrollViewer" PointerEntered="ScrollViewerImages_PointerEntered" VerticalScrollMode="Disabled" VerticalScrollBarVisibility="Disabled" HorizontalScrollMode="Disabled" HorizontalScrollBarVisibility="Hidden">
...
</ScrollViewer>

and enabled the HorizontalScrollMode when the PointerDeviceType is Touch.

private void ScrollViewerImages_PointerEntered(object sender, PointerRoutedEventArgs e)
{
    if (e.Pointer.PointerDeviceType == PointerDeviceType.Touch)
        ScrollViewerImages.HorizontalScrollMode = ScrollMode.Enabled;
    else
        ScrollViewerImages.HorizontalScrollMode = ScrollMode.Disabled;
}

来源：https://stackoverflow.com/questions/40259444/ignore-horizontal-mouse-scrolling-with-nested-scrollviewer

标签

xaml

uwp