Draw a connector between shapes in wpf

Question

I am creating some shapes from code behind dynamically and adding them to a Grid and further add the Grid to Canvas.

So when I double click on a shape I should be able to add some text which works fine. Now lets say I have two shapes on the Canvas and when I try to draw a line between these shapes for some reason the first shape gets pulled away to the bottom and the line starts from the middle of first shape.

I want the shape not to change the position and the line should start from the bottom of first shape. Please see the image for my problem.

Please help with your thoughts. Here is my code. Also I tried numerous posts eg: Getting the top left coordinates of a WPF UIElement. But none of them seem to help.

    private void CvsSurface_OnDrop(object sender, DragEventArgs e) //In this event I am creating a shape dynamically and adding to a grid which is then added to a canvas.
        {
            Shape result = null;
            Object droppedData = e.Data; //This part is not important

            /*Translate Drop Point in reference to Stack Panel*/
            Point dropPoint = e.GetPosition(this.cvsSurface);

            //Console.WriteLine(dropPoint);
            //Label lbl = new Label();
            //lbl.Content = draggedItem.Content;
            UIElement element = draggedItem.Content as UIElement;
            Shape s = element as Shape;
            if (s is Ellipse)
            {
                Ellipse ellipse = new Ellipse()
                {
                    Height = s.Height,
                    Width = s.Width,
                    Fill = s.Fill
                };
                result = ellipse;
            }
            else if (s is Rectangle)
            {
                Rectangle rectangle = new Rectangle()
                {
                    Height = s.Height,
                    Width = s.Width,
                    Fill = s.Fill
                };
                result = rectangle;
            }
            Grid sp = new Grid();
            sp.Children.Add(result);
            sp.MouseLeftButtonDown += Sp_MouseLeftButtonDown;
            sp.MouseLeftButtonUp += Sp_MouseLeftButtonUp;
            //sp.PreviewMouseLeftButtonUp += Sp_PreviewMouseLeftButtonUp;
            //sp.MouseLeftButtonUp += Sp_MouseLeftButtonUp;
            cvsSurface.Children.Add(sp);

            Canvas.SetLeft(sp, dropPoint.X);
            Canvas.SetTop(sp, dropPoint.Y);

        }

private void Sp_MouseLeftButtonUp(object sender, MouseButtonEventArgs e) // The purpose of this event lets say when some one clicks on a shape and drags the mouse to the other shape and when mouse up I want to draw a line between the shapes.
        {
            bool mouserelease = System.Windows.Input.Mouse.LeftButton == MouseButtonState.Pressed;
            if (!mouserelease)
            {
                x2 = e.GetPosition(stackpanel).X;
                y2 = e.GetPosition(stackpanel).Y;
                Line l = new Line();
                l.X1 = x1;
                l.Y1 = y1;
                l.X2 = x2;
                l.Y2 = y2;
                l.Margin = new Thickness(0, 19, 0, 0);
                l.Stroke = new SolidColorBrush(Colors.Black);
                l.StrokeThickness = 2;
                stackpanel.Children.Add(l);
            }
        }

 private void Sp_MouseLeftButtonDown(object sender, MouseButtonEventArgs e) //This method lets say if user clicks twice then he wants to add some text or if he single clicks then I am assuming he is trying to a drag and draw a line
        {
            stackpanel = sender as Grid; //Sorry, the stackpanel is a global variable name of type Grid. Its actually Grid stackpanel;

            if (e.ClickCount == 2)
            {
                dialog = new UserDialog()
                {
                    DataContext = this,
                    Height = 180,
                    Width = 400,
                    MaxHeight = 180,
                    MaxWidth = 400
                };
                dialog.ShowDialog();
            }
            else
            {
                x1 = e.GetPosition(stackpanel).X + 18;
                y1 = e.GetPosition(stackpanel).Y + 18;
                //x1 = GetPosition(stackpanel, cvsSurface).X;
                //y1 = GetPosition(stackpanel, cvsSurface).Y;
            }
        }