Connecting two shapes together, Silverlight 2

Question

I'm looking to connect or glue together two shapes or objects with a Line. These shapes will be generated dynamically, meaning I'll be calling a Web service on the backend to determine how many objects/shapes need to be created. Once this is determined, I'll need to have the objects/shapes connected together.

The method signature may look like this (similar to Visio's drawing capabilities):

GlueTogether(objButton1, objButton2);

I may need to get the position of each Rectangle shape or Button to determine where the starting Line point is. Then determine the second shape/objects position to draw the line.

Any help or suggestions would be great!

Answer 1

1. Use a Path or a Line below the shapes in stacking order or z index
2. Use instance.TransformToVisual() to get the transform of each shape
3. Use the transform to transform the centerpoint of each shape
4. Draw a line between the two centerpoints.

---

var transform1 = shape1.TransformToVisual(shape1.Parent as UIElement);
var transform2 = shape2.TransformToVisual(shape2.Parent as UIElement);

var lineGeometry = new LineGeometry()
{
  StartPoint = transform1.Transform(new Point(shape1.ActualWidth / 2, shape1.ActualHeight / 2.0)),
  EndPoint = transform2.Transform(new Point(shape2.ActualWidth / 2.0,    shape2.ActualHeight / 2.0))
};

var path = new Path()
{
Data = lineGeometry
};

Answer 2

I am trying much the same, but instead of the line going from one centre to the other I want the lines to stop at the edge of the two shapes. In particular I have arrows at the end of the lines, and the arrows need to stop at the bounds of the shapes instead of going inside/behind the shape to its centre.

My shape is a usercontrol with a grid and rectangle, and some labels and other stuff. I can't find any methods that provide me with a geometry for the edge of the shape (which is a rounded rectangle).

I figured out a solution that uses the bounding box and intersection points to connect my elements by lines at their approximate edges, and it works well for me using arrow ended lines.

See Connecting two WPF canvas elements by a line, without using anchors?

Answer 3

Check this out: http://www.graphspe.com/Main.aspx#/Solution/graphviz-xaml-renderer

All you have to do is printf to a string and you get your Silverlight[2|3] diagram.

Ceyhun

Answer 4

In addition... Instead of connecting to the center point of your objects, I've modified the same code from Michael S. to:

var lineGeometry = new LineGeometry()
{
    StartPoint = transform1.Transform(new Point(1 , b1.ActualHeight / 2.0)),
    EndPoint = transform2.Transform(new Point(b2.ActualWidth , b2.ActualHeight / 2.0))
};

This will connect at the outer portions of each object.

Answer 5

I am using the above code to draw two buttons, I want a line between those two buttons, but all i get are two buttons that look like tiny circles and no line.

code:

Button b1 = new Button();
Button b2 = new Button();
canvas1.Children.Add(b1);
canvas1.Children.Add(b2);
Canvas.SetLeft(b1, 300);

var transform1 = b1.TransformToVisual(b1.Parent as UIElement);
var transform2 = b2.TransformToVisual(b2.Parent as UIElement);

var lineGeometry = new LineGeometry()
{
    StartPoint = transform1.Transform(new Point(1, b1.ActualHeight / 2.0)),
    EndPoint = transform2.Transform(new Point(b2.ActualWidth, b2.ActualHeight / 2.0))
};

var path = new Path()
{
    Data = lineGeometry
};

canvas1.Children.Add(path);