Silverlight Binding properties of a UIElement to properties of another UIElement dynamically

Question

A list of ellipses and lines are added as Children to LayoutRoot. Lines are connecting between ellipses.

How can I bind these two elements together so that when ellipse moves lines should also move?

How can I bind the X1property,X2property,Y1property,Y2property to center of ellipses?

Answer 1

1. Assume that the parent is a Canvas
2. Create a ValueConverter CenterPointConverter that converts the Ellipse into the X or Y value of the center, depending on the ConverterParameter

3. use element-to-element binding

   <Line X1="{Binding Ellipse1, Converter={StaticResource CenterPointConverter}, ConverterParameter=X}" X2="{Binding Ellipse2, Converter={StaticResource CenterPointConverter}, ConverterParameter=X}" Y1="{Binding Ellipse1, Converter={StaticResource CenterPointConverter}, ConverterParameter=Y}" X1="{Binding Ellipse2, Converter={StaticResource CenterPointConverter}, ConverterParameter=Y}"/>