Question

我有一个包含图像的网格（顶部有2行，我将在稍后使用的机器人）和另一个包含4个单选按钮的网格。

当用户点击图片时，他点击的点会显示一个十字。

代码的一部分：

<Grid Grid.Column="2">
    <Grid.RowDefinitions>
        <RowDefinition Height="*"/>
        <RowDefinition Height="auto"/>
    </Grid.RowDefinitions>

    <Image Grid.Row="0"
           x:Name="ImageViewer"
           Source="{Binding Picture}"
           HorizontalAlignment="Stretch"
           VerticalAlignment="Stretch"
           MouseDown="Image_MouseDown"
           MouseMove="ImageViewer_MouseMove"
           MouseUp="Image_MouseUp"/>

    <local:Cross Grid.Row="0"
                 CenterPoint="{Binding Point1}"
                 Foreground="Red"/>

    <!-- Grid.Row="1" - Grid with RadioButtons -->
</Grid>

有事件：

protected bool StartMove = false;
private void Image_MouseDown(object sender, MouseButtonEventArgs e)
{
    if (e.ChangedButton == MouseButton.Left)
    {
        StartMove = true;
        Point p = e.GetPosition(ImageViewer);
        DrawPoint(p);
    }
}
private void Image_MouseUp(object sender, MouseButtonEventArgs e)
{
    if (e.ChangedButton == MouseButton.Left)
    {
        StartMove = false;
    }
}
private void ImageViewer_MouseMove(object sender, MouseEventArgs e)
{
    if (e.LeftButton == MouseButtonState.Pressed && StartMove)
    {
        Point p = e.GetPosition(ImageViewer);
        DrawPoint(p);
    }
}

当图像尺寸合适（无边框）时，正确绘制十字。点击我的猫眼就可以了：

但如果我调整窗口大小，十字架就会移动。我想坐标是考虑到白色空间计算的，但我不知道如何防止这种情况。

有同样的观点：

Answer 1

十字架由setNeedsDisplay()元素绘制。此元素布局与local:Cross匹配，您希望它相对于Image绘制交叉。

确实如此。

问题在于Image（忽略它正在扩大它的大小）也拉伸其源图像。您可以尝试将Image.Stretch设置为Fill或使用其他布局解决问题（例如Image，使Stretch="None"和Cross的位置和大小相等

Answer 2

事实上，正是你的形象不是十字架。您的问题是您正在捕捉相对于Image UI元素的位置，因此当您调整主窗口的大小时，您还要调整Image元素的大小。

可能的解决方案：

固定大小的图像元素
或者，在调整大小时重新计算十字架的位置
或者，将图像对齐到图像的左上角

覆盖图像上的元素

2 个答案: