WPF C# Drawing line by using coordinates of buttons

Question

I have 2 buttons created in code behind ,I am trying to draw a line that connects them by getting the button coordinates, but it doesn't work the way that I wanted , I am new to this , am I doing this the right way?

I searched internet for line connecting 2 controls, but I just want a simple one that make use of coordinates to connect them .

Here are my codes :

 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);
     }


 }

As you notice the X2 and Y2 coordinates I just random giving it a number but the X1 and Y1 is suppose to be drawn from the button but it is not.

The line is appearing somewhere else away from the button, but the coords I use are the coords of the button.

Also, I have to dynamically create many buttons from db, This is just testing out yet I am stuck here.

__EDIT____

trying out with 1 button , i realise when maximize and minimize , the coords are different , this is how it looks like , the button seems to increase its height everytime i click on it to generate the line .

i want the line to start from the end of the button width at the side , if its not possible , it will be good for the button to overlap the line but is that possible?

Answer 1

The main problem is that WPF mostly uses layout-based positioning ( Grid , DockPanel , etc), instead of Windows Forms, which is coordinate-based. This means, that real location of left top element's corner depends from layout control being used and its current settings (and yes, this usually blows up your mind, if you are very new to WPF).

If you want to manage position of elements by coordinates in WPF, then you should use Canvas (you can easily translate this sample from XAML to 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>