Mindscape Blog » Blog Archive » WPF Diagrams: Dynamic connection point creation

WPF Diagrams: Dynamic connection point creation

In this blog post we take a look at one of our latest additions to the WPF Diagramming product, the ability to dynamicallyÂ add connection points to a node.

Say we want to design a node representing some kind of intersection in a network. The intersection has input flows and output flows. EachÂ input and outputÂ connection should have its own connection point to make it easier to follow the diagram, rather than having all the connections bunched up on one point.Â To make it flexible for the user, we want to be able to have a variable number of connection points on the node. Hence we want to be able to dynamically add and remove connection points from instances of this node.

Here is how we go about implementing such a node:

1. We start by creating a new class that extends from FlowDiagramNode.

2. Include an ObservableCollection<IDiagramConnectionPoint> field to hold all the connection points. I’m calling this _connectionPoints.

3. In the constructor, we setup all the initial connection points on this node, and add them all to the observable collection as follows:

public SampleNode1()
{
    _connectionPoints = new ObservableCollection<IDiagramConnectionPoint>();
 
    _connectionPoints.Add(new InboundConnectionPoint(this, Edge.Top));
    _connectionPoints.Add(new OutboundConnectionPoint(this, Edge.Bottom));
}

4. Now we want to override the FlowDiagramNode.ConnectionPoints property to return the observable collection.

5. As both outbound and inbound connection points are stored in the same collection, we need to implement the InboundConnectionPointsCore and OutboundConnectionPointsCore properties in a way that looks through our observable collection and picks out the appropriate points to return. One way to do this is as follows:

protected override IList<InboundConnectionPoint> InboundConnectionPointsCore
{
    get
    {
        List<InboundConnectionPoint> result = new List<InboundConnectionPoint>();
        foreach (IDiagramConnectionPoint point in _connectionPoints)
        {
            InboundConnectionPoint p = point as InboundConnectionPoint;
            if (p != null) { result.Add(p); }
        }
        return result;
    }
}

6. Done!

Connection points can now be freely added or removed from the observable collection which results in dynamic connection point creation and deletion at the graphical layer. Note that the above code simply illustrates how to get dynamic connection point creation and deletion working, some more logic is required to specify when exactly the connection point collection is modified.Â How you add and remove connection points is up to you as it’s likely application specific. You could allow there to always be 1 unused connection point available on a node by adding or deleting connection points when connections are made or removed from the node. Or you could have a control somewhere in your application or on the node itself which the user can use toÂ specify the number of input and output points.

Here are a couple of screenshots of one possible way dynamic connection point creation could be implemented. First we have network intersection node with one input point on the top, and one input point on the bottom as its initial state.

WPF Diagram node with two connection points

When the user introduces an input flow to the connection point on the top, a newÂ input point can be added to the node as seen in the next screenshot.Â This will allow additional inbound connections being introduced by the userÂ if necessary.

WPF Diagram node with three connection points

The WPF Diagramming products support this type of customisation because we know that nearly every application will require something different. Need to have a minimum or maximum number of connections? No problem – do whatever you require!

If you want to create some amazing diagrammatic visualizations with WPF then check out our WPF Flow Diagrams or WPF Star Diagrams products.