We use cookies to give you the best experience on our website. If you continue to browse, then you agree to our privacy policy and cookie policy. Image for the cookie policy date
Unfortunately, activation email could not send to your email. Please try again.
Syncfusion Feedback

How to customize the connection indicator style of node and port in WPF Diagram (SfDiagram)?

Platform: WPF |
Control: 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);
  }
}

 

CustomizedConnectionIndicator

 

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. 

View sample in GitHub.

2X faster development

The ultimate WPF UI toolkit to boost your development speed.
ADD COMMENT
You must log in to leave a comment

Please sign in to access our KB

This page will automatically be redirected to the sign-in page in 10 seconds.

Up arrow icon

Warning Icon You are using an outdated version of Internet Explorer that may not display all features of this and other websites. Upgrade to Internet Explorer 8 or newer for a better experience.Close Icon

Live Chat Icon For mobile