具有不同平移模式的 WPF 嵌套滚动查看器？

Question

我正在尝试创建一个类似于 macOS Finder 列 View 的触摸屏界面，它是一系列水平堆叠的列表，其中每个列表都可以单独(垂直)滚动，而整个列表可以水平滚动，如下所示:



这是我的 .NET 4.6.1“最小可行代码示例”来演示我在做什么:

前端:

<Window x:Class="TestNestedScroll.MainWindow"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:local="clr-namespace:TestNestedScroll"
    Title="MainWindow" Height="500" Width="800"
    DataContext="{Binding RelativeSource={RelativeSource Self}}">

    <ScrollViewer HorizontalScrollBarVisibility="Auto" VerticalScrollBarVisibility="Disabled" PanningMode="HorizontalOnly">
        <ItemsControl ItemsSource="{Binding Columns}">
            <ItemsControl.ItemsPanel>
                <ItemsPanelTemplate>
                    <StackPanel Orientation="Horizontal"/>
                </ItemsPanelTemplate>
            </ItemsControl.ItemsPanel>
            <ItemsControl.ItemTemplate>
                <DataTemplate>
                    <ScrollViewer VerticalScrollBarVisibility="Auto" HorizontalScrollBarVisibility="Disabled" PanningMode="VerticalOnly">
                        <ItemsControl ItemsSource="{Binding Rows}">
                            <ItemsControl.ItemTemplate>
                                <DataTemplate>
                                    <Rectangle Width="300" Height="100" Fill="Purple" Margin="20"/>
                                </DataTemplate>
                            </ItemsControl.ItemTemplate>
                        </ItemsControl>
                    </ScrollViewer>
                </DataTemplate>
            </ItemsControl.ItemTemplate>
        </ItemsControl>

    </ScrollViewer>
</Window>

后端:

using System.Collections.Generic;
using System.Linq;
using System.Windows;

namespace TestNestedScroll
{
    public partial class MainWindow : Window
    {
        public class Row {}

        public class Column { public List<Row> Rows { get; } = Enumerable.Repeat( new Row(), 20 ).ToList(); }

        public List<Column> Columns { get; } = Enumerable.Repeat( new Column(), 10 ).ToList();

        public MainWindow()
        {
            InitializeComponent();
        }
    }
}

现在我只能以一种方式让它工作——要么我关掉 PanningMode在内部滚动查看器上，我可以滚动外部 ScrollViewer左右，还是我设置 PanningMode="VerticalOnly" (或 Both 或 VerticalFirst ，无关紧要)在内滚动查看器上，它们可以单独垂直滚动，但水平 ScrollViewer停止工作。

有没有办法使这项工作？也许是内部的横向触摸事件 ScrollViewers必须被捕获并手动冒泡到父级 ScrollViewer不知何故——我该怎么做？

Answer 1

我有一个小错误的解决方案。您必须“Touch Up”才能切换PanningMode .
也许您可以再次找到它在没有“Touch Up”的情况下工作的错误。

更改后PanningMode parent 的 ScrollViewer , Touch事件不再路由到内在 child ScrollViewer .所以我也尝试将触摸事件路由回父级 ScrollViewer .也许我的逻辑有错误。

<ScrollViewer x:Name="Daddy" HorizontalScrollBarVisibility="Auto" VerticalScrollBarVisibility="Disabled" PanningMode="HorizontalOnly">
        <ItemsControl ItemsSource="{Binding Columns}">
            <ItemsControl.ItemsPanel>
                <ItemsPanelTemplate>
                    <WrapPanel />
                </ItemsPanelTemplate>
            </ItemsControl.ItemsPanel>
            <ItemsControl.ItemTemplate>
                <DataTemplate>
                    <ScrollViewer VerticalScrollBarVisibility="Auto" HorizontalScrollBarVisibility="Disabled" PanningMode="VerticalOnly">
                        <ItemsControl ItemsSource="{Binding Rows}">
                            <ItemsControl.ItemTemplate>
                                <DataTemplate>
                                    <Rectangle Width="300" Height="100" Fill="Purple" Margin="20"/>
                                </DataTemplate>
                            </ItemsControl.ItemTemplate>
                        </ItemsControl>
                        <i:Interaction.Behaviors>
                            <local:BubbleTouch ParentElement="{Binding ElementName=Daddy}"/>
                        </i:Interaction.Behaviors>
                    </ScrollViewer>
                </DataTemplate>
            </ItemsControl.ItemTemplate>
        </ItemsControl>
    </ScrollViewer>

public class BubbleTouch : Behavior<ScrollViewer>
{
    public ScrollViewer ParentElement
    {
        get => (ScrollViewer) GetValue(ParentElementProperty);
        set => SetValue(ParentElementProperty, value);
    }

    /// <summary>
    /// The <see cref="ParentElement"/> DependencyProperty.
    /// </summary>
    public static readonly DependencyProperty ParentElementProperty = DependencyProperty.Register("ParentElement", typeof(ScrollViewer), typeof(BubbleTouch), new PropertyMetadata(null));

    private Brush _DefaultBrush;

    protected override void OnAttached()
    {
        base.OnAttached();
        AssociatedObject.TouchMove += _ChildMove;
        AssociatedObject.TouchDown += _ChildDown;
        AssociatedObject.TouchUp += _ChildUp;
        ParentElement.TouchMove += _ParentMove;
        ParentElement.TouchDown += _ParentDown;
        ParentElement.TouchUp += _ParentUp;
    }

    protected override void OnDetaching()
    {
        AssociatedObject.TouchMove -= _ChildMove;
        AssociatedObject.TouchDown -= _ChildDown;
        AssociatedObject.TouchUp -= _ChildUp;
        base.OnDetaching();
    }

    private TouchPoint _ParentStartPosition;
    private bool _ParentTouchDown;
    private bool _ParentMoving;

    private void _ParentDown(object sender, TouchEventArgs e)
    {
        _ParentTouchDown = true;
        _ParentStartPosition = e.GetTouchPoint(Application.Current.MainWindow);
    }

    private void _ParentMove(object sender, TouchEventArgs e)
    {
        if (_ParentTouchDown && !_ParentMoving)
        {
            double deltaX = _ParentStartPosition.Bounds.X - e.GetTouchPoint(Application.Current.MainWindow).Bounds.X;
            double deltaY = _ParentStartPosition.Bounds.Y - e.GetTouchPoint(Application.Current.MainWindow).Bounds.Y;

            Trace.WriteLine($"{deltaX} | {deltaY}");

            if (deltaX > deltaY && deltaX > 5)
            {
                AssociatedObject.PanningMode = PanningMode.None;
                AssociatedObject.Background = Brushes.Aqua;
                ParentElement.PanningMode = PanningMode.HorizontalOnly;
                _ParentMoving = true;
            }
            else if (deltaY > deltaX && deltaY > 5)
            {
                AssociatedObject.PanningMode = PanningMode.VerticalOnly;
                AssociatedObject.Background = Brushes.ForestGreen;
                ParentElement.PanningMode = PanningMode.HorizontalOnly;
                _ParentMoving = true;
            }
        }
    }
    
    private void _ParentUp(object sender, TouchEventArgs e)
    {
        _ParentTouchDown = false;
        _ParentMoving = false;
        AssociatedObject.Background = _DefaultBrush;
    }
    
    private TouchPoint _ChildStartPosition;
    private bool _ChildTouchDown;
    private bool _ChildMoving;

    private void _ChildDown(object sender, TouchEventArgs e)
    {
        _DefaultBrush = AssociatedObject.Background;
        _ChildTouchDown = true;
        _ChildStartPosition = e.GetTouchPoint(Application.Current.MainWindow);
    }

    private void _ChildMove(object sender, TouchEventArgs e)
    {
        if (_ChildTouchDown && !_ChildMoving)
        {
            double deltaX = _ChildStartPosition.Bounds.X - e.GetTouchPoint(Application.Current.MainWindow).Bounds.X;
            double deltaY = _ChildStartPosition.Bounds.Y - e.GetTouchPoint(Application.Current.MainWindow).Bounds.Y;

            Trace.WriteLine($"{deltaX} | {deltaY}");

            if (deltaX > deltaY && deltaX > 5)
            {
                AssociatedObject.PanningMode = PanningMode.None;
                AssociatedObject.Background = Brushes.Aqua;
                ParentElement.PanningMode = PanningMode.HorizontalOnly;
                _ChildMoving = true;
            }
            else if (deltaY > deltaX && deltaY > 5)
            {
                AssociatedObject.PanningMode = PanningMode.VerticalOnly;
                AssociatedObject.Background = Brushes.ForestGreen;
                ParentElement.PanningMode = PanningMode.HorizontalOnly;
                _ChildMoving = true;
            }
        }

        if (AssociatedObject.PanningMode == PanningMode.None)
        {
            e.Handled = true;
        }
    }

    private void _ChildUp(object sender, TouchEventArgs e)
    {
        AssociatedObject.Background = _DefaultBrush;
        _ChildTouchDown = false;
        _ChildMoving = false;
    }
}

预览