【UWP】多个ScrollViewer嵌套时鼠标滚轮事件的处理

背景

项目需要实现下图的布局: 页面根部为垂直滚动的ScrollViewer，其中包含纵向排列的StackPanel，StackPanel的子元素中包含横向滚动的ScrollViewer。

UWP提供的ScrollViewer控件对于触摸屏、触控板的操作逻辑适应良好，可随用户手势进行滚动，但对于鼠标滚轮就有些麻烦。默认情况下，当鼠标滚轮在HorizontalScrollViewer内滚动时，仅HorizontalScrollViewer内的布局面板发生滚动，而外层的VerticalScrollViewer是不发生变化的。但为了提供一致的体验，在用户使用鼠标滚轮滚动浏览页面时，应消除此逻辑引起的“体验割裂”。

解决方案

先上XAML:

<ScrollViewer x:Name="VerticalScrollViewer">
            <StackPanel Spacing="20" Name="VerticalPanel">
                <Rectangle Height="300" Width="1000" Fill="Black" />
                <Rectangle Height="300" Width="1000" Fill="Black" />
                <ScrollViewer VerticalScrollMode="Disabled" HorizontalScrollMode="Auto" HorizontalScrollBarVisibility="Visible">
                    <StackPanel Orientation="Horizontal" Spacing="20" PointerWheelChanged="StackPanel_PointerWheelChanged">
                        <Rectangle Height="300" Width="1000" Fill="Red" />
                        <Rectangle Height="300" Width="1000" Fill="Red" />
                        <Rectangle Height="300" Width="1000" Fill="Red" />
                        <Rectangle Height="300" Width="1000" Fill="Red" />
                    </StackPanel>
                </ScrollViewer>
                <Rectangle Height="300" Width="1000" Fill="Black" />
                <Rectangle Height="300" Width="1000" Fill="Black" />
            </StackPanel>
        </ScrollViewer>

注意到ScrollViewer本身是不会响应PointerWheelChanged这个事件的，应在横向滚动视图的子控件（横向StackPanel）声明。以下为C#代码：

private void StackPanel_PointerWheelChanged(object sender, PointerRoutedEventArgs e)
{
    int delta = e.GetCurrentPoint(sender as UIElement).Properties.MouseWheelDelta;
    VerticalScrollViewer.ChangeView(VerticalScrollViewer.HorizontalOffset, VerticalScrollViewer.VerticalOffset - delta, 1);
    e.Handled = true;
}

参考微软的UWP文档，利用传入的PointerRoutedEventArgs属性获取Properties，进而得到鼠标滚动滑动的增量，接着调用VerticalScrollViewer的ChangeView方法，横向Offset不变，纵向调整为原Offset减去鼠标滚轮滑动增量。

*注：若此处使用VerticalScrollViewer.VerticalOffset + delta会与用户原有鼠标操作习惯矛盾。关于MouseWheelDelta的正负，文档解释如下：

A positive value indicates that the wheel was rotated forward (away from the user) or tilted to the right; a negative value indicates that the wheel was rotated backward (toward the user) or tilted to the left.
正值表示鼠标滚轮向前（远离用户方向）或向右滚动；负值表示鼠标滚轮向后（靠近用户方向）或向左滚动。

此处向前滚动，按鼠标操作习惯即向上滚动，但依照ScrollViewer的坐标计算逻辑，向上滚动应减小Offset的值，故使用相减。

最后将传入PointerRoutedEventArgs的Handled属性设置为true，避免横向

ItemsControl的处理

考虑到用户使用鼠标操作时仍有横向滚动的需求，故在ItemsControl的ScrollViewer上层左右两侧放置按钮用于滚动。定义ControlTemplate如下：

<ControlTemplate x:Key="HorizontalScrollingDisabledGridViewTemplate"
			     TargetType="GridView">
    <Grid Background="{TemplateBinding Background}"
    	  BorderThickness="{TemplateBinding BorderThickness}"
    	  BorderBrush="{TemplateBinding BorderBrush}"
    	  CornerRadius="{TemplateBinding CornerRadius}">
        <Grid.Resources>
            <ResourceDictionary>
                <SolidColorBrush x:Key="ButtonBackground" Color="{ThemeResource SystemAltMediumColor}" />
                <SolidColorBrush x:Key="ButtonBorderBrush" Color="Transparent" />
                <SolidColorBrush x:Key="ButtonBackgroundPointerOver" Color="{ThemeResource SystemAltMediumHighColor}" />
                <SolidColorBrush x:Key="ButtonBorderBrushPointerOver" Color="Transparent" />
                <SolidColorBrush x:Key="ButtonBackgroundPressed" Color="{ThemeResource SystemAltHighColor}" />
            </ResourceDictionary>
        </Grid.Resources>
        <ScrollViewer x:Name="ScrollViewer"
        			  AutomationProperties.AccessibilityView="Raw"
        			  BringIntoViewOnFocusChange="{TemplateBinding ScrollViewer.BringIntoViewOnFocusChange}"
        			  HorizontalScrollBarVisibility="{TemplateBinding ScrollViewer.HorizontalScrollBarVisibility}"
        			  HorizontalScrollMode="{TemplateBinding ScrollViewer.HorizontalScrollMode}"
        			  IsDeferredScrollingEnabled="{TemplateBinding ScrollViewer.IsDeferredScrollingEnabled}"
        			  IsVerticalScrollChainingEnabled="{TemplateBinding ScrollViewer.IsVerticalScrollChainingEnabled}"
        			  IsHorizontalRailEnabled="{TemplateBinding ScrollViewer.IsHorizontalRailEnabled}"
        			  IsVerticalRailEnabled="{TemplateBinding ScrollViewer.IsVerticalRailEnabled}"
        			  IsHorizontalScrollChainingEnabled="{TemplateBinding ScrollViewer.IsHorizontalScrollChainingEnabled}"
        			  TabNavigation="{TemplateBinding TabNavigation}"
        			  VerticalScrollMode="{TemplateBinding ScrollViewer.VerticalScrollMode}"
        			  VerticalScrollBarVisibility="{TemplateBinding ScrollViewer.VerticalScrollBarVisibility}"
        			  ZoomMode="{TemplateBinding ScrollViewer.ZoomMode}">
            <ItemsPresenter Loaded="HorizontalScrollingDisabledGridViewItemsPresenter_Loaded"
            				Footer="{TemplateBinding Footer}"
            				FooterTransitions="{TemplateBinding FooterTransitions}"
            				FooterTemplate="{TemplateBinding FooterTemplate}"
            				Header="{TemplateBinding Header}"
            				HeaderTransitions="{TemplateBinding HeaderTransitions}"
            				HeaderTemplate="{TemplateBinding HeaderTemplate}"
            				Padding="{TemplateBinding Padding}" />
        </ScrollViewer>
        <Button Visibility="Collapsed" Click="HorizontalScrollingDisabledGridViewStepButton_Click"
        		Width="50" Height="50" CornerRadius="25" Margin="10"
        		HorizontalAlignment="Left" Tag="Left">
            <FontIcon Glyph="&#xE76B;" />
        </Button>
        <Button Click="HorizontalScrollingDisabledGridViewStepButton_Click"
        		Width="50" Height="50" CornerRadius="25" Margin="10"
        		HorizontalAlignment="Right" Tag="Right">
            <FontIcon Glyph="&#xE76C;" />
        </Button>
    </Grid>
