允许在内部水平滚动 ScrollViewer 内垂直滚动外部 ScrollViewer

Posted 2023-02-25

【中文标题】允许在内部水平滚动 ScrollViewer 内垂直滚动外部 ScrollViewer

【英文标题】：Allow vertical scrolling of outer ScrollViewer inside inner horizontal-scrolling ScrollViewer

【发布时间】：2019-05-19 19:15:30

【问题描述】：

当您在 ScrollViewer 中有一个 ScrollViewer 时，使用滚轮滚动仅限于内部滚轮。当它们具有相同的“方向”时，这是有道理的。但是当外部只允许垂直滚动，而内部只允许水平滚动时，我希望用内部的鼠标滚轮滚动在外部的 ScrollViewer 中垂直滚动。它没有。有没有办法让它做到这一点？

在以下代码中，尝试在红色字母区域内使用滚轮：

<ScrollViewer VerticalScrollBarVisibility="Auto" HorizontalScrollBarVisibility="Disabled">
    <StackPanel>
        <TextBlock>aaaaaaaaaaaaaaaaaa</TextBlock>
        <TextBlock>aaaaaaaaaaaaaaaaaa</TextBlock>
        <TextBlock>aaaaaaaaaaaaaaaaaa</TextBlock>
        <TextBlock>aaaaaaaaaaaaaaaaaa</TextBlock>
        <TextBlock>aaaaaaaaaaaaaaaaaa</TextBlock>
        <TextBlock>aaaaaaaaaaaaaaaaaa</TextBlock>
        <TextBlock>aaaaaaaaaaaaaaaaaa</TextBlock>
        <TextBlock>aaaaaaaaaaaaaaaaaa</TextBlock>
        <TextBlock>aaaaaaaaaaaaaaaaaa</TextBlock>
        <TextBlock>aaaaaaaaaaaaaaaaaa</TextBlock>
        <TextBlock>aaaaaaaaaaaaaaaaaa</TextBlock>
        <TextBlock>aaaaaaaaaaaaaaaaaa</TextBlock>
        <TextBlock>aaaaaaaaaaaaaaaaaa</TextBlock>
        <TextBlock>aaaaaaaaaaaaaaaaaa</TextBlock>
        <TextBlock>aaaaaaaaaaaaaaaaaa</TextBlock>
        <TextBlock>aaaaaaaaaaaaaaaaaa</TextBlock>
        <TextBlock>aaaaaaaaaaaaaaaaaa</TextBlock>
        <TextBlock>aaaaaaaaaaaaaaaaaa</TextBlock>
        <TextBlock>aaaaaaaaaaaaaaaaaa</TextBlock>
        <TextBlock>aaaaaaaaaaaaaaaaaa</TextBlock>
        <TextBlock>aaaaaaaaaaaaaaaaaa</TextBlock>
        <TextBlock>aaaaaaaaaaaaaaaaaa</TextBlock>
        <TextBlock>aaaaaaaaaaaaaaaaaa</TextBlock>
        <TextBlock>aaaaaaaaaaaaaaaaaa</TextBlock>
        <TextBlock>aaaaaaaaaaaaaaaaaa</TextBlock>
        <TextBlock>aaaaaaaaaaaaaaaaaa</TextBlock>
        <TextBlock>aaaaaaaaaaaaaaaaaa</TextBlock>
        <TextBlock>aaaaaaaaaaaaaaaaaa</TextBlock>
        <TextBlock>aaaaaaaaaaaaaaaaaa</TextBlock>
        <TextBlock>aaaaaaaaaaaaaaaaaa</TextBlock>

        <ScrollViewer VerticalScrollBarVisibility="Disabled" HorizontalScrollBarVisibility="Auto">
            <StackPanel >
                <TextBlock Foreground="Red">aaaaaaaaaaaaaaaaaa bbbbbbbbbbbbbbbbbbbb cccccccccccccccccccccc dddddddddddddddddddddd eeeeeeeeeeeeeeeeeeeee fffffffffffffffff ggggggggggggggggggggggg</TextBlock>
                <TextBlock Foreground="Red">aaaaaaaaaaaaaaaaaa bbbbbbbbbbbbbbbbbbbb cccccccccccccccccccccc dddddddddddddddddddddd eeeeeeeeeeeeeeeeeeeee fffffffffffffffff ggggggggggggggggggggggg</TextBlock>
                <TextBlock Foreground="Red">aaaaaaaaaaaaaaaaaa bbbbbbbbbbbbbbbbbbbb cccccccccccccccccccccc dddddddddddddddddddddd eeeeeeeeeeeeeeeeeeeee fffffffffffffffff ggggggggggggggggggggggg</TextBlock>
                <TextBlock Foreground="Red">aaaaaaaaaaaaaaaaaa bbbbbbbbbbbbbbbbbbbb cccccccccccccccccccccc dddddddddddddddddddddd eeeeeeeeeeeeeeeeeeeee fffffffffffffffff ggggggggggggggggggggggg</TextBlock>
            </StackPanel>
        </ScrollViewer>
    </StackPanel>
</ScrollViewer>

【参考方案1】：

如果您可以使用代码隐藏，您可以为“子”ScollViewer 的PreviewMouseWheel 事件创建一个事件处理程序，并在事件处理程序中，您可以将MouseWheelEventArgs 信息传递给“父”ScrollViewer 引发自己的 MouseWheel 事件。

首先，将对 XAML 进行一些小的更改：

为“父级”ScrollViewer 命名，以便可以从代码隐藏中引用：

<ScrollViewer x:Name="parentScrollViewer"
              VerticalScrollBarVisibility="Auto"
              HorizontalScrollBarVisibility="Disabled">

为“子”ScrollViewer 的PreviewMouseWheel 事件创建事件处理程序：

<ScrollViewer VerticalScrollBarVisibility="Disabled"
              HorizontalScrollBarVisibility="Auto" 
              PreviewMouseWheel="ScrollViewer_PreviewMouseWheel">

最后，在事件处理程序中实现代码以引发“父”MouseWheel 事件：

private void ScrollViewer_PreviewMouseWheel(object sender, MouseWheelEventArgs e)

    var mouseWheelEventArgs = new MouseWheelEventArgs(e.MouseDevice, e.Timestamp, e.Delta);
    mouseWheelEventArgs.RoutedEvent = ScrollViewer.MouseWheelEvent;
    mouseWheelEventArgs.Source = sender;
    this.parentScrollViewer.RaiseEvent(mouseWheelEventArgs);