SymbolPaletteItem as Node with ports and image

[amruta]

Hello, I am actually doing some customization on Node within the symbolpalette (eg. adding input and output ports, assigning them color etc). I need to add the content of the SymbolPaletteItem as Node with ports (Input and Output port) and also in that Node, I need to show the image with some text and also change the orientation of to display the image and text vertically in SymbolPalette. Now, when we drag and drop the custom SymbolPaletteItem, the dropped will contain the Input and Output ports and also image.

[Ranjitha Amirthalingam]

Hi Amruta,

Thanks for using Syncfusion products.

Requirement: Dropped Node containing Image with text and ports (Input, output)

We have a support to achieve your requirement. We have provided a sample to represent this. Please refer to the sample from the following link

Sample Link:

Symbolpalette_135618.zip

Sample Details:

In the given sample, we have added image and text in a stackpanel, the stackpanel is then added to the content of the Node (SymbolPaletteItem).  

If our solution is different from your requirement, please share /sample/video/description of your requirement. So that, we can work towards fulfilling your requirements.

Please let us know if you require further assistance on this,

Regards,                  

Ranjitha A

[amruta]

Hi Ranjitha,

Thanks for the solution, but still i have some queries

1. I want fixed port means now we can move the ports i want them fix in position

2. Can we expand and collapse symbol palette groups

3. Run time connection, dont want to drag and drop the connections

[amruta]

Hi,

I am attaching image which show some of my requirements which will help you to understand my queries

Attachment: Picture1_2e16320c.rar

[Ranjitha Amirthalingam]

Hi Amruta,

Thanks for providing Screenshot to represent your requirement

Please find the response to your queries as below

S.No	Query	Response
1 & 3	I want fixed port means now we can move the ports, i want them fix in position. Run time connection, don’t want to drag and drop the connections	We have a support to achieve your requirement .We have created simple sample to represent this. Please refer to the sample from the following link. Sample Link: Sample Details: We have added the image with text under Custom (group name) of the symbol palette. Runtime Connection: Requirement: “Drawing connections at runtime without drag and drop the connector from symbol palette” We have achieved your requirement by using EnablleDrawingTools and DrawingMode property of Diagram View. Please refer to the sample from the above link.
2	Can we expand and collapse symbol palette groups	We don’t have support “to expand the symbol palette groups”. We have considered your requirement as feature request. In order to have a better follow up we have created new incident #135774 for this feature. Please make use of this incident for future updates.

Please let us know if you require further assistance on this,

Regards,

Ranjitha A

[Ranjitha Amirthalingam]

Hi Amruta,

Sorry for the inconvenience caused.

Please refer the sample from the following link

Sample Link:
symbolplte_118278.zip

 

Please let us know if you require further assistance on this

Regards,

Ranjitha A.

[amruta]

Thank you ranjitha for your support.

I tried that solution previously.

1. I want auto connector when mouseover on ports of node, i tried but it is not working property.

2. I need to expand and collapse the symbolpalettegroups so can we solve this problem with groupbar; 

    2.1. can we drag and the items from groupbar to diagram control

    2.2. can we set ports to groupbar items

[Ranjitha Amirthalingam]

Hi Amruta,

Please find the response to your queries as below,

S.No	Query	Response
1	I want auto connector when mouseover on ports of node, i tried but it is not working property.	We have some suggestions to achieve your requirement. Please refer to the suggestion as below. Suggestion #1: We have achieved your requirement “to draw line connector while moving the mouse on ports of node”. Please refer to the code snippet Code Snippet: void diagramView_NodeDrop(object sender, NodeDroppedRoutedEventArgs evtArgs)         {            if(evtArgs.DroppedNode!=null)            {                              Node n = (evtArgs.DroppedNode as Node);                foreach(ConnectionPort p in n.Ports)                {                    p.MouseEnter += p_MouseEnter;                }          } } void p_MouseEnter(object sender, MouseEventArgs e)         {             LineConnector line = new LineConnector();                       line.ConnectorType = ConnectorType.Straight;             line.ConnectionHeadPort = (sender as ConnectionPort);             line.HeadNode = (sender as ConnectionPort).Node;             line.EndPointPosition = new Point((sender as ConnectionPort).Node.OffsetX + 20, (sender as ConnectionPort).Node.OffsetY - 20);             diagramModel.Connections.Add(line);         } Suggestion #2: We have achieved your requirement by using EnablleDrawingTools and Drawing Mode property of Diagram View. Please refer to the Video from the following link. Video Link: 118278_video.zip If our suggestions are different from your requirement, please share video/sample to represent your requirement. So that, we can work towards fulfilling your requirements
2	I need to expand and collapse the symbolpalettegroups so can we solve this problem with groupbar;      2.1. can we drag and the items from groupbar to diagram control     2.2. can we set ports to groupbar items	Yes, we have support to drag and drop the items from the other items control to diagram control and also set ports to them. We have provided sample to represent this. Please refer to the sample from the following link Sample Link symbolplte_118278.zip Sample Details: In the given sample, we have drag and drop the items from the groupbar to the diagram control and also set ports for the groupbar items.

Please let us know if you require further assistance on this,

Regards,

Ranjitha A

[amruta]

Hi Ranjitha,

Thank you for your support by may be symbolplte.zip has not loaded propery can you please resend it.

[Ranjitha Amirthalingam]

Hi Amruta,

 

Sorry for the inconvenience caused.

Please refer to the sample from the following link

Sample Link:
symbolplte_118278.zip

 

Please let us know if you require further assistance on this

Regards,

Ranjitha A

[amruta]

Thank you so much Ranjitha, It was really helpful for us... 

[amruta]

hi,

Can we add context menu to diagram control

[amruta]

Sorry for such a question. It was some code that did not let context menu open.

[Ranjitha Amirthalingam]

Hi Amruta,

Requirement: Support to add ContextMenu to the Diagram Control

We have support to add ContextMenu to the Diagram Control. We have created simple sample to represent this. Please refer to the sample and the video from the following link

Sample Link:
ContextMenu_118278.zip

Video Link:
Video_118278.zip

Sample Details:

In the given sample, we have added ContextMenu to the Node and Diagram View.

 

For more information, please refer to the following online help documentation link

Link: http://help.syncfusion.com/ug/wpf/documents/customizethecontextm.htm

 

Please let us know if you require further assistance on this,

Regards,

Ranjitha A.

[amruta]

auto connectors should not have null head or tail node

[Ranjitha Amirthalingam]

Hi Amruta,

Requirement: LineConnector needs to validate head and tail node

We have a support to achieve your requirement by using Events of DiagramView. The ConnectorDragStart and ConnectorDragEnd events are used to validate the Properties of the Connector. We have also represent this validation scenario in our dashboard sample (“InPort and OutPort demo”).Please refer to our Dashboard sample from the following link

Link: Dashboard->WPF->Diagram->Editable Diagram->InPort OutPort Demo

Please let us know if you require further assistance on this,

Regards,

Ranjitha A

[Stratos Geroulis]

Hello,

I used the provided code in the first reply and I am having a problem. When I add an extra node to the code and then add it to the diagram like so "diagram.Model.Nodes.Add(n2)" it is added but it cannot be moved, selected, resized or interacted with in any way, where if I drag and drop a node to the diagram it's fully functional. Do I have to invalidate something or add it to another collection? Or maybe add it in another way?

Thank you,

Stratos

Attachment: Symbolpalette_135618_38d00f9a.zip

[Ranjitha Amirthalingam]

Hi Stratos, 

 

Reported Issue: Unable to drag/resize the Node. 

 

Thanks for sharing sample to represent the issue. We have modified the sample to resolve the reported issue. Please refer to the sample from the following link: 

 

Sample Link:
Modified_Symbolpalette_135618
 

 

Sample Changes: 

In the sample, we have modified the IsHitTestVisible property of the newly added Node as True. By default, IsHitTestVisible property of the Node as True. In order to restrict node movement inside the Palette, we have set the IsHitTestVisible property of the Node as False. Since, we have added the node as content to the SymbolPaletteItem.  

 

Regards, 

Ranjitha A. 

[Stratos Geroulis]

Hello,

This makes total sense. It works as expected. I knew it was something very simple like that.

Thank you for the excellent support!

Stratos

[Ranjitha Amirthalingam]

Hi Stratos,  

 

 

Thanks for your update. 

 

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

 

 

Regards, 

Ranjitha A.