Question

I’m trying to connect a line between two ellipses where if one was dragged the line would move with it. I have a canvas and inside that are two stackpanels… in each stackpanel is an ellipse on the left… content control in the middle… and another ellipse on the right. The idea is to connect a line between the right ellipse from one stackpanel to the left ellipse in the second stackpanel. So far I have this but can’t seem to get much farther as the propertypath being used to do the binding doesn’t make too much sense to me… which is why I have a Canvas in there right now.

Line line = new Line();
line.Stroke = connectedEllipse.Fill;
line.StrokeThickness = 2;

Binding x1 = new Binding();
Binding x2 = new Binding();
Binding y1 = new Binding();
Binding y2 = new Binding();

x1.Path = new PropertyPath(Canvas.LeftProperty);
x2.Path = new PropertyPath(Canvas.LeftProperty);
y1.Path = new PropertyPath(Canvas.TopProperty);
y2.Path = new PropertyPath(Canvas.TopProperty);

x1.Source = y1.Source = connectedEllipse;
x2.Source = y2.Source = (sender as Ellipse);

line.SetBinding(Line.X1Property, x1);
line.SetBinding(Line.X2Property, x2);
line.SetBinding(Line.Y1Property, y1);
line.SetBinding(Line.Y2Property, y2);

Answer 1

Ok I’ve hacked up some code which doesn’t use the attached properties method. This probably isn’t “good” code since I wrote it up in 20 minutes but it will get you started.

MainWindow.xaml

<Window x:Class="EllipseTest.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:my="clr-namespace:EllipseTest"
        Title="MainWindow" Height="350" Width="525" Loaded="Window_Loaded" >
    <Window.Resources>
        <ControlTemplate x:Key="template1">
            <Ellipse Width="60" Height="30" Fill="Blue" />
        </ControlTemplate>
    </Window.Resources>
    <Canvas Name="canvas">
        <my:ExtendedThumb x:Name="thumb1" Canvas.Left ="0" Canvas.Top="0" DragDelta="myThumb_DragDelta" Template="{StaticResource template1}" />
        <my:ExtendedThumb x:Name="thumb2" Canvas.Left ="50" Canvas.Top="20" DragDelta="myThumb_DragDelta" Template="{StaticResource template1}" />
    </Canvas>
</Window>

MainWindow.xaml.cs

using System;
using System.Collections.Generic;
using System.Linq;
using System.Text;
using System.Windows;
using System.Windows.Controls;
using System.Windows.Data;
using System.Windows.Documents;
using System.Windows.Input;
using System.Windows.Media;
using System.Windows.Media.Imaging;
using System.Windows.Navigation;
using System.Windows.Shapes;

namespace EllipseTest
{
   /// <summary>
   /// Interaction logic for MainWindow.xaml
   /// </summary>
   public partial class MainWindow : Window
   {
      Path path;

      public MainWindow()
      {
         InitializeComponent();
      }

      private void myThumb_DragDelta(object sender, System.Windows.Controls.Primitives.DragDeltaEventArgs e)
      {
         ExtendedThumb thumb = e.Source as ExtendedThumb;
         Canvas.SetLeft(thumb, Canvas.GetLeft(thumb) + e.HorizontalChange);
         Canvas.SetTop(thumb, Canvas.GetTop(thumb) + e.VerticalChange);
         if (thumb == thumb1)
            UpdateLine(thumb, thumb2);
         else
            UpdateLine(thumb1, thumb);
      }

      private void UpdateLine(ExtendedThumb firstThumb, ExtendedThumb secondThumb)
      {
         double left1 = Canvas.GetLeft(firstThumb);
         double top1 = Canvas.GetTop(firstThumb);

         double left2 = Canvas.GetLeft(secondThumb);
         double top2 = Canvas.GetTop(secondThumb);

         thumb1.ConnectingLine.StartPoint = new Point(left1 +firstThumb.ActualWidth / 2, top1 + firstThumb.ActualHeight / 2);
         thumb1.ConnectingLine.EndPoint = new Point(left2 + secondThumb.ActualWidth / 2, top2 + secondThumb.ActualHeight / 2);

         thumb2.ConnectingLine.StartPoint = new Point(left2 + secondThumb.ActualWidth / 2, top2 + secondThumb.ActualHeight / 2);
         thumb2.ConnectingLine.EndPoint = new Point(left1 + firstThumb.ActualWidth / 2, top1 + firstThumb.ActualHeight / 2);

      }

      private void Window_Loaded(object sender, RoutedEventArgs e)
      {
         path = new Path();
         path.Stroke = Brushes.Black;
         path.StrokeThickness = 2;

         canvas.Children.Add(path);

         LineGeometry line = new LineGeometry();
         path.Data = line;

         thumb1.ConnectingLine = line;
         thumb2.ConnectingLine = line;

         UpdateLine(thumb1, thumb2);

      }
   }
}

ExtendedThumb.cs

using System;
using System.Collections.Generic;
using System.Windows.Controls.Primitives;
using System.Windows.Media;
using System.Linq;
using System.Text;

namespace EllipseTest
{
   public class ExtendedThumb : Thumb
   {
      public LineGeometry ConnectingLine { get; set; }

      public ExtendedThumb() : base() { ConnectingLine = new LineGeometry(); }
   }
}

Also, I got the idea from the contents of this link: http://denisvuyka.wordpress.com/2007/10/13/wpf-draggable-objects-and-simple-shape-connectors/