Validate and Restrict Connections in a Diagram WPF | Syncfusion Blogs
Live Chat Icon For mobile
Live Chat Icon
Popular Categories.NET  (173).NET Core  (29).NET MAUI  (199)Angular  (107)ASP.NET  (51)ASP.NET Core  (82)ASP.NET MVC  (89)Azure  (40)Black Friday Deal  (1)Blazor  (211)BoldSign  (13)DocIO  (24)Essential JS 2  (106)Essential Studio  (200)File Formats  (63)Flutter  (132)JavaScript  (219)Microsoft  (118)PDF  (80)Python  (1)React  (98)Streamlit  (1)Succinctly series  (131)Syncfusion  (892)TypeScript  (33)Uno Platform  (3)UWP  (4)Vue  (45)Webinar  (50)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  (127)Cloud  (15)Company  (443)Dashboard  (8)Data Science  (3)Data Validation  (8)DataGrid  (62)Development  (618)Doc  (8)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  (497)Mobile MVC  (9)OLAP server  (1)Open source  (1)Orubase  (12)Partners  (21)PDF viewer  (42)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  (379)Uncategorized  (68)Unix  (2)User interface  (68)Visual State Manager  (2)Visual Studio  (31)Visual Studio Code  (17)Web  (582)What's new  (319)Windows 8  (19)Windows App  (2)Windows Phone  (15)Windows Phone 7  (9)WinRT  (26)

Validate and Restrict Connections in a Diagram WPF

Connectors play an important role in a diagram. They visually indicate the relationship between two objects. There are several restrictions you can make when you set a connection, based on the kind of diagram you use. For example, you may want to restrict a flow in a specific direction, or you may not want to connect an object more than once. In this blog, let’s see how to impose such restrictions in diagram. 

I assume that you have some basic knowledge of diagram with nodes, connectors, and ports. This blog is written based on diagram for the WPF platform, but similar functionality is also available in other platforms. If you are new to the diagram component, please refer to the Getting Started section of our help documentation.

If you are trying a logic gate diagram: 

  • Nodes represent the gates.
  • Ports represent the ‘in’ and ‘out’ pins of gates.
  • A connector represents a flow or wire connecting pins.

Default connection behavior

By default, diagram does not enforce any rules, and allows connections anywhere, any number of times: 

  • Connectors can be left disconnected from objects, just by specifying the source and target point.
  • Connectors can be connected between nodes.
  • Connectors can be connected between ports (a specific point on a node or connector).
  • A connector has two ends; each end can take part in any of the above three.

When the cursor is over a valid object to make a connection, you will see following visual effects:

  • A green rectangle indicator on the target object.
  • An animation focusing the target object.
  • The cursor turns into a cross cursor.

When the cursor is over an object that is restricted, a green highlighter will not be visible and animation will not take place.

Restrictions

Restrict to connect to only ports (not to nodes)

If you want to connect only between ports and not between nodes, remove connectable capabilities from NodeContraints and set PortConstraints to all allow connections, as shown in the following.

Restrict connecting to only ports (not to nodes)

Resource

<syncfusion:NodeConstraints x:Key="disableConnect">

Selectable, Draggable, Resizable, Rotatable,InheritPortVisibility

</syncfusion:NodeConstraints>

<syncfusion:PortConstraints x:Key="enableConnect">

InheritPortVisibility, Connectable

</syncfusion:PortConstraints>

Node and Port constraints

<local:NodeVM Shape="{StaticResource AndGate}"

              Constraints="{StaticResource disableConnect}"

              OffsetX="100" OffsetY="100"

              UnitWidth="70" UnitHeight="50">

    <local:NodeVM.Ports>

        <syncfusion:PortCollection>

            <local:PortVM NodeOffsetX="0"

NodeOffsetY="0.2"

Constraints="{StaticResource enableConnect}" />

        </syncfusion:PortCollection>

    </local:NodeVM.Ports>

</local:NodeVM>

<local:NodeVM Shape="{StaticResource AndGate}"

                Constraints="{StaticResource disableConnect}"

                OffsetX="100" OffsetY="100"

                UnitWidth="70" UnitHeight="50">

    <local:NodeVM.Ports>

        <syncfusion:PortCollection>

            <local:PortVM NodeOffsetX="0"

NodeOffsetY="0.2"

Constraints="{StaticResource enableConnect}" />

        </syncfusion:PortCollection>

    </local:NodeVM.Ports>

</local:NodeVM>

Restrict in/out connection

You can validate the direction of the connection by specifying InConnect or OutConnect to PortConstraints as shown in the following.

Restrict in/out connections

Resources

<syncfusion:NodeConstraints x:Key="disableConnect">

Selectable, Draggable, Resizable, Rotatable, InheritPortVisibility

</syncfusion:NodeConstraints>

<syncfusion:PortConstraints x:Key="enableConnect">

