与Menu共存时Canvas鼠标Y坐标偏移问题咨询

问题描述 #

在myCanvas_MouseMove方法中，点击Canvas的Y坐标0或1位置时，获取到的Y值约为18像素，疑惑为何Menu会导致Canvas的Y坐标出现这种偏移。

相关代码 #

XAML代码 #

<DockPanel LastChildFill="True" >
    
    <Menu DockPanel.Dock="Top">
        <MenuItem Header="_Plik">
            <MenuItem Header="_Zapisz" Click="MenuItem_Click"/>
            <MenuItem Header="_Otwórz" Click="MenuItem_Click_1"/>
        </MenuItem>
    </Menu>

    <Canvas x:Name="myCanvas" MouseDown="myCanvas_MouseDown" MouseMove="myCanvas_MouseMove" DockPanel.Dock="Top" ClipToBounds="True">
        <Canvas.Background>
            <SolidColorBrush Color="White" Opacity="100"/>
        </Canvas.Background>
    </Canvas>
</DockPanel>

C#代码 #

private void myCanvas_MouseMove(object sender, MouseEventArgs e)
{
    if(e.LeftButton == MouseButtonState.Pressed)
    {
        Point newPoint = new Point();

        newPoint = e.GetPosition((this)); // <-wrong Y coordinates

        Line myLine = new Line();
        myLine.Stroke = Brushes.Red;

        myLine.X1 = currentPoint.X;
        myLine.Y1 = currentPoint.Y;
        myLine.X2 = newPoint.X;
        myLine.Y2 = newPoint.Y;
        currentPoint = newPoint;
        myCanvas.Children.Add(myLine);
    }
    
}

原因分析 #

问题出在e.GetPosition(this)这行代码：

• this指代整个窗口（或当前页面），获取的是鼠标相对于窗口整体的坐标。
• 由于Menu通过DockPanel.Dock="Top"停靠在窗口顶部，它占据了约18px的高度，导致Canvas的顶部边缘在窗口中的Y坐标就是18px左右。所以点击Canvas的最顶部，相对于窗口的Y值自然是Menu的高度，而非Canvas自身的0坐标。

解决方法 #

将获取坐标的参照对象从窗口（this）改为Canvas自身即可：

newPoint = e.GetPosition(myCanvas); // 获取相对于Canvas的坐标

这样点击Canvas的顶部时，就能得到正确的Y=0的坐标值，绘制的线条也会贴合Canvas的实际位置。

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