使用嵌套的 ScrollViewer 忽略水平鼠标滚动 [英] Ignore horizontal mouse scrolling with nested ScrollViewer

问题描述

我在 Grid 周围有一个 ScrollViewer 来垂直滚动它的内容.

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

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

在这个 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>

Horizo​​ntalScrollMode 被禁用，Horizo​​ntalScrollBarVisibility 被隐藏，因为使用鼠标输入，我想用左/右按钮滚动内容.Horizo​​ntalScrollMode 被禁用以防止鼠标在 ScrollViewer 内时水平滚动.

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);
}

使用此配置，即使鼠标位于水平 ScrollViewer 内，我也可以垂直滚动页面.这是一张图片，可以给您一个想法:

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:

问题在于触摸.当用户使用触摸设备时，我如何仍然水平滚动?当我启用 Horizo​​ntalScrollMode 触摸按需要工作时，但使用鼠标它会水平滚动，我试图阻止.

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.

有没有办法用嵌套的 ScrollViewers 忽略水平滚动?

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

推荐答案

我找到了一个非常简单的解决方案来解决我的问题.

I found a pretty simple solution to solve my problem.

我在嵌套的水平滚动查看器中添加了一个 PointerEntered

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>

并在 PointerDeviceType 为 Touch 时启用 Horizo​​ntalScrollMode.

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;
}

这篇关于使用嵌套的 ScrollViewer 忽略水平鼠标滚动的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！