</ControlTemplate>

该ControlTemplate中引用了两个方法 HorizontalScrollingDisabledGridViewItemsPresenter_Loaded 和 HorizontalScrollingDisabledGridViewStepButton_Click 。与前文同理，代码如下：

private void HorizontalScrollingDisabledGridViewItemsPresenter_Loaded(object sender, RoutedEventArgs e)
{
    var ParentScrollViewer = (sender as ItemsPresenter).Parent as ScrollViewer;
    // 利用 VisualTreeHelper 获取 ParentScrollViewer 的 Content Border ，监听 Border 的 PointerWheelChanged 事件，原理同上
    (VisualTreeHelper.GetChild(ParentScrollViewer, 0) as Border).PointerWheelChanged += (sender, e) =>
    {
        int delta = e.GetCurrentPoint(sender as UIElement).Properties.MouseWheelDelta;
        RootScrollViewer.ChangeView(RootScrollViewer.HorizontalOffset, RootScrollViewer.VerticalOffset - delta, 1);
        e.Handled = true;
    };
    // 监听 ParenScrollViewer 的 ViewChanged 事件，控制左右两侧按钮的显示
    ParentScrollViewer.ViewChanged += (sender, e) =>
    {
        var ParentGrid = VisualTreeHelper.GetParent(ParentScrollViewer) as Grid;
        (ParentGrid.Children[1] as Button).Visibility = (sender as ScrollViewer).HorizontalOffset > 0 ? Visibility.Visible : Visibility.Collapsed;
        (ParentGrid.Children[2] as Button).Visibility = (sender as ScrollViewer).HorizontalOffset + (sender as ScrollViewer).ActualWidth < ((sender as ScrollViewer).Content as ItemsPresenter).ActualWidth ? Visibility.Visible : Visibility.Collapsed;
    };
}

private void HorizontalScrollingDisabledGridViewStepButton_Click(object sender, RoutedEventArgs e)
{
	// 利用 Button 的 Tag 标定 ScrollViewer 滚动的方向
    double factor = (sender as Button).Tag.ToString() == "Left" ? -1 :
        (sender as Button).Tag.ToString() == "Right" ? 1 : 0;
    var HorizontalScrollViewer = ((sender as Button).Parent as Grid).Children[0] as ScrollViewer;
    // ScrollViewer 每次滚动半屏距离
    HorizontalScrollViewer.ChangeView(HorizontalScrollViewer.HorizontalOffset + factor * HorizontalScrollViewer.ActualWidth * 0.5, HorizontalScrollViewer.VerticalOffset, 1);
}

其中，前一个 Loaded 事件的响应也可以在 ScrollViewer 加载时完成。（一开始觉得应该监听 ItemsPresenter 的 PointerWheelChanged 事件，但测试发现 GridView 的其他区域（Header、Padding等）鼠标滚轮事件未被截获，故修改为上文方法。）

相似样例

Microsoft Store 主页的设计就与此相似。效果如下：

续

可加入快捷键控制下的横向滚动。修改Border的PointerWheelChanged响应代码如下：

int delta = e.GetCurrentPoint(sender as UIElement).Properties.MouseWheelDelta;
if (e.KeyModifiers == Windows.System.VirtualKeyModifiers.Control || e.KeyModifiers == Windows.System.VirtualKeyModifiers.Shift)
    ParentScrollViewer.ChangeView(ParentScrollViewer.HorizontalOffset - delta, ParentScrollViewer.VerticalOffset, 1);
else RootScrollViewer.ChangeView(RootScrollViewer.HorizontalOffset, RootScrollViewer.VerticalOffset - delta, 1);
e.Handled = true;

至此，鼠标滚轮操作时执行垂直滚动，按下Control或Shift时执行水平滚动。