How to customize the connection indicator style of node and port in WPF Diagram (SfDiagram)?
The connection indicator style for the node and port can be customized by SfDiagram.ConnectionIndicatorStyle property of WPF Diagram (SfDiagram).
C#
<!--Defines the custom connection indicator style for port connection--> <Style TargetType="Path" x:Key="PortConnectorIndicatorstyle"> <Setter Property="Stroke" Value="Yellow" /> <Setter Property="StrokeThickness" Value="2"></Setter> </Style> <!--Defines the custom connection indicator style for port connection--> <Style TargetType="Path" x:Key="NodeConnectorIndicatorstyle"> <Setter Property="Stroke" Value="Yellow"/> <Setter Property="StrokeThickness" Value="2"/> </Style>
//To change the connection indicator style of the node and port connection. diagram.ConnectionIndicatorStyle = this.Resources["NodeConnectorIndicatorstyle"] as Style; //Here, diagram is the instance of SfDiagram.
If you want to use different connection indicator for node and port, then override the SetTool and ValidateConnection method of WPF Diagram (SfDiagram) and apply different connection indicator styles for node and port.
public class Diagram : SfDiagram
{
protected override void SetTool(SetToolArgs args)
{
Console.WriteLine(args.Source);
if (args.Source is INodePort)
{
//To change the connection indicator style of the port connection.
this.ConnectionIndicatorStyle = this.Resources["PortConnectorIndicatorstyle"] as Style;
base.SetTool(args);
}
else if (args.Source is NodeViewModel)
{
this.ConnectionIndicatorStyle = this.Resources["NodeConnectorIndicatorstyle"] as Style;
base.SetTool(args);
}
else
{
base.SetTool(args);
}
}
protected override void ValidateConnection(ConnectionParameter args)
{
var isSourceAction = args.ConnectorEnd == ConnectorEnd.Source;
if ((isSourceAction && args.SourcePort != null) || (!isSourceAction && args.TargetPort != null))
{
//To change the connection indicator style of the port connection.
this.ConnectionIndicatorStyle = Application.Current.Resources["PortConnectorIndicatorstyle"] as Style;
}
else if ((isSourceAction && args.SourceNode != null) || (!isSourceAction && args.TargetNode != null))
{
this.ConnectionIndicatorStyle = Application.Current.Resources["NodeConnectorIndicatorstyle"] as Style;
}
base.ValidateConnection(args);
}
}
Controlled the ConnectionIndicatorStyle of the port in the following methods.
SetTool() method:
Whenever the mouse hovers on the port, the style in this method will set.
ValidateConnection() method:
Whenever you drag the endthumb or sourcethumb of the connector over the port to create a connection, the ConnectionIndicatorStyle is set to the port to restrict the default style.
Conclusion
I hope you enjoyed learning about how to customize the connection indicator style of node and port in WPF Diagram (SfDiagram).
You can refer to our WPF Diagram feature tour page to know about its other groundbreaking feature representations. You can also explore our WPF Diagram documentation to understand how to create and manipulate data.
For current customers, you can check out our components from the License and Downloads page. If you are new to Syncfusion®, you can try our 30-day free trial to check out our other controls.
If you have any queries or require clarifications, please let us know in the comments section below. You can also contact us through our support forums, Direct-Trac, or feedback portal. We are always happy to assist you!
