处理ScrollView Manipulation时，如何屏蔽自定义列表内Button误触发点击

通过记录触摸位移阈值区分滚动操作与点击操作，再全局拦截Button的误触Click事件，无需直接访问Button控件。

实现思路 #

1. 监听容器的Pointer事件，记录初始触摸位置，当触摸位移超过设定阈值时标记为滚动状态
2. 使用AddHandler全局监听所有Button的Click事件（包括已被标记为处理的事件）
3. 在全局Click处理逻辑中，若检测到是滚动后的误触，则标记事件为已处理，阻止后续逻辑执行

修改后的C#代码 #

public sealed partial class MainWindow : Window
{
    private double previousOffset;
    private Point? _initialTouchPoint;
    private bool _isScrolling;
    private uint? _currentPointerId;

    public MainWindow()
    {
        this.InitializeComponent();
        this.stack.ManipulationMode = ManipulationModes.All;
        this.stack.ManipulationDelta += this.Content_ManipulationDelta;
        this.stack.ManipulationStarting += this.Content_ManipulationStarting;
        
        // 监听Pointer事件，标记滚动状态
        this.stack.PointerPressed += Stack_PointerPressed;
        this.stack.PointerMoved += Stack_PointerMoved;
        this.stack.PointerReleased += Stack_PointerReleased;
        this.stack.PointerCanceled += Stack_PointerReleased;
        
        // 全局监听所有Button的Click事件，handledEventsToo=true确保能拦截已处理的事件
        this.stack.AddHandler(Button.ClickEvent, new RoutedEventHandler(GlobalButtonClickHandler), true);
    }

    private void Stack_PointerPressed(object sender, PointerRoutedEventArgs e)
    {
        if (e.Pointer.PointerDeviceType == Microsoft.UI.Input.PointerDeviceType.Mouse)
            return;
            
        _currentPointerId = e.Pointer.PointerId;
        _initialTouchPoint = e.GetCurrentPoint(stack).Position;
        _isScrolling = false;
    }

    private void Stack_PointerMoved(object sender, PointerRoutedEventArgs e)
    {
        if (_initialTouchPoint == null || e.Pointer.PointerId != _currentPointerId)
            return;
            
        var currentPoint = e.GetCurrentPoint(stack).Position;
        var deltaY = Math.Abs(currentPoint.Y - _initialTouchPoint.Value.Y);
        
        // 设置位移阈值（可根据需求调整），超过则标记为滚动操作
        if (deltaY > 10)
        {
            _isScrolling = true;
        }
    }

    private void Stack_PointerReleased(object sender, PointerRoutedEventArgs e)
    {
        // 重置状态
        _initialTouchPoint = null;
        _currentPointerId = null;
    }

    private void GlobalButtonClickHandler(object sender, RoutedEventArgs e)
    {
        // 如果是滚动后的误触，拦截Click事件
        if (_isScrolling)
        {
            e.Handled = true;
        }
    }

    // 原有滚动逻辑保持不变
    private void Content_ManipulationStarting(object sender, ManipulationStartingRoutedEventArgs e)
    {
        this.previousOffset = this.scrollview.VerticalOffset;
    }

    private void Content_ManipulationDelta(object sender, ManipulationDeltaRoutedEventArgs e)
    {
        if (e.PointerDeviceType == Microsoft.UI.Input.PointerDeviceType.Mouse)
        {
            return;
        }

        this.scrollview.ScrollToVerticalOffset(this.previousOffset - e.Cumulative.Translation.Y);
    }

    bool changed;

    private void Button_Click(object sender, RoutedEventArgs e)
    {
        if (changed)
            borderControl.Background = new SolidColorBrush(Colors.Red);
        else
            borderControl.Background = new SolidColorBrush(Colors.Green);

        changed = !changed;
    }
}

方案说明 #

• 位移阈值：设置10px的垂直位移阈值是合理的，既能过滤滚动操作带来的误触，又不会影响正常的点击（正常点击的位移通常远小于该值）
• 全局事件监听：通过AddHandler的handledEventsToo: true参数，确保能捕获所有Button的Click事件，无论Button是否自行处理了该事件
• 状态管理：在PointerReleased/Canceled事件中重置状态，避免影响下一次触摸操作

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