WPF C# Canvas Drawing Line connecting buttons

Question

i am testing out how to draw a line that connects the button to another button upon clicking the the button, i got confuse with the coordinates and the settop setleft , how do they actually work in simple terms. i know that we have to set the X2 Y2 ( subtract of start point with end point ) of the line, but i really confuse at what to subtract and how do i do this .

this is so far what i have tried:

 int k = 20;
 for (int i = 0; i < 4; i++)
 {
      Button btn = new Button();
      btn.Content = i.ToString();
      btn.Height = 20;
      btn.Width = 20;
      Canvas.SetTop(btn,k); // 20
      Canvas.SetLeft(btn, 20); // 10 
      Canvas1.Children.Add(btn);
      btn.PreviewMouseDown += (source, e) =>
      {
          // No idea how to set X2 , Y2 for the line's end point.
          Line line = new Line();
          //line.X2 = ;
          //line.Y2 = ;
          line.Stroke = Brushes.Red;
          line.StrokeThickness = 4;
          Canvas.SetLeft(line,40); // Suppose this is where the line should start 
          Canvas.SetTop(line ,40); // for button " 0 " .
          Canvas1.Children.Add(line);
      };
      k += 20;
 }
 for (int i = 0; i < 4; i++)
 {
      Button btn2 = new Button();
      btn2.Content = i.ToString();
      btn2.Height = 20;
      btn2.Width = 20;
      Canvas.SetTop(btn2, k); // 20
      Canvas.SetRight(btn2, 20); // 10
      Canvas1.Children.Add(btn2);
      btn2.PreviewMouseDown += (source, e) =>
      {
          //Draw Line to connect here.
      };
      k += 20;
  }

i am trying to draw a line from btn to btn2 .

And also , how do i adjust the buttons to be in the same level, for now the right buttons ( btn2 ) is abit lower than the left buttons ( btn) and i want to draw a line to connect the right buttons to the left buttons upon clicking button 0 , so 0 will draw a line to 0 .

Answer 1

Whilst you can do it by moving the Canvas around, you might be better off using the positions of the Buttons themselves on the Canvas .

Essentially, you need to have two sets of coordinates, your LineStart and LineEnd , which in this case will be obtained from the two different Buttons you're clicking.

You could use Point location = ((Button)source).TransformToAncestor(Canvas1).Transform(new Point(0, 0)) to obtain the location of the button being clicked, relative to the parent Canvas .

You would then need to do a similar thing to find the location of the original object that you had clicked (which you don't seem to be storing). You could then simply draw a line between the two calculated Points by setting the X1, X2, Y1, Y2 values.

Adapting your example, you could do something like this (just to demonstrate):

public partial class MainWindow : Window
{
    public Button LastClicked { get; set; }

    public MainWindow()
    {
        InitializeComponent();

        InitButtons();
    }


    public void InitButtons()
    {
        int k = 20;

        for (int i = 0; i < 4; i++)
        {
            Button btn = new Button();
            btn.Content = i.ToString();
            btn.Height = 20;
            btn.Width = 20;
            Canvas.SetTop(btn, k); // 20
            Canvas.SetLeft(btn, 20); // 10 
            Canvas1.Children.Add(btn);
            btn.PreviewMouseDown += (source, e) =>
            {
                if (LastClicked != null)
                {
                    // Get button locations.
                    Point LastClickedLocation = LastClicked.TransformToAncestor(Canvas1).Transform(new Point(0, 0));
                    Point ThisClickedLocation = ((Button)source).TransformToAncestor(Canvas1).Transform(new Point(0, 0));

                    // Stop same side lines.
                    if (LastClickedLocation.X != ThisClickedLocation.X)
                    {
                        Line line = new Line();

                        line.X1 = LastClickedLocation.X;
                        line.Y1 = LastClickedLocation.Y + btn.Height / 2; // Button Middle.
                        line.X2 = ThisClickedLocation.X + btn.Width; // Adjust Left side.
                        line.Y2 = ThisClickedLocation.Y + btn.Height / 2; // Button Middle.

                        line.Stroke = Brushes.Red;
                        line.StrokeThickness = 4;

                        Canvas1.Children.Add(line);
                    }
                }

                LastClicked = (Button)source;
            };
            k += 20;
        }

        k = 20; // Reset k, this is why your buttons weren't aligned.

        for (int i = 0; i < 4; i++)
        {
            Button btn2 = new Button();
            btn2.Content = i.ToString();
            btn2.Height = 20;
            btn2.Width = 20;
            Canvas.SetTop(btn2, k); // 20
            Canvas.SetRight(btn2, 20); // 10
            Canvas1.Children.Add(btn2);

            btn2.PreviewMouseDown += (source, e) =>
            {
                if (LastClicked != null)
                {
                    // Get button locations.
                    Point LastClickedLocation = LastClicked.TransformToAncestor(Canvas1).Transform(new Point(0, 0));
                    Point ThisClickedLocation = ((Button)source).TransformToAncestor(Canvas1).Transform(new Point(0, 0));

                    // Stop same side lines.
                    if (LastClickedLocation.X != ThisClickedLocation.X)
                    {
                        Line line = new Line();

                        line.X1 = LastClickedLocation.X + btn2.Width; // Adjust Left side.
                        line.Y1 = LastClickedLocation.Y + btn2.Height / 2; // Button Middle.
                        line.X2 = ThisClickedLocation.X;
                        line.Y2 = ThisClickedLocation.Y + btn2.Height / 2; // Button Middle.

                        line.Stroke = Brushes.Red;
                        line.StrokeThickness = 4;

                        Canvas1.Children.Add(line);
                    }
                }

                LastClicked = (Button)source;
            };
            k += 20;
        }
    }
}

I wouldn't recommend using this exact code, as it's not particularly bright about handling Button clicks and deciding when to draw lines, but it should demonstrate the drawing and obtaining coordinates that you're after.