WPF中MouseLeftButtonUp事件多数无法触发的原因及解决咨询

我在WPF中实现简单画线功能时，发现Canvas的MouseLeftButtonUp事件多数情况下无法触发，换成PreviewMouseLeftButtonUp也没用，设置e.Handled = true同样解决不了问题。

示例代码 #

XAML：

<Window x:Class="WPFTest.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
        xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
        xmlns:local="clr-namespace:WPFTest"
        mc:Ignorable="d"
        Title="MainWindow" Height="450" Width="800">
    <Grid>
        <Canvas x:Name="drawingCanvas" 
            MouseLeftButtonDown="drawingCanvas_MouseLeftButtonDown" 
            Background="White" 
            MouseMove="drawingCanvas_MouseMove" 
            MouseLeftButtonUp="drawingCanvas_MouseLeftButtonUp" />
    </Grid>
</Window>

C#：

namespace WPFTest
{
    public partial class MainWindow : Window
    {
        public MainWindow()
        {
            InitializeComponent();
            drawMode = false;
            startPoint = new Point();
            endPoint = new Point();
        }

        private bool drawMode;
        private bool alreadyForm;
        private Point startPoint;
        private Point endPoint;
        
        private void drawingCanvas_MouseLeftButtonDown(object sender, MouseButtonEventArgs e)
        {
            drawMode = true;
            alreadyForm = false;
            startPoint = e.GetPosition(drawingCanvas);
        }

        private void drawingCanvas_MouseLeftButtonUp(object sender, MouseButtonEventArgs e)
        {
            drawMode = false;
            alreadyForm = false;
            Debug.WriteLine("the event was detected.");
        }

        private void drawingCanvas_MouseMove(object sender, MouseEventArgs e)
        {
            if (drawMode)
            {
                if (alreadyForm) 
                     drawingCanvas.Children.RemoveAt(drawingCanvas.Children.Count-1);

                endPoint = e.GetPosition(drawingCanvas);

                Line newLine = new Line();
                newLine.X1 = startPoint.X;
                newLine.Y1 = startPoint.Y;
                newLine.X2 = endPoint.X;
                newLine.Y2 = endPoint.Y;

                newLine.Stroke = Brushes.Black;
                newLine.StrokeThickness = 4;

                drawingCanvas.Children.Add(newLine);

                alreadyForm = true;
            }
        }
    }
}

原因分析 #

核心问题是未捕获鼠标导致事件丢失：

• 按下鼠标后没有调用CaptureMouse()，当鼠标移动中意外移出Canvas范围，或者动态添加的Line元素干扰了事件路由，MouseLeftButtonUp事件会被发送到其他元素，而非Canvas。
• 另外，每次MouseMove时反复删除、添加Line的操作，会导致Canvas视觉树频繁变更，进一步干扰事件正常传递。

解决建议 #

1. 捕获鼠标确保事件接收 #

在MouseLeftButtonDown中捕获鼠标，MouseLeftButtonUp中释放，强制后续鼠标事件都发送到Canvas：

private void drawingCanvas_MouseLeftButtonDown(object sender, MouseButtonEventArgs e)
{
    drawMode = true;
    alreadyForm = false;
    startPoint = e.GetPosition(drawingCanvas);
    // 捕获鼠标
    drawingCanvas.CaptureMouse();
}

private void drawingCanvas_MouseLeftButtonUp(object sender, MouseButtonEventArgs e)
{
    drawMode = false;
    alreadyForm = false;
    Debug.WriteLine("the event was detected.");
    // 释放鼠标捕获
    drawingCanvas.ReleaseMouseCapture();
}

2. 优化画线逻辑，避免频繁增删元素 #

原逻辑每次移动都增删Line，效率低且易出问题，改为直接更新同一Line的终点：

// 新增成员变量存储当前绘制的Line
private Line currentLine;

private void drawingCanvas_MouseLeftButtonDown(object sender, MouseButtonEventArgs e)
{
    drawMode = true;
    startPoint = e.GetPosition(drawingCanvas);
    drawingCanvas.CaptureMouse();
    
    // 创建初始Line并添加到Canvas
    currentLine = new Line
    {
        X1 = startPoint.X,
        Y1 = startPoint.Y,
        X2 = startPoint.X,
        Y2 = startPoint.Y,
        Stroke = Brushes.Black,
        StrokeThickness = 4
    };
    drawingCanvas.Children.Add(currentLine);
}

private void drawingCanvas_MouseMove(object sender, MouseEventArgs e)
{
    if (drawMode && currentLine != null)
    {
        endPoint = e.GetPosition(drawingCanvas);
        // 直接更新Line的终点坐标
        currentLine.X2 = endPoint.X;
        currentLine.Y2 = endPoint.Y;
    }
}

private void drawingCanvas_MouseLeftButtonUp(object sender, MouseButtonEventArgs e)
{
    drawMode = false;
    currentLine = null;
    Debug.WriteLine("the event was detected.");
    drawingCanvas.ReleaseMouseCapture();
}

额外提示 #

如果使用PreviewMouseLeftButtonUp，需确保没有其他元素在事件路由中标记e.Handled = true，但最可靠的解决方式还是通过鼠标捕获保证事件能触发到目标Canvas。

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