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.
C#
//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;
}
XAML
<!--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> </Style>
