Simple WPF UI databinding - wpf

Question

I'm trying to write a simple WPF app that has two ellipses, joined by a line, like you might see in a network graph. When the ellipses are animated, I just want the joining line to automagically 'stick' to the canvas locations of the two ellipses that the line joins. The XAML is just a canvas:
<Window x:Class="UIDataBindingDemo.Window1"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
Title="Window1" Height="400" Width="400">
<Grid>
<Canvas x:Name="cnvExample" />
</Grid>
...and I'm just doing some really simple stuff in the constructor here:
using System;
using System.Windows;
using System.Windows.Controls;
using System.Windows.Data;
using System.Windows.Media;
using System.Windows.Media.Animation;
using System.Windows.Shapes;
namespace UIDataBindingDemo
{
/// <summary>
/// Interaction logic for Window1.xaml
/// </summary>
public partial class Window1 : Window
{
public Window1()
{
InitializeComponent();
// create 2 ellipses, one next to the other, and add them to the canvas
Ellipse el1 = new Ellipse();
Canvas.SetTop(el1, 100);
Canvas.SetLeft(el1, 100);
el1.Width = 20;
el1.Height = 20;
el1.Fill = Brushes.Red;
el1.Stroke = Brushes.Black;
Ellipse el2 = new Ellipse();
Canvas.SetTop(el2, 100);
Canvas.SetLeft(el2, 200);
el2.Width = 20;
el2.Height = 20;
el2.Fill = Brushes.Blue;
el2.Stroke = Brushes.Black;
cnvExample.Children.Add(el1);
cnvExample.Children.Add(el2);
// create a line that connects the 2 ellipses. Bind the two points that define this line to the
// locations of our ellipses, so the line always connects them, through animations, drag and drop
// operations, whatever.
Line line = new Line();
line.StrokeThickness = 3;
line.Stroke = Brushes.Black;
line.SetBinding(Line.X1Property, new Binding("(Canvas.Left)") { Source = el1 });
line.SetBinding(Line.X1Property, new Binding("(Canvas.Top)") { Source = el1 });
line.SetBinding(Line.X1Property, new Binding("(Canvas.Left)") { Source = el2 });
line.SetBinding(Line.X1Property, new Binding("(Canvas.Top)") { Source = el2 });
cnvExample.Children.Add(line);
// animate the second ellipse, so it moves down and to the right, nice and slow
var moveTheBlueOne = new DoubleAnimation(300, TimeSpan.FromSeconds(10));
el2.BeginAnimation(Canvas.LeftProperty, moveTheBlueOne);
el2.BeginAnimation(Canvas.TopProperty, moveTheBlueOne);
}
}
I'm pretty new to WPF, and I'm sure I'm missing something simple. Why am I not seeing the line?

Answer 1

I don't know if it's a cut and paste error but youre assigning each binding to the same DependencyProperty "Line.X1Property", you should use all four X and Y properties to define a starting point and an ending one for a line.
line.SetBinding(Line.X1Property, new Binding("(Canvas.Left)") { Source = el1 });
line.SetBinding(Line.Y1Property, new Binding("(Canvas.Top)") { Source = el1 });
line.SetBinding(Line.X2Property, new Binding("(Canvas.Left)") { Source = el2 });
line.SetBinding(Line.Y2Property, new Binding("(Canvas.Top)") { Source = el2 });
this way it works for me.