InheritPortVisibility, Connectable

</syncfusion:PortConstraints>

<syncfusion:PortConstraints x:Key="enableInConnect">

InheritPortVisibility, InConnect

</syncfusion:PortConstraints>

<syncfusion:PortConstraints x:Key="enableOutConnect">

InheritPortVisibility, OutConnect

</syncfusion:PortConstraints>


Port constraints for in and out connections

<local:NodeVM Shape="{StaticResource AndGate}"

                Constraints="{StaticResource disableConnect}"

                OffsetX="100" OffsetY="100"

                UnitWidth="70" UnitHeight="50">

    <local:NodeVM.Ports>

        <syncfusion:PortCollection>

            <local:PortVM NodeOffsetX="0" NodeOffsetY="0.2"

Constraints="{StaticResource enableInConnect}" />

            <local:PortVM NodeOffsetX="0" NodeOffsetY="0.8"

Constraints="{StaticResource enableInConnect}"/>

            <local:PortVM NodeOffsetX="1" NodeOffsetY="0.5"

Constraints="{StaticResource enableOutConnect}"/>

        </syncfusion:PortCollection>

    </local:NodeVM.Ports>

</local:NodeVM>

Restrict number of connections

You can restrict the number of connections that can be connected to a port by overriding methods as shown in the code example.

Restrict number of connections

public bool CanCreateConnection(IConnector ignore)
{
    var info = this.Info as INodePortInfo;
    if (info.Connectors != null)
    {
        var count = info.Connectors.Where(c => c != ignore).Count();

        // Validate number of connections.
        if (MaxConnection >= 0 && count >= MaxConnection)
        {
            return false;
        }
    }
    else if(MaxConnection == 0)
    {
        return false;
    }
    return true;
}
public class CustomDiagram : SfDiagram
{
    // Validate and choose required tool.
    protected override void SetTool(SetToolArgs args)
    {
        base.SetTool(args);
        if(args.Source is IPort)
        {
            args.Action = ActiveTool.Draw;
        }

        if (args.Source is PortVM && args.Action == ActiveTool.Draw)
        {
            var port = args.Source as PortVM;
            if (!port.CanCreateConnection(null))
            {
                args.Action = ActiveTool.None;
            }
        }
    }

    // Validate the connection when connector endpoints are dragged.
    protected override void ValidateConnection(ConnectionParameter args)
    {
        if(args.TargetPort is PortVM)
        {
            var port = args.TargetPort as PortVM;
            if (!port.CanCreateConnection(args.Connector as IConnector))
            {
                args.TargetPort = null;
            }
        }
        base.ValidateConnection(args);
    }
}

Customizing visual effects

  

Show ports always

To show ports always, irrespective of any of their constraints or mouse-over state, set PortVisibility as Visible.

diagram.PortVisibility = PortVisibility.Visible;

Show ports only on mouse-over

To show ports only mouse is over the node or near the port, set PortVisibility as MouseOver.

diagram.PortVisibility = PortVisibility.MouseOver;

Show only valid ports during connection

Set PortVisibility as ValidConnection to show ports only when the cursor is over a node and only when validation is passed. That is, if a port does not pass the validation, it will stay hidden.

diagram.PortVisibility = PortVisibility.ValidConnection;

Hide animation during connection

You can hide the animation that indicates connection by applying a null template for RunTimeConnectionIndicator.

You can download the sample that demonstrates port validation and visual effects at ConnectionValidation.

Summary

In this post, you can see how connections to ports and nodes can be restricted. Likewise, you can also enforce your business constraints. For example, in a class diagram, you can make the following restrictions:

  • A class object cannot have more than one base class.
  • An interface object should not derive a class object.
  • A struct object cannot have any base struct or class object.

There are many more port options to explore. To explore ports more, please refer to our help documentation on Ports.

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:

Comments (2)

Hello
I want to ask one query i.e. how to show alert messages of right or wrong connections on the check button. After make sure that all the ports are connected to each other correctly, then it will pop-up alert message, if true alert right connections else wrong connections.
Can you please elaborate the above scenario of connectors with the help of diagram with code. It will be very helpful.

Thanks

Hi Rahul,

We have achieved your requirement using ValidateConnection() method and provided a sample to represent this. Please refer to the sample from the following link.

Sample link: https://www.syncfusion.com/downloads/support/directtrac/general/ze/SimplePortCreation-1894957070.zip

Sample Details:
In this sample, we have two nodes with ports(one inport and one outport). We have updated the message box when the target port is an outport.

For more details, please refer to the below Kb.

Kb link: https://www.syncfusion.com/kb/9553/how-to-validate-the-connection-and-port-visibility-inport-and-outport-in-the-diagram

Regards,
sarath

Comments are closed.

Popular Now

Be the first to get updates

Subscribe RSS feed

Be the first to get updates

Subscribe RSS feed