启用ScrollViewer触摸平移后覆盖拖拽行为的问题求助

我之前在开发WPF平板应用时，也碰到过完全一样的问题——ScrollViewer开启PanningMode后，ItemsControl里的拖拽项就失灵了。本质原因是WPF中ScrollViewer的触摸事件优先级更高，会抢先捕获触摸操作，导致你的MouseMove事件根本拿不到触发机会。下面是我试过的几个有效解决方案，你可以根据自己的场景选择：

1. 改用原生触摸事件实现拖拽（推荐） #

你之前用的MouseMove是触摸模拟的鼠标事件，优先级低于原生触摸事件。直接用TouchDown/TouchMove/TouchUp实现拖拽，不仅能绕过ScrollViewer的鼠标事件拦截，平板上的触摸体验也会更流畅。

代码示例 #

首先在可拖拽项上绑定触摸事件：

<ItemsControl.ItemTemplate>
    <DataTemplate>
        <Border x:Name="DraggableItem" Width="100" Height="100" Background="LightBlue"
                TouchDown="DraggableItem_TouchDown"
                TouchMove="DraggableItem_TouchMove"
                TouchUp="DraggableItem_TouchUp">
            <!-- 你的项内容 -->
        </Border>
    </DataTemplate>
</ItemsControl.ItemTemplate>

后台处理拖拽逻辑：

private bool _isDragging;
private Point _startTouchPoint;

private void DraggableItem_TouchDown(object sender, TouchEventArgs e)
{
    var item = sender as UIElement;
    // 记录触摸起始点
    _startTouchPoint = e.GetTouchPoint(item).Position;
    _isDragging = true;
    // 捕获触摸设备，防止ScrollViewer抢事件
    item.CaptureTouch(e.TouchDevice);
}

private void DraggableItem_TouchMove(object sender, TouchEventArgs e)
{
    if (!_isDragging) return;

    var item = sender as UIElement;
    var currentPoint = e.GetTouchPoint(item).Position;
    var delta = currentPoint - _startTouchPoint;

    // 替换成你的拖拽逻辑，比如移动元素位置
    Canvas.SetLeft(item, Canvas.GetLeft(item) + delta.X);
    Canvas.SetTop(item, Canvas.GetTop(item) + delta.Y);

    // 更新起始点，确保下一次移动计算正确
    _startTouchPoint = currentPoint;
    // 标记事件已处理，阻止ScrollViewer响应
    e.Handled = true;
}

private void DraggableItem_TouchUp(object sender, TouchEventArgs e)
{
    _isDragging = false;
    var item = sender as UIElement;
    // 释放触摸捕获
    item.ReleaseTouchCapture(e.TouchDevice);
}

2. 自定义ScrollViewer，控制触摸事件捕获 #

如果不想修改现有拖拽逻辑，可以自定义一个ScrollViewer，在触摸按下时判断是否点击的是可拖拽项，若是则不让ScrollViewer捕获触摸事件。

代码示例 #

自定义ScrollViewer类：

public class CustomScrollViewer : ScrollViewer
{
    protected override void OnTouchDown(TouchEventArgs e)
    {
        // 检查触摸源是否是你的可拖拽项（替换成你的项类型/标识）
        var draggableItem = e.OriginalSource as Border;
        if (draggableItem != null && draggableItem.Name == "DraggableItem")
        {
            // 让事件继续传递给子元素，不拦截
            e.Handled = false;
            return;
        }
        // 否则按原生逻辑处理滚动
        base.OnTouchDown(e);
    }
}

在XAML中替换原生ScrollViewer：

<local:CustomScrollViewer PanningMode="Both">
    <ItemsControl>
        <!-- ItemsControl内容 -->
    </ItemsControl>
</local:CustomScrollViewer>

3. 利用预览事件抢占事件处理 #

如果坚持使用鼠标事件，可以用隧道式的预览事件（PreviewMouseDown/PreviewMouseMove）——这类事件会先于ScrollViewer的事件触发，我们可以在预览事件里处理拖拽，并标记事件已处理，阻止ScrollViewer响应。

代码示例 #

private bool _isDragging;
private Point _startDragPoint;

private void DraggableItem_PreviewMouseDown(object sender, MouseButtonEventArgs e)
{
    if (e.LeftButton == MouseButtonState.Pressed)
    {
        _startDragPoint = e.GetPosition(null);
        _isDragging = true;
    }
}

private void DraggableItem_PreviewMouseMove(object sender, MouseEventArgs e)
{
    if (_isDragging && e.LeftButton == MouseButtonState.Pressed)
    {
        Point currentPoint = e.GetPosition(null);
        Vector delta = currentPoint - _startDragPoint;

        // 处理拖拽逻辑
        var item = sender as UIElement;
        Canvas.SetLeft(item, Canvas.GetLeft(item) + delta.X);
        Canvas.SetTop(item, Canvas.GetTop(item) + delta.Y);

        _startDragPoint = currentPoint;
        // 标记事件已处理，阻止ScrollViewer拿到事件
        e.Handled = true;
    }
}

private void DraggableItem_PreviewMouseUp(object sender, MouseButtonEventArgs e)
{
    _isDragging = false;
}

亲测这几个方案都能解决问题，其中第一个用原生触摸事件的方案在平板上体验最好，推荐优先尝试。

内容的提问来源于stack exchange，提问作者grinder22