Articles in this section
Category / Section

How to add port to the connector in WPF Diagram (SfDiagram)?

1 min read

WPF Diagram (SfDiagram) provided the ConnectorPort support to the Connector. To add a ConnectorPort, the Port object need to define and add it to Port’s property of the Connector. We have provided code example and screenshot to represent this.


//function to add Port to Connector
ConnectorPort port1 = AddConnectorPort(0.5);
ConnectorViewModel connector = new ConnectorViewModel()
  SourcePoint = new Point(100, 100),
  TargetPoint = new Point(300, 300),
  //adding the Port to Connector
  Ports = new ObservableCollection<ConnectorPort>(){ port1 } 
//adding the Connector to Diagram
(diagram.Connectors as ICollection<ConnectorViewModel>).Add(connector);
diagram.DefaultConnectorType = ConnectorType.Line;
private ConnectorPort AddConnectorPort(double p)
  ConnectorPort connectorport = new ConnectorPort() 
    // Specifies the port offset on Connector – fraction value relative
    Length = p,
    PortVisibility = PortVisibility.Visible, 
    Shape = new RectangleGeometry() { Rect = new Rect(0, 0, 10, 10) }, 
    ShapeStyle = this.Resources["shapestyle"] as Style 
  // Remove Inheritance on Port Visibility
  connectorport.Constraints = PortConstraints.Inherit & ~PortConstraints.InheritPortVisibility;     
   return connectorport;


<!--Shape Style for Port-->
<Style TargetType="Path" x:Key="shapestyle">
    <Setter Property="Fill" Value="#fcbc7c"></Setter>
    <Setter Property="Stroke" Value="#f89b4c"/>
    <Setter Property="Stretch" Value="Fill"></Setter>


WPF Diagram with Port Connector

Did you find this information helpful?
Help us improve this page
Please provide feedback or comments
Comments (0)
Please  to leave a comment
Access denied
Access denied