WPF中如何在Canvas上添加显示鼠标坐标的Label？

我正在基于复杂XAML开发C# WPF应用，修改Canvas上组件位置后部分组件消失，推测是操作失误或被其他组件遮挡。但因XAML存在问题，Visual Studio设计视图会崩溃，且组件数量过多难以逐一排查。运行应用时能看到Canvas上有空缺区域，但无法直接获取这些位置的Canvas.Left和Canvas.Top值，因此希望实现鼠标悬停时显示当前鼠标相对于Canvas的坐标。

失败的尝试 #

方法1：使用OnMouseOver事件 #

XAML代码如下，但系统提示该事件未被识别：

<Canvas Height="3000" Width="7000" 
        OnMouseOver="XY_Pos.Text='X : [' + Self.Left + '], Y : [' + Self.Top + ']'">
  <Label x:Name="XY_pos" Canvas.Top="100" Canvas.Left="100"/>
</Canvas>

方法2：使用ToolTipOpening事件 #

XAML代码：

<Canvas Height="3000" Width="7000"
        ToolTipOpening='Canvas_ToolTipOpening' 
        ToolTipService.ToolTip='Testing'>
  <Label x:Name="XY_pos" 
         Canvas.Top="100" Canvas.Left="100"/>
</Canvas>

对应的C#代码触发CS1061错误，原因是Canvas类型本身没有Left和Top属性：

private void Canvas_ToolTipOpening(object sender, ToolTipEventArgs e)
{
    e.Handled = true;
    XY_pos.Content = $"X=[{((Canvas)sender).Left}], Y=[{((Canvas)sender).Top}}]";
}

疑惑点解答 #

Canvas.Left和Canvas.Top是WPF的附加属性，这类属性的作用对象是Canvas的子元素，用于定义子元素在Canvas容器内的位置。而Canvas自身作为容器控件，它的位置由其父容器的布局规则决定，因此Canvas本身并不具备这两个属性。

可行解决方案 #

方案1：通过MouseMove事件显示鼠标坐标 #

在XAML中给Canvas添加MouseMove事件：

<Canvas x:Name="canvas1" MouseMove="canvas1_MouseMove">
</Canvas>

对应的C#事件处理方法，获取鼠标相对于Canvas的坐标并显示（可转为整数）：

private void canvas1_MouseMove(object sender, MouseEventArgs e)
{
    var mousePos = e.GetPosition(canvas1);
    canvas1.ToolTip = "X = " + ((int)mousePos.X).ToString() + "  ||  Y = " + ((int)mousePos.Y).ToString();
}

方案2：后台代码设置元素位置 #

如果需要通过代码动态设置Canvas子元素的位置，可使用Canvas.SetLeft和Canvas.SetTop附加属性：

UIElement uIElement = new UIElement();
canvas1.Children.Add(uIElement);
Canvas.SetLeft(uIElement, 100);
Canvas.SetTop(uIElement, 100);

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