How to draw a line between two WPF controls using dependency properties? - wpf

Question

I need to draw a line connecting two WPF controls. I have defined a dependency property in my Node objects so if the Node is moved the line still connect the objects.
I have the following example but I'm unable to get it working.
public partial class MainWindow : Window
{
public MainWindow()
{
InitializeComponent();
Node node1 = new Node(myCanvas) { Width = 50, Height = 50 };
Node node2 = new Node(myCanvas) { Width = 50, Height = 50 };
Canvas.SetLeft(node1, 0);
Canvas.SetLeft(node2, 200);
Canvas.SetTop(node1, 0);
Canvas.SetTop(node2, 0);
myCanvas.Children.Add(node1);
myCanvas.Children.Add(node2);
Connector conn = new Connector();
conn.Source = node1.AnchorPoint;
conn.Destination = node2.AnchorPoint;
myCanvas.Children.Add(conn);
}
}
class Node : Control
{
public static readonly DependencyProperty AnchorPointProperty =
DependencyProperty.Register(
"AnchorPoint", typeof(Point), typeof(Node),
new FrameworkPropertyMetadata(new Point(0, 0),
FrameworkPropertyMetadataOptions.AffectsMeasure));
public Point AnchorPoint
{
get { return (Point)GetValue(AnchorPointProperty); }
set { SetValue(AnchorPointProperty, value); }
}
private Canvas mCanvas;
public Node(Canvas canvas)
{
mCanvas = canvas;
this.LayoutUpdated += Node_LayoutUpdated;
}
void Node_LayoutUpdated(object sender, EventArgs e)
{
Size size = RenderSize;
Point ofs = new Point(size.Width / 2, size.Height / 2);
AnchorPoint = TransformToVisual(this.mCanvas).Transform(ofs);
}
protected override void OnRender(DrawingContext drawingContext)
{
drawingContext.DrawEllipse(
Brushes.Red,
null,
new Point(Width / 2, Height / 2), Width / 2, Height / 2);
}
}
public sealed class Connector : UserControl
{
public static readonly DependencyProperty SourceProperty =
DependencyProperty.Register(
"Source", typeof(Point), typeof(Connector),
new FrameworkPropertyMetadata(default(Point)));
public Point Source {
get { return (Point)this.GetValue(SourceProperty); }
set { this.SetValue(SourceProperty, value); }
}
public static readonly DependencyProperty DestinationProperty =
DependencyProperty.Register(
"Destination", typeof(Point), typeof(Connector),
new FrameworkPropertyMetadata(default(Point)));
public Point Destination {
get { return (Point)this.GetValue(DestinationProperty); }
set { this.SetValue(DestinationProperty, value); }
}
public Connector()
{
LineSegment segment = new LineSegment(default(Point), true);
PathFigure figure = new PathFigure(default(Point), new[] { segment }, false);
PathGeometry geometry = new PathGeometry(new[] { figure });
BindingBase sourceBinding =
new Binding { Source = this, Path = new PropertyPath(SourceProperty) };
BindingBase destinationBinding =
new Binding { Source = this, Path = new PropertyPath(DestinationProperty) };
BindingOperations.SetBinding(
figure, PathFigure.StartPointProperty, sourceBinding);
BindingOperations.SetBinding(
segment, LineSegment.PointProperty, destinationBinding);
Content = new Path
{
Data = geometry,
StrokeThickness = 5,
Stroke = Brushes.White,
MinWidth = 1,
MinHeight = 1
};
}
}

Answer 1

All you have to do to make your example work is to bind conn.Source and .Destination to the nodes' AnchorPoints, or else the Connector just get the AnchorPoints' initial values (0,0), and doesn't listen for further changes:
...
Connector conn = new Connector();
//conn.Source = node1.AnchorPoint;
conn.SetBinding(Connector.SourceProperty,
new Binding()
{
Source = node1,
Path = new PropertyPath(Node.AnchorPointProperty)
});
//conn.Destination = node2.AnchorPoint;
conn.SetBinding(Connector.DestinationProperty,
new Binding()
{
Source = node2,
Path = new PropertyPath(Node.AnchorPointProperty)
});
myCanvas.Children.Add(conn);