Clipping WPF elements in a canvas

Question

I am working on an interactive WPF graph/tree tool and have nodes and links between them placed in a canvas. The nodes are usercontrols and the links are simply Line shapes, and currently the links go from the centre of a node to another node's centre.

The problem arise when I want the nodes to be slightly transparent and one sees the links behind the nodes. I figured the most convenient solution would be to apply clipping or opacitymask to the lines, so they are not drawn behind the nodes, but I can't for the life of me figure out how?

Basically I can't figure out a bounding box geometry from the nodes to use as a clipping geometry for the lines. I am also interested in alternative solutions, of course!

Answer 1

We worked on something similar and our solution was to put links and nodes on different layers.

So if you want the nodes to appear above the links and the tips of the links to be hidden by the nodes, you just change the z-order of the layers so that the nodes layer is in front of the links-layer.

As layers we used VisualHosts (you find a VisualHost class here) an our node and link objects were DrawingVisuals.

Works fine and you don't need to hassle about finding the borders of your nodes etc.

Answer 2

The VisualTreeHelper.GetContentBounds() method seems to return Empty everytime.

An alternative solution to this problem is answered at

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

that uses bounding boxes to find intersection points to draw the lines from/to.

Answer 3

It would seem to me like you're overthinking the solution. Why not just change the logic for the links so that the lines begin/end at the correct side of the node instead of starting from the center??? You should only need to do a little more math to accomplish this.

That said, to get the bounding box of a Visual you can use the VisualTreeHelper::GetContentBounnds helper method.