Connections Overview

Connections are created between two points. The Source and Target dependency properties are of type Point and are usually bound to a connector’s Anchor point.

Table of contents

• Base connection
• Line connection
• Circuit connection
• Bezier connection
• Step connection
• Pending connection
• Custom connection

Using connections

In the NodifyEditor, you can customize both the default connection and the pending connection by assigning a custom DataTemplate to the ConnectionTemplate and PendingConnectionTemplate properties, respectively.

• ConnectionTemplate: defines the appearance of established connections between nodes.
• PendingConnectionTemplate: specifies the visual appearance of connections that are in the process of being created (i.e., while the connection is being dragged but not yet completed).

To customize these, simply set your desired DataTemplate on the NodifyEditor instance.

Base connection

The base class for all connections provided by the library is BaseConnection which derives from Shape. There’s no restriction to derive from BaseConnection when you create a custom connection.

It exposes two commands with their corresponding events:

• DisconnectCommand, respectively DisconnectEvent - fired when the connection is clicked while holding ALT
• SplitCommand, respectively SplitEvent - fired when the connection is double-clicked

The Direction of a connection can have two values:

• Forward

• Backward

The SourceOffset and the TargetOffset work together with OffsetMode and will keep a distance from the anchor point:

Connections also have a Spacing which will make the connection break the angle at a certain distance from the Source and Target points:

• With spacing:

• Without spacing:

Settings the ArrowSize to “0, 0” will remove the arrowhead.

Line connection

A straight line from Source to Target.

Circuit connection

It has an Angle dependency property to control where it breaks. Angle is in degrees.

Connection

A bezier curve between Source and Target.

Step connection

A multi-segment angled wire between Source and Target. It has two additional parameters: SourcePosition and TargetPosition.

Pending Connection

A pending connection can be created from a connector and dropped on either an ItemContainer (if AllowOnlyConnectors is false) or a Connector.

Content of a pending connection can be customized using the ContentTemplate. If EnablePreview is true, the PreviewTarget will be updated with the connector or item container under the mouse cursor or null if there’s no such element.

The visibility of pending connections can be controlled using the IsVisible dependency property.

Connection snapping to connectors can be enabled using the EnableSnapping dependency property.

The Source and the Target properties are data contexts of connectors and the Target will be updated when the pending connection is completed.

There’s also a StartedCommand which takes the Source as the parameter, respectively a CompletedCommand which takes the Target as the parameter.

[!TIP] Canceling a pending connection is done by releasing the right mouse button.

Custom connection

In some cases, the built-in connections may not provide all the features you need, or your application may need to display hundreds of connections simultaneously. While the built-in connections are feature-rich, they may introduce some overhead that could impact performance. In such cases, you can implement a custom connection to better suit your needs.

There are several ways to implement a custom connection:

• Derive from one of the existing connection classes and override the appropriate methods.
• Create a custom control or user control that wraps a built-in connection.
• Implement a custom connection from scratch.

Considerations for Implementing a Custom Connection from Scratch

• The cutting line feature requires the connection type to be added to the NodifyEditor.CuttingConnectionTypes collection (see Cuttline Line - Custom Connections)
• For selection functionality, you must set the nodify:BaseConnection.IsSelectable attached property to true on the root element.
• To control the selection state, bind to the nodify:BaseConnection.IsSelected attached property on the root element.

Example:

<Line X1="{Binding Source.Anchor.X}"
      X2="{Binding Target.Anchor.X}"
      Y1="{Binding Source.Anchor.Y}"
      Y2="{Binding Target.Anchor.Y}"
      StrokeThickness="5"
      nodify:BaseConnection.IsSelectable="True"
      nodify:BaseConnection.IsSelected="{Binding IsSelected}">
    <Line.Style>
        <Style TargetType="Line">
            <Setter Property="Stroke"
                    Value="Red" />
            <Style.Triggers>
                <Trigger Property="nodify:BaseConnection.IsSelected"
                         Value="True">
                    <Setter Property="Stroke"
                            Value="Green" />
                </Trigger>
                <Trigger Property="nodify:BaseConnection.IsSelectable"
                         Value="True">
                    <Setter Property="Cursor"
                            Value="Hand" />
                </Trigger>
            </Style.Triggers>
        </Style>
    </Line.Style>
</Line>