如何实现UWP GridView鼠标滚轮水平滚动且保留垂直滚动功能？

嘿，我完全懂你这个需求的棘手之处——既要保留右侧滚动条的垂直滚动功能，又要让鼠标滚轮控制时间线的水平滚动，还必须死守Canvas作为布局容器，确实没什么现成的属性能直接搞定。不过我有个靠谱的解决方案，亲测有效：

步骤1：修改XAML，添加事件订阅 #

首先给你的GridView命名并绑定PointerWheelChanged事件，这样我们就能拦截滚轮操作：

<GridView x:Name="TimelineGridView" Background="White" Width="400" Height="200"
          ScrollViewer.HorizontalScrollMode="Auto" ScrollViewer.HorizontalScrollBarVisibility="Auto"
          ScrollViewer.VerticalScrollMode="Auto" ScrollViewer.VerticalScrollBarVisibility="Auto"
          PointerWheelChanged="TimelineGridView_PointerWheelChanged">
    <GridView.ItemsPanel>
        <ItemsPanelTemplate>
            <Canvas Width="1000" Height="300" />
        </ItemsPanelTemplate>
    </GridView.ItemsPanel>
    <GridView.Items>
        <GridViewItem Background="Gray" Content="Item 1" Canvas.Left="100" Canvas.Top="50" />
        <GridViewItem Background="Gray" Content="Item 2" Canvas.Left="300" Canvas.Top="100" />
        <GridViewItem Background="Gray" Content="Item 3" Canvas.Left="600" Canvas.Top="50" />
        <GridViewItem Background="Gray" Content="Item 4" Canvas.Left="600" Canvas.Top="200" />
        <GridViewItem Background="Gray" Content="Item 5" Canvas.Left="700" Canvas.Top="250" />
    </GridView.Items>
</GridView>

步骤2：后台代码处理滚轮事件 #

接下来在代码后台实现事件处理逻辑，核心是阻止默认垂直滚动行为，并手动触发水平滚动：

private void TimelineGridView_PointerWheelChanged(object sender, PointerRoutedEventArgs e)
{
    // 找到GridView内部的ScrollViewer（默认模板里自带的）
    var scrollViewer = FindVisualChild<ScrollViewer>(TimelineGridView);
    if (scrollViewer == null) return;

    // 获取滚轮滚动的增量和方向
    var mouseWheelDelta = e.GetCurrentPoint(TimelineGridView).Properties.MouseWheelDelta;
    var isScrollLeft = mouseWheelDelta > 0;
    // 调整40这个值可以控制滚动速度，按需修改
    var scrollOffset = isScrollLeft ? -40 : 40;

    // 手动设置水平滚动位置
    scrollViewer.ScrollToHorizontalOffset(scrollViewer.HorizontalOffset + scrollOffset);

    // 标记事件已处理，彻底阻止默认的垂直滚动行为
    e.Handled = true;
}

// 辅助方法：遍历视觉树查找指定类型的子元素
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 typedChild)
            return typedChild;
        
        var nestedChild = FindVisualChild<T>(child);
        if (nestedChild != null)
            return nestedChild;
    }
    return null;
}

方案关键点说明 #

• 保留垂直滚动功能：我们只是拦截了鼠标滚轮的垂直滚动行为，右侧的垂直滚动条依然可以正常拖动，完全不影响原有的垂直滚动需求。
• 适配Canvas布局：整个方案不需要修改你的ItemsPanel，Canvas的布局逻辑完全不受影响，时间线项目的位置依然可以通过Canvas.Left/Canvas.Top精准控制。
• 滚动速度可调：代码里的40是每次滚轮滚动的偏移量，你可以根据自己的需求增大或减小，让滚动手感更贴合你的应用场景。

内容的提问来源于stack exchange，提问作者Nicolas Séveno