Types of Ports in the Diagram Component for WPF | Syncfusion Blogs
Live Chat Icon For mobile
Live Chat Icon
Popular Categories.NET  (172).NET Core  (29).NET MAUI  (192)Angular  (107)ASP.NET  (51)ASP.NET Core  (82)ASP.NET MVC  (89)Azure  (40)Black Friday Deal  (1)Blazor  (209)BoldSign  (12)DocIO  (24)Essential JS 2  (106)Essential Studio  (200)File Formats  (63)Flutter  (131)JavaScript  (219)Microsoft  (118)PDF  (80)Python  (1)React  (98)Streamlit  (1)Succinctly series  (131)Syncfusion  (882)TypeScript  (33)Uno Platform  (3)UWP  (4)Vue  (45)Webinar  (49)Windows Forms  (61)WinUI  (68)WPF  (157)Xamarin  (161)XlsIO  (35)Other CategoriesBarcode  (5)BI  (29)Bold BI  (8)Bold Reports  (2)Build conference  (8)Business intelligence  (55)Button  (4)C#  (146)Chart  (125)Cloud  (15)Company  (443)Dashboard  (8)Data Science  (3)Data Validation  (8)DataGrid  (62)Development  (613)Doc  (7)DockingManager  (1)eBook  (99)Enterprise  (22)Entity Framework  (5)Essential Tools  (14)Excel  (37)Extensions  (22)File Manager  (6)Gantt  (18)Gauge  (12)Git  (5)Grid  (31)HTML  (13)Installer  (2)Knockout  (2)Language  (1)LINQPad  (1)Linux  (2)M-Commerce  (1)Metro Studio  (11)Mobile  (488)Mobile MVC  (9)OLAP server  (1)Open source  (1)Orubase  (12)Partners  (21)PDF viewer  (41)Performance  (12)PHP  (2)PivotGrid  (4)Predictive Analytics  (6)Report Server  (3)Reporting  (10)Reporting / Back Office  (11)Rich Text Editor  (12)Road Map  (12)Scheduler  (52)Security  (3)SfDataGrid  (9)Silverlight  (21)Sneak Peek  (31)Solution Services  (4)Spreadsheet  (11)SQL  (10)Stock Chart  (1)Surface  (4)Tablets  (5)Theme  (12)Tips and Tricks  (112)UI  (368)Uncategorized  (68)Unix  (2)User interface  (68)Visual State Manager  (2)Visual Studio  (30)Visual Studio Code  (17)Web  (577)What's new  (313)Windows 8  (19)Windows App  (2)Windows Phone  (15)Windows Phone 7  (9)WinRT  (26)

Types of Ports in the Diagram Component for WPF

Connectors in the diagram component are used to connect two different nodes. Different kinds of diagrams require different places on a node to be connected. In this blog, you will see different types of ports and where they are used so that you can choose the correct type of port for your diagrams.

Why do we need a port?

It is a well-known fact that a connector is used to connect two nodes. By default, connector endpoints are at the boundaries of a node. In several use cases, like circuit diagrams or database diagrams, connectors need to connect to a specific point in a node. This specific point is defined using a port.

Port types

The following port types are available:

  • Node port
  • Connector port
  • Dock port
  • Dynamic port

Node port

The node port type is straightforward; it is a predefined point on a node that connectors can attach to. This type of port is suitable for nodes that have ports that do not change. A suitable example is logic gates, where you have a specific number of pins that does not change.

<syncfusion:nodeportviewmodel nodeoffsety=".3" nodeoffsetx="0">
</syncfusion:nodeportviewmodel>

Connector port

A connector port is similar to a node port, but instead of hosting it in a node, it is hosted on the path of a connector. A suitable example is a sequence diagram.

<syncfusion:connectorportviewmodel length=".2" shape="{StaticResource Ellipse}"></syncfusion:connectorportviewmodel>

Dynamic port

A dynamic port is used to make parallel connections in diagrams by connecting anywhere on the side of a node. Unlike other ports, a connector does not start or end on a dynamic port’s position. Instead, it is connected to the node’s outer boundaries, pointing toward the port.

<syncfusion:nodeportviewmodel nodeoffsetx=".5" nodeoffsety=".2" x_name="dynamicPort"></syncfusion:nodeportviewmodel>
dynamicPort.Constraints |= PortConstraints.Dynamic;

Dock port

In some kinds of circuit or block diagrams, an end user might want to select a point to which they want to attach a connector. In this case, a port needs to be created or deleted automatically when connecting or disconnecting a connector. A dock port is a collection of line segments where any point on the segments can be connected. When connected, a port (dynamic port) will be automatically created and added. When disconnected, the port will be automatically deleted. In short, a dock port is a placeholder where multiple connections can be made.

<syncfusion:dockportviewmodel sourcepoint="0,0" targetpoint="0,1">
    <syncfusion:dockportviewmodel.ports>
        <local:collection></local:collection>
    </syncfusion:dockportviewmodel.ports>
</syncfusion:dockportviewmodel>

You can download a sample that demonstrates different port types here: types of ports sample.

In this short post, we have seen that ports help make interactive connections easier by specifying static, dynamic, and restricted places for connectors on diagram nodes. There are many more port options to explore, like restricting in or out connections, controlling port visibility, customizing the appearance of the area around a port, and much more. To explore more about ports, refer to our port documentation.

Try it and let us know your feedback

If you’re already a Syncfusion user, you can download the product setup here. If you’re not yet a Syncfusion user, you can download a free, 30-day trial here.

If you have any questions or require clarification about these features, please let us know in the comments below. You can also contact us through our support forum or Direct-Trac. We are happy to assist you!

Tags:

Share this post:

Popular Now

Be the first to get updates

Subscribe RSS feed

Be the first to get updates

Subscribe RSS feed
Scroll To Top