UWP应用中ListView嵌套多个GridView时ScrollViewer滚动异常问题

场景描述 #

我正在做一个文件浏览界面，用垂直布局的ListView展示不同文件夹，每个文件夹内部用单行水平滚动的GridView来显示文件。核心XAML结构如下：

<ListView ItemsSource={Binding CollectionOfFolders}>
    <ListView.ItemTemplate>
        <GridView>
            <GridView.ItemsPanel>
                <ItemsPanelTemplate>
                    <ItemsWrapGrid Loaded="WrapGridLoaded" MaximumRowsOrColumns="1" Orientation="Vertical" />
                </ItemsPanelTemplate>
            </GridView.ItemsPanel>
            <GridView.ItemTemplate>
                <!-- 文件项模板 -->
            </GridView.ItemTemplate>
        </GridView>
    </ListView.ItemTemplate>
</ListView>

界面效果类似这样：

问题 #

触摸操作时一切正常：上下滑动可以滚动外层ListView切换文件夹，左右滑动可以滚动内层GridView浏览文件。但使用鼠标滚轮或触摸板双指滚动时，只要光标在GridView区域内，所有滚动操作都会被GridView捕获，完全无法触发外层ListView的垂直滚动，体验很差。

已尝试的方案 #

我试过调整滚动模式、IsVerticalScrollChainingEnabled/IsHorizontalScrollChainingEnabled属性，修改滚动条和滚动导轨的可见性，还查找过相关问题（比如《Ignore horizontal mouse scrolling with nested ScrollViewer》《ScrollViewer IsHorizontalScrollChainingEnabled and IsHorizontalRailEnabled functionality》），但都没找到适配这个场景的解决方案。

可行的解决思路与方案 #

方案1：XAML层面禁用GridView的垂直滚动（优先尝试）

因为你的GridView是单行布局，垂直方向本来就不需要滚动空间，直接禁用GridView的垂直滚动模式，这样垂直方向的滚动事件会自动传递给外层ListView：

<ListView ItemsSource={Binding CollectionOfFolders}>
    <ListView.ItemTemplate>
        <!-- 给GridView添加垂直滚动禁用的属性 -->
        <GridView ScrollViewer.VerticalScrollMode="Disabled"
                  ScrollViewer.IsVerticalScrollChainingEnabled="True">
            <GridView.ItemsPanel>
                <ItemsPanelTemplate>
                    <ItemsWrapGrid Loaded="WrapGridLoaded" MaximumRowsOrColumns="1" Orientation="Vertical" />
                </ItemsPanelTemplate>
            </GridView.ItemsPanel>
            <GridView.ItemTemplate>
                <!-- 文件项模板 -->
            </GridView.ItemTemplate>
        </GridView>
    </ListView.ItemTemplate>
</ListView>

原理：当GridView的垂直滚动被禁用后，它不会处理垂直方向的滚轮事件，事件会沿着视觉树向上冒泡，被外层ListView的ScrollViewer捕获，从而触发垂直滚动。

方案2：代码后台处理滚轮事件，手动转发垂直滚动

如果方案1没有效果，可以通过监听GridView内部ScrollViewer的滚轮事件，判断滚动方向后手动触发外层ListView的滚动：

首先在WrapGridLoaded事件中找到GridView的ScrollViewer并绑定事件：

private void WrapGridLoaded(object sender, RoutedEventArgs e)
{
    var wrapGrid = sender as ItemsWrapGrid;
    var gridView = FindParent<GridView>(wrapGrid);
    if (gridView == null) return;

    var scrollViewer = FindVisualChild<ScrollViewer>(gridView);
    if (scrollViewer != null)
    {
        scrollViewer.PointerWheelChanged += OnGridViewScrollViewerWheelChanged;
    }
}

然后实现事件处理逻辑：

private void OnGridViewScrollViewerWheelChanged(object sender, PointerRoutedEventArgs e)
{
    var scrollViewer = sender as ScrollViewer;
    var pointerPoint = e.GetCurrentPoint(scrollViewer);
    
    // 判断是否为垂直滚动（优先处理垂直方向的滚轮输入）
    if (Math.Abs(pointerPoint.Properties.MouseWheelDelta) > Math.Abs(pointerPoint.Properties.MouseWheelDeltaHorizontal))
    {
        // 找到外层的ListView和它的ScrollViewer
        var listView = FindParent<ListView>(scrollViewer);
        var outerScrollViewer = listView != null ? FindVisualChild<ScrollViewer>(listView) : null;
        
        if (outerScrollViewer != null)
        {
            // 计算滚动偏移量（120是鼠标滚轮的标准Delta单位，10是每次滚动的步长，可调整）
            var scrollOffset = outerScrollViewer.VerticalOffset - pointerPoint.Properties.MouseWheelDelta / 120 * 10;
            outerScrollViewer.ScrollToVerticalOffset(scrollOffset);
            
            // 标记事件已处理，避免GridView处理垂直滚动
            e.Handled = true;
        }
    }
}

// 辅助方法：向上查找指定类型的父元素
private T FindParent<T>(FrameworkElement element) where T : FrameworkElement
{
    var parent = VisualTreeHelper.GetParent(element) as FrameworkElement;
    while (parent != null && !(parent is T))
    {
        parent = VisualTreeHelper.GetParent(parent) as FrameworkElement;
    }
    return parent as T;
}

// 辅助方法：向下查找指定类型的子元素
private T FindVisualChild<T>(DependencyObject parent) where T : DependencyObject
{
    for (int i = 0; i < VisualTreeHelper.GetChildrenCount(parent); i++)
    {
        var child = VisualTreeHelper.GetChild(parent, i);
        if (child is T target)
        {
            return target;
        }
        var result = FindVisualChild<T>(child);
        if (result != null)
        {
            return result;
        }
    }
    return null;
}

这个方案的核心是拦截GridView的滚轮事件，当检测到是垂直滚动时，手动控制外层ListView的滚动，并阻止GridView处理该事件，从而实现预期的滚动交互。

内容的提问来源于stack exchange，提问作者tocto