允许在内部水平滚动 ScrollViewer 内部垂直滚动外部 ScrollViewer [英] Allow vertical scrolling of outer ScrollViewer inside inner horizontal-scrolling ScrollViewer

问题描述

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

When you have a ScrollViewer within a ScrollViewer, scrolling with the scroll wheel is limited to the inner one. That makes sense when they have the same "orientation". But when the outer allows only vertical scrolling, and the inner allows only horizontal scrolling, I'd expect scrolling with the mouse wheel inside the inner one to scroll vertically in the outer ScrollViewer. It doesn't. Is there a way to get it to do this?

在下面的代码中，尝试在红色字母区域内使用滚轮:

In the following code, try using the scroll wheel while inside the red letter area:

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

推荐答案

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

If you are ok with using code-behind, you can create an event handler for the PreviewMouseWheel event of the "child" ScollViewer, and within the event handler, you can pass the MouseWheelEventArgs information to the "parent" ScrollViewer to raise its own MouseWheel event.

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

First, there will be a couple of minor changes to the XAML:

为父"ScrollViewer 命名，以便它可以从代码隐藏中引用:

Give the "parent" ScrollViewer a name so it can be referenced from code-behind:

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

为子"ScrollViewer 的PreviewMouseWheel 事件创建一个事件处理程序:

Create an event handler for the PreviewMouseWheel event of the "child" ScrollViewer:

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

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

Finally, implement the code in the event handler to raise the "parent" MouseWheel event:

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

这篇关于允许在内部水平滚动 ScrollViewer 内部垂直滚动外部 ScrollViewer的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！