AutomaticPortCreation in WPF Diagram (SfDiagram)

11 Jan 20241 minute to read

Diagram provides an option to create a port dynamically by clicking and dragging the mouse over any node or connector. This behavior is disabled by default and can be enabled by using GraphConstraints.AutomaticPortCreation. To draw connector, you need to set the Tool and DrawingTool properties of diagram.

XAML

<!--Enables AutomaticPortCreation of SfDiagram to create port at runtime while making connections.-->
<syncfusion:SfDiagram x:Name="diagram" PortVisibility="Visible" 
                      Tool="ContinuesDraw" DrawingTool="Connector" 
                      Constraints="Default,AutomaticPortCreation"/>

C#

//We need to enable tool and drawingtool to draw connector by clicking and dragging the mouse over the node.
diagram.Tool = Tool.ContinuesDraw;
diagram.DrawingTool = DrawingTool.Connector;
//Enables AutomaticPortCreation of SfDiagram to create port at runtime while making connections.
diagram.Constraints |= GraphConstraints.AutomaticPortCreation;

View Sample in GitHub

Port Dragging

Diagram provides the support to drag the port interactively within the limit.

• For NodePort and DockPort, port can be dragged within the node bounds.
• For ConnectorPort, port can be dragged anywhere on the connector.

See Also

How to decide whether to drag or draw a port at runtime?

How to create port at runtime though SetTool?