WPF嵌套的ScrollViewers具有不同的PanningModes？

Question

我正在尝试创建一个类似于macOS Finder的列视图触摸屏界面，它是一系列水平堆叠的列表，其中每个列表都可以单独滚动（垂直），整个界面可以水平滚动，就像这样：

这是我的.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中 -- 我该如何做呢？

- josh2112

---

你能测试一下我的解决方案吗？我也很想知道如何解决这个问题！ - Dominic Jonas

谢谢你的答复 Jonas！我的触摸设备今天似乎出了点问题。期待能有一个可行的解决方案，我会尽快测试它。 - josh2112

Answer 1

我有一个解决方案，但有一个小问题。你需要“Touch Up”来切换PanningMode。 也许你可以发现这个bug，因为它可以在没有再次“Touch Up”的情况下工作。

---

在更改父级 ScrollViewer 的 PanningMode 后，Touch 事件不再路由到内部子级 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;
    }
}

预览

- Dominic Jonas

---

我也认为你可能正在尝试将子内部ScrollViewer的触摸事件冒泡到外部ScrollViewer，如果是这样，行为应该比ItemsControl高一级。但是这不起作用，因为内部ScrollViewer / ItemsControl是DataTemplate，所以它没有可视父级。 - josh2112

嗯...我不喜欢它...感觉很粗糙，而且很难激活水平滚动视图器...但它确实回答了问题，所以我会授予你赏金。 - josh2112

谢谢，但我并不希望你接受它们。我仍然对更好的解决方案感兴趣，并会在找到后尽快发布！ - Dominic Jonas

@DominicJonas，你找到更好的方法了吗？ - ogomrub

很抱歉，@ogomrub，不行。 - Dominic Jonas

Answer 2

作为一个业余爱好者，我在同样的问题上没有得到更好的答案。

经过一些研究，这里是我的做法。

它简单地使用了一个冒泡路由事件：TouchMove。 两个滚动查看器将按照panningmode给定的方式滚动。 但当用户滚动内部滚动查看器时，外部滚动查看器等待TouchMove事件，并且当事件到达外部滚动查看器时，它会检查源，如果事件是从内部滚动查看器生成的，则处理并滚动外部滚动查看器。

- Thabsheer Abdulla

Answer 3

这里是一个不同的工作解决方案，它使用类似附加的行为来使嵌套的滚动视图正常工作。

- Alexander Lutz