WPF：添加的线条未显示在图像上。

Question

我试图在一张图片的顶部添加一条线。到目前为止，当我在一个新项目中使用网格和图片时添加一行是可行的。

另一方面，当我在另一个项目中使用相同的代码，同时还使用了其他元素的网格和图片时，添加的线不会显示出来。我猜想这条线被添加了，但被隐藏在图片本身或其他控件、网格或边框后面。所以我的问题是，如何将我的线放在图片的最上层？

grid2.Children.Add(myLine);   

大纲如下： 窗口 -> 网格1-> 边框-> 网格2-> 图像（在此图像上我想添加一条线）

线元素：

    // Add a Line Element
    static Line myLine = new Line
    {
        Stroke = Brushes.GreenYellow,
        StrokeThickness = 2,
        Visibility = Visibility.Visible
    };

在这里，我阅读了关于该行的两个观点：

private void image_zoom0_MouseLeftButtonDown(object sender, MouseButtonEventArgs e)
    {
        if (e.LeftButton == MouseButtonState.Pressed)                                   
        {
            if (_firstPoint)
            {
                grid2.Children.Remove(myLine);                                      // remove line first
                System.Windows.Point position = Mouse.GetPosition(image_zoom0);
                myLine.X1 = position.X;
                myLine.Y1 = position.Y;
                _firstPoint = false;
            }
            else
            {
                System.Windows.Point position = Mouse.GetPosition(image_zoom0);
                myLine.X2 = position.X;
                myLine.Y2 = position.Y;
                _firstPoint = true;

                grid2.Children.Add(myLine);                                         // draw line
                Canvas.SetZIndex(myLine,99);
            }
        }
    }

- Norick

---

我用鼠标点击读取该行的两个点（如上所示）。 - Norick

如果我读入新的点，我希望删除已添加到图像中的前一行。 - Norick

是的，但你在一个地方使用了 grid1，在另一个地方使用了 grid2。这就是为什么强烈建议为您的 UI 元素使用适当的名称，以避免此类错误。 - Clemens

而不是不断地向网格添加和删除行，您可以切换其可见性。 - Clemens

好的，你是对的，这确实是个拼写错误。我在我的代码中进行了更改。不幸的是，它仍然没有在图像顶部显示行 :( 我需要为行或图像设置另一个 ZIndex 吗？ - Norick

Answer 1

我不确定你对这段代码有什么期望的行为。然而，我创建了一个示例wpf应用程序，并完全复制了image_zoom0_MouseLeftButtonDown方法。

注意-

• 我已经为图像添加了Stretch="UniformToFill"，以便它占据整个屏幕。
• 我已将_firstPoint初始化为"false"。

XAML

<Window x:Class="WpfApplication2.MainWindow"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    Title="MainWindow" Height="350" Width="525" WindowState="Maximized">
<Grid x:Name="grid1">
    <Border>
        <Grid x:Name="grid2">
            <Image x:Name="image_zoom0" Source="Background3.jpg" MouseLeftButtonDown="image_zoom0_MouseLeftButtonDown"  Stretch="UniformToFill"/>
        </Grid>
    </Border>
</Grid>

代码后台

public partial class MainWindow : Window
{
    public MainWindow()
    {
        InitializeComponent();
    }

    static Line myLine = new Line
    {
        Stroke = Brushes.GreenYellow,
        StrokeThickness = 2,
        Visibility = Visibility.Visible
    };

    bool _firstPoint;

    private void image_zoom0_MouseLeftButtonDown(object sender, MouseButtonEventArgs e)
    {
        if (e.LeftButton == MouseButtonState.Pressed)
        {
            if (_firstPoint)
            {
                grid2.Children.Remove(myLine);                                      // remove line first
                System.Windows.Point position = Mouse.GetPosition(image_zoom0);
                myLine.X1 = position.X;
                myLine.Y1 = position.Y;
                _firstPoint = false;
            }
            else
            {
                System.Windows.Point position = Mouse.GetPosition(image_zoom0);
                myLine.X2 = position.X;
                myLine.Y2 = position.Y;
                _firstPoint = true;

                grid2.Children.Add(myLine);                                         // draw line
                //Canvas.SetZIndex(myLine, 99);
            }
        }
    }
}

现在根据MouseLeftButtonDown内部编写的逻辑，当您首次单击图像时，将从窗口的左上角绘制一条线到当前鼠标位置。第二次单击将简单地删除该线。第三次单击将再次从您先前的鼠标位置绘制一条线到当前鼠标位置，第四次单击将再次删除它，依此类推。

- Gaurav Mathur