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.
Unfortunately, activation email could not send to your email. Please try again.

custom nodes with multiple line connectors

Thread ID:

Created:

Updated:

Platform:

Replies:

113625 Oct 2,2013 06:18 PM Feb 15,2017 09:03 AM WPF 3
loading
Tags: Diagram
abc
Asked On October 2, 2013 06:18 PM

Hi,
We are evaluating this product and was wondering if diagrams in WPF can do the following
  • Have 2 completely isolated controls: one for control palette(from where control will be dragged) and one for actual canvas (where control can be dropped in) 
    • canvas should be an MDI window, user can have multiple diagrams opened at the same time
  • Have user defined nodes (no standard/default nodes/shapes)
  • Have multiple connectors to each node (2 as input and 2 as output) [I have seen one of the sample app where this can be done programmatically directly on the diagram view but not as predefined node type]
    • Ability to define if the port should allow multiple connections or not. ie If it's not allowed each port can allow only one in OR one out connection
Thanks for your help


Sudhakar C [Syncfusion]
Replied On October 24, 2013 01:52 AM

Dear Customer,

Please find the response for your queries in below.

Query

Response

Have 2 completely isolated controls: one for control palette(from where control will be dragged) and one for actual canvas (where control can be dropped in) 

We can host the SymbolPalette and diagram page in a separate panels.

 

 

We have prepared a simple sample. In that sample, we have two grids. First grid contains the SymbolPalette and another grid contains the diagram control. Now, we can drag and drop the symbols as usual from SymbolPalette to Diagram Page.

 

For more information, please refer the following sample.

 

 

Sample Name: SymbolPaletteAndDiagramPageHostedInSeparatePanel.zip

 

Note: We can display the SymbolPalette in a diagram control itself by enabling the IsSymbolPaletteEnabled property of the diagram control.

 

For more information please refer online documentation from the below link.

 

 

Link: http://help.syncfusion.com/ug/wpf/diagram/default.htm#!Documents/enabledisablesymbolp.htm

 

canvas should be an MDI window, user can have multiple diagrams opened at the same time

We have prepared a simple sample to meet this requirement. In that sample, we have created a DockingManger and docked with 3 different diagram controls. Now, we can access all the 3 diagram controls. And also, we have a common symbol palette for all the diagram controls to drag and drop the Symbols. For more information, please refer the following sample.

 

 

Sample Name: DockingManager.zip

 

Have user defined nodes (no standard/default nodes/shapes)

We are able to customize all the Shapes. Please refer the documentation from the below link.

Link: http://help.syncfusion.com/ug/wpf/diagram/default.htm#!documents/4122customizetheappearanceofthepredefinedshape.htm

And also, we are able to add the custom ConnectionPorts to Node and also we are able to customize the ConnectionPorts. Please refer the documentation from the below links.

Link : http://help.syncfusion.com/ug/wpf/diagram/default.htm#!documents/createconnectionport.htm

http://help.syncfusion.com/ug/wpf/diagram/default.htm#!documents/customizeportstyle.htm

Customizing the Connection Port:

We have sample in Dahsboard to customise the ConnectionPort.

Path : Dashboard àWPFàDiagramàGettingStartedàConnectionPortDemo

 

Have multiple connectors to each node (2 as input and 2 as output) [I have seen one of the sample app where this can be done programmatically directly on the diagram view but not as predefined node type]

We can make more number of connections to each Node. We suspect that your requirement is to make the connection to ConnectionPort only.

 

For this scenario, we need to add the Connection Port to Node manually wherever we needed. We don’t have an option to add the ConnectionPort to the Node as predefined.

However, we can add the ConnectionPort at runtime by enabling AddConnectionPortEnabled property of the node.

 

If we want to add the Port at run time, enable AddConnectionPortEnabled property and hold CTRL+SHIFT and click on the node. The connection port will be added in the position where you clicked on the node.

 

For more information, please refer our Syncfusion online documentation using the below link.

 

Link: http://help.syncfusion.com/ug/wpf/diagram/default.htm#!Documents/4321addingconnectionportsatruntimetoanapplication.htm

 

Ability to define if the port should allow multiple connections or not. ie If it's not allowed each port can allow only one in OR one out connection

We have prepared a sample to meet this requirement. In that sample, we have created a custom port using the class “CustomPort” which is derived from ConnectionPort. In that custom class, we have created collection named “EdgeCollection” to store all the connections which are connected to the connection port. Using this collection, we can restrict each connection port to allow only 1 or 2 connections.

 

 

For more information, please refer the following sample.

 

 

Sample Name: RestrictNumberOfConnections.zip

Video Name: RestrictNumberOfConnectionsVideo

 

 

Please let us know if you need further assistance on this.

Regards,

Sudhakar C



ForumSample_d62015f4.zip

Parthiv
Replied On February 10, 2017 04:38 AM

Dear Customer,

Please find the response for your queries in below.

Query

Response

Have 2 completely isolated controls: one for control palette(from where control will be dragged) and one for actual canvas (where control can be dropped in) 

We can host the SymbolPalette and diagram page in a separate panels.

 

 

We have prepared a simple sample. In that sample, we have two grids. First grid contains the SymbolPalette and another grid contains the diagram control. Now, we can drag and drop the symbols as usual from SymbolPalette to Diagram Page.

 

For more information, please refer the following sample.

 

 

Sample Name: SymbolPaletteAndDiagramPageHostedInSeparatePanel.zip

 

Note: We can display the SymbolPalette in a diagram control itself by enabling the IsSymbolPaletteEnabled property of the diagram control.

 

For more information please refer online documentation from the below link.

 

 

Link: http://help.syncfusion.com/ug/wpf/diagram/default.htm#!Documents/enabledisablesymbolp.htm

 

canvas should be an MDI window, user can have multiple diagrams opened at the same time

We have prepared a simple sample to meet this requirement. In that sample, we have created a DockingManger and docked with 3 different diagram controls. Now, we can access all the 3 diagram controls. And also, we have a common symbol palette for all the diagram controls to drag and drop the Symbols. For more information, please refer the following sample.

 

 

Sample Name: DockingManager.zip

 

Have user defined nodes (no standard/default nodes/shapes)

We are able to customize all the Shapes. Please refer the documentation from the below link.

Link: http://help.syncfusion.com/ug/wpf/diagram/default.htm#!documents/4122customizetheappearanceofthepredefinedshape.htm

And also, we are able to add the custom ConnectionPorts to Node and also we are able to customize the ConnectionPorts. Please refer the documentation from the below links.

Link : http://help.syncfusion.com/ug/wpf/diagram/default.htm#!documents/createconnectionport.htm

http://help.syncfusion.com/ug/wpf/diagram/default.htm#!documents/customizeportstyle.htm

Customizing the Connection Port:

We have sample in Dahsboard to customise the ConnectionPort.

Path : Dashboard àWPFàDiagramàGettingStartedàConnectionPortDemo

 

Have multiple connectors to each node (2 as input and 2 as output) [I have seen one of the sample app where this can be done programmatically directly on the diagram view but not as predefined node type]

We can make more number of connections to each Node. We suspect that your requirement is to make the connection to ConnectionPort only.

 

For this scenario, we need to add the Connection Port to Node manually wherever we needed. We don’t have an option to add the ConnectionPort to the Node as predefined.

However, we can add the ConnectionPort at runtime by enabling AddConnectionPortEnabled property of the node.

 

If we want to add the Port at run time, enable AddConnectionPortEnabled property and hold CTRL+SHIFT and click on the node. The connection port will be added in the position where you clicked on the node.

 

For more information, please refer our Syncfusion online documentation using the below link.

 

Link: http://help.syncfusion.com/ug/wpf/diagram/default.htm#!Documents/4321addingconnectionportsatruntimetoanapplication.htm

 

Ability to define if the port should allow multiple connections or not. ie If it's not allowed each port can allow only one in OR one out connection

We have prepared a sample to meet this requirement. In that sample, we have created a custom port using the class “CustomPort” which is derived from ConnectionPort. In that custom class, we have created collection named “EdgeCollection” to store all the connections which are connected to the connection port. Using this collection, we can restrict each connection port to allow only 1 or 2 connections.

 

 

For more information, please refer the following sample.

 

 

Sample Name: RestrictNumberOfConnections.zip

Video Name: RestrictNumberOfConnectionsVideo

 

 

Please let us know if you need further assistance on this.

Regards,

Sudhakar C



ForumSample_d62015f4.zip

How to access the samples mentioned here. Also it seems some links are breaks.

Suresh Shanmugam [Syncfusion]
Replied On February 15, 2017 09:03 AM

Dear Customer, 
  
We couldn't able to download the sample from server location. So, we have prepared the sample. 
 
 
Query 
Response 
Have 2 completely isolated controls: one for control palette(from where control will be dragged) and one for actual canvas (where control can be dropped in)  
We can host the SymbolPalette and diagram page in a separate panels. 
  
We have prepared a simple sample. In that sample, we have two grids. First grid contains the SymbolPalette and another grid contains the diagram control. Now, we can drag and drop the symbols as usual from SymbolPalette to Diagram Page. 
  
For more information, please refer the sample as below, 
  
Sample Name : DockManagerSample-2115553693 
  
Note: We can display the SymbolPalette in a diagram control itself by enabling the IsSymbolPaletteEnabled property of the diagram control. 
  
For more information please refer online documentation from the below link. 
  
  
 
canvas should be an MDI window, user can have multiple diagrams opened at the same time 
In sample(DockManagerSample-2115553693), we have created a DockingManger and docked with 3 different diagram controls. Now, we can access all the 3 diagram controls. And also, we have a common symbol palette for all the diagram controls to drag and drop the Symbols. For more information, please refer the following sample. 
 
Ability to define if the port should allow multiple connections or not. ie If it's not allowed each port can allow only one in OR one out connection 
We have prepared a sample to meet this requirement. In that sample, we have created a custom port using the class “CustomPort” which is derived from ConnectionPort. we have restrict each connection port to allow only 1 or 2 connections. 
 
For more information, please refer the sample as below, 
  
Sample Name : PortRestriction 
 
 
 
Sample location : 113625 
 
Please let us know if you have any concerns. 
  
Regards,  
Suresh Shanmguam  
 


CONFIRMATION

This post will be permanently deleted. Are you sure you want to continue?

Sorry, An error occured while processing your request. Please try again later.

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.

;