【问题标题】:Allow vertical scrolling of outer ScrollViewer inside inner horizontal-scrolling ScrollViewer允许在内部水平滚动 ScrollViewer 内垂直滚动外部 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>

【问题讨论】:

    标签: c# .net wpf xaml


    【解决方案1】:

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

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

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

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

    为“子”ScrollViewerPreviewMouseWheel 事件创建事件处理程序:

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

    【讨论】: