WPF C＃使用按钮坐标绘制线条

Question

我在后面的代码中创建了2个按钮，我试图绘制一条通过获取按钮坐标来连接它们的线，但它不能按照我想要的方式工作，我是新手，我这样做正确的方法？

我在互联网上搜索连接2个控件的线，但我只想要一个利用坐标连接它们的简单控件。

以下是我的代码：

 Button btn1 = new Button();
        btn1.Content = "Hello";
        btn1.Width = 150;
        btn1.HorizontalAlignment = System.Windows.HorizontalAlignment.Left;
        wrapPanel1.Children.Add(btn1);
        btn1.PreviewMouseDown += new MouseButtonEventHandler(btn1_MouseDown);


        Button btn2 = new Button();
        btn2.Content = "World";
        btn2.Width = 150;
        btn2.HorizontalAlignment = System.Windows.HorizontalAlignment.Right;
        btn2.PreviewMouseDown += new MouseButtonEventHandler(btn1_MouseDown);
        wrapPanel1.Children.Add(btn2);

    private void ShowLocation(ContentControl element)
     {
    var location = element.PointToScreen(new Point(0, 0));
   MessageBox.Show(string.Format(
                                  "{2}'s location is ({0}, {1})", 
                                   location.X, 
                                    location.Y, 
                                   element.Content));

   Line redLine = new Line();
   redLine.X1 = location.X;
   redLine.Y1 = location.Y;
   redLine.X2 = 323;
   redLine.Y2 = 167;


   //Create a red Brush
   SolidColorBrush redBrush = new SolidColorBrush();
   redBrush.Color = Colors.Red;

   //Set Line's width and color
   redLine.StrokeThickness = 4;
   redLine.Stroke = redBrush;

   // Add line to the Grid.
   wrapPanel1.Children.Add(redLine);

     }

  private void btn1_MouseDown(object sender, RoutedEventArgs e)
 {
     var element = sender as ContentControl;
     if (element != null)
     {
         ShowLocation(element);
     }


 }

当你注意到X2和Y2坐标时，我只是随机给它一个数字，但是假设X1和Y1是从按钮中提取的，但它不是。

该线出现在远离按钮的其他地方，但我使用的坐标是按钮的坐标。

另外，我必须从db动态创建许多按钮，这只是测试但我被困在这里。

__ EDIT ____

尝试使用1个按钮，我意识到当最大化和最小化时，坐标是不同的，这就是它的样子，按钮似乎每次点击它以增加它的高度来生成线。

我希望线条从侧面按钮宽度的末端开始，如果不可能，按钮重叠线条会有好处但是可能吗？

Answer 1

主要问题是WPF主要使用基于布局的定位（Grid，DockPanel等），而不是基于坐标的Windows窗体。这意味着，左上角元素角的真实位置取决于所使用的布局控制及其当前设置（是的，如果你是WPF的新手，这通常会让你大吃一惊。）

如果您想按WPF中的坐标管理元素的位置，那么您应该使用Canvas（您可以轻松地将此示例从XAML转换为C＃）：

    <Canvas>
        <Button Canvas.Left="10" Canvas.Top="10" Width="20" Height="20" Content="A"/>
        <Button Canvas.Left="50" Canvas.Top="50" Width="20" Height="20" Content="B"/>
        <Line Canvas.Left="30" Canvas.Top="30" X2="20" Y2="20" StrokeThickness="4" Stroke="Red"/>
    </Canvas>