我正在尝试创建类似于macOS Finder的列 View 的触摸屏界面，该列 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上-我该怎么做？ 最佳答案
我为您提供了一个小错误的解决方案。您必须“Touch Up”以切换PanningMode。
也许您可以找到没有“Touch Up”就可以正常工作的错误。
更改父PanningMode的ScrollViewer后，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;
}
}
关于WPF嵌套的ScrollViewer具有不同的PanningModes？，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/51328951/