change on select behavior, auto connect nodes, automatically adding extra port, adding same node twice in diagram creates name conflict

SC Sudhakar C Syncfusion Team November 12, 2013 12:35 PM UTC

Dear Customer,

Please find the response for your queries in below.

Query

Response

When a node is selected, it shows a rectangle with a handle to rotate it around. Can I customize this eg show something else when a node is selected? What if I don't want to show this?

We can customize the Node Selection adorner by apply the style to the TopResizer, BottomResizer, RightResizer, LeftResizer..etc. property of the Node.

However, we have created a simple sample for your reference. In that sample we have customized the TopResizer of the Node. For more information, please refer the attached sample.

Sample Name: CustomizeTheSelectionAdorner

And also, for more information about to customize the Selection Adorner of the Node, please refer our Syncfusion online documentation from the below link.

Documentation Link : http://help.syncfusion.com/wpf/diagram

Here navigate to Concepts and Features à Nodesà Resize Handler Customization

In order to connect components with connector, we have to drag in the connector in diagram from symbol palette and then bring its head and tail close to the connector. Is it possible to have a visio like auto connect behavior? eg When somebody clicks on port of a node x and while keeping mouse left button down, drag mouse pointer to port of a node y, automatically establish a connector between node x and node y?

We can draw the connections at runtime without drag and drop the connector from SymbolPalette by enabling EnableDrawingTools property of the diagram view.

We can create the connection between the Nodes by Enable the EnableDrawingTools property of the diagram view. For more information please refer the following code snippet to enable the EnableDrawingTools property of the diagram view.

Code Snippet:

diagramView.DrawingTool = DrawingTools.OrthogonalLine;

diagramView.EnableDrawingTools = true;

Note : When we use the EnableDrawingTools property of the Diagram view for the purpose of create the connections, please set the Drawing Tool property of the Diagram view also (like above code snippet). Because, default value of the Drawing Tool is Ellipse. So, if you haven’t set the DrawingTool property, it will draw an ellipse.

However, we have created a simple sample for your reference based on your requirement. In that sample, we have added two connection ports to Node when we drag and drop the SymbolPaletteItem.

And, when we mouse enter on the port, we have enabled the EnableDrawingTools property of the diagram view.

Now, follow the below steps to draw the connection.

1. Press the left mouse button while mouse pointer is over the Connection Port,

2. While the left button is pressed, drag the pointer to the node to where you want to create a link.

3. Release the left button over the target node / connection port where you want to connect.

For more information, please refer the attached sample and video.

Sample Name : DrawingTool

Video Name: F114267Video

I am trying to create customized node with ports of my choice. I have symbol palette and diagram as two separate user controls in my tool. Before adding any ports to my node, I tried <nodeObg>.Ports.Clear(). I did check that <nodeObj>.Ports.Count is set to 0. However when I have dragged it in the diagram it adds a default port to it. How can I completely get rid of it the default port?

By default every node has a centre port. If we want to remove this centre port, please refer the following code snippet.

Code Snippet:

Node node = new Node()

//Remove the centre port

node.Ports.RemoveAt(0);

In the above sample, we have removed centre port of the Node while drag and drop it from SymbolPalette. For more information, please refer the above sample. (Sample Name : DrawingTool )

I have around 8-10 customized nodes in symbol palette. Dragging and Dropping same component twice works fine. But if I try to save it in a xaml (diagramControl.Save(<fileName>)) and if try to load it later it complains about two components having the same name. I have confirmed that xaml does have both nodes stored with the same name. Is there a fix for this? How can I enforce them to have a different name to avoid this?

We are unable to reproduce the reported issue. We are able to drag and drop the same custom SymbolPaletteItem twice and also we are able to save and load those nodes.

In the above sample, we have added two custom SymbolPaletteItem and also we have two buttons to Save and Load the diagram.

For more information, please refer the above sample. (Sample Name : DrawingTool )

Still if you face the issue, please modify the sample and revert back to us with more information. We will investigate and will provide appropriate information to you.

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

Regards,

Sudhakar C

ForumSample_e931c20b.zip

AB abc November 14, 2013 11:53 PM UTC

Hi Sudhakar,

(1) Regarding nodes are saved with same name

Thanks for reply. I am attaching a code sample where I am creating custom nodes and when I dragged in the same type of node twice in the diagram and then if I save the file it shows both nodes (of same type) with same Id. If I try assigning name to nodes with hyphen thru code behind it doesn't like it.

(2) I have one more requirement and just wondering how to address it using syncfusion WPF diagram.

As you can see in my sample application I have a concept of input nodes and output nodes. The idea behind is, input nodes can only allow connections into the node vs output nodes can allow only connections going out of it. Is there a way to control that?

(3) Assigning custom reference id to ports

I would also like to control IDs for each port I add on a node. Though programmatically it did allow me, at runtime it assigned same id to default port also (which I don't even want).

I see in your example that you are removing center node at runtime, but I would like to remove it at design time only. If I do <nodeobj>.Ports.RemoveAt(0) it fails at runtime.

Syncfusion_Issues_e5d8deb8.zip

AB abc November 16, 2013 01:32 AM UTC

(1) Regarding - connecting two nodes without dragging and dropping connector

I tried attaching event to respective ports as mentioned in your example. For some reason it is crashing in my case. Please note that all my nodes are customized and have added programmatically in the palette. Also, my palette and diagram are two completely separate components. Please look at the attached code.

(2) Regarding assigning incrementing id to each node.

I have a use case where I want to assign auto incrementing IDs to each node. eg. I have 4 different types of nodes in palette (a, b, c, d). First time I drag in node A, it should be named A0. If I drag in one more node A it should name it A1 (since A0 is already present in the palette). But now if I drag in C node, it should still name it C0 since its a first of a kind.

(3) Showing label on the bottom of the node.

I want to show a label to the bottom of the node. By default it is showing it on the center. How can I force it to be on the bottom?

Thanks,

Syncfusion_Issues_fb778be6.zip

SC Sudhakar C Syncfusion Team November 18, 2013 10:01 AM UTC

Dear Customer,

Please find the response for your queries in below.

Query

Response

Regarding nodes are saved with same name

Thanks for reply. I am attaching a code sample where I am creating custom nodes and when I dragged in the same type of node twice in the diagram and then if I save the file it shows both nodes (of same type) with same Id. If I try assigning name to nodes with hyphen thru code behind it doesn't like it.

We are able to reproduce the reported issue “Unable to save and load the Nodes which contains the same node as content”. However, please create new incident in Direct track to follow up this issue. Then only we can provide the patch for this issue.

I have one more requirement and just wondering how to address it using syncfusion WPF diagram.

As you can see in my sample application I have a concept of input nodes and output nodes. The idea behind is, input nodes can only allow connections into the node vs output nodes can allow only connections going out of it. Is there a way to control that?

We can create the connection between the Nodes by Enable the Enable DrawingTools property of the diagram view. For more information please refer the following code snippet to enable the EnableDrawingTools property of the diagram view.

Code Snippet :

diagramView.DrawingTool = DrawingTools.OrthogonalLine;

diagramView.EnableDrawingTools = true;

Note : When we use the EnableDrawingTools property of the Diagram view for the purpose of create the connections, please set the Drawing Tool property of the Diagram view also (like above code snippet). Because, default value of the Drawing Tool is Ellipse. So, if you haven’t set the DrawingTool property, it will draw an ellipse.

And also, to restrict the input nodes to allow the connections into that Node and output nodes to allow the connections going out of it, we have a sample “InPort OutPort Demo” in dashboard to achieve your requirement. For more information, please refer that sample using the below path.

Path: DashboardàWPFàDiagramàEditable Diagramà InPort OutPort Demo

Assigning custom reference id to ports

I would also like to control IDs for each port I add on a node. Though programmatically it did allow me, at runtime it assigned same id to default port also (which I don't even want).

I see in your example that you are removing center node at runtime, but I would like to remove it at design time only. If I do <nodeobj>.Ports.RemoveAt(0) it fails at runtime.

We can create the Custom Class which is deriving from Connection Port and also we can create the custom property like “ID”. Here after, we can create the connection port using this custom class and can add this connection port (which is create using the custom class) to node as usual.

And also, by default every node has a centre port and name of the Centre Port is “PART_Sync_CenterPort”. Using this name of the Port, we can remove the centre port while adding the Node to diagram model.

However, we are suggesting you to please remove the centre port of the Node in Loaded event of the Node. (Please register the Loaded event of the Node in Noes.CollectionChanged event of the diagram model / NodeDrop event of the diagram view).

Regarding - connecting two nodes without dragging and dropping connector

I tried attaching event to respective ports as mentioned in your example. For some reason it is crashing in my case. Please note that all my nodes are customized and have added programmatically in the palette. Also, my palette and diagram are two completely separate components. Please look at the attached code.

We are able to reproduce the reported issue “Unable to make the connection from Ports”. However, please create new incident in Direct track to follow up this issue. Then only we can provide the patch for this issue.

Regarding assigning incrementing id to each node.

I have a use case where I want to assign auto incrementing IDs to each node. eg. I have 4 different types of nodes in palette (a, b, c, d). First time I drag in node A, it should be named A0. If I drag in one more node A it should name it A1 (since A0 is already present in the palette). But now if I drag in C node, it should still name it C0 since its a first of a kind.

We can set Name to Node as per our requirement. For your requirement, we are suggesting you to please set the ItemName to Custom SymbolPaletteItem.

Now, when we drag and drop the SymbolPaletteItem, please check the ItemName of the SelectedItem in SymbolPalette. Then, we can set Name to dropped node as per your requirement.

For example, please follow the steps in the provided sample.

1.You are creating the custom SymbolPaletteItem in AddNode(…) method which is placed in Palette.xaml.cs

Now, we are suggesting you to please set the ItemName of the custom SymbolPaletteItem. Please refer the code snippet.

SymbolPaletteItem currPaletteItem = new SymbolPaletteItem();

// Set ItemName to the SymbolPaletteItem

currPaletteItem.ItemName = label;

2. Please register the NodeDrop event of the diagram view in Diagram.xaml.cs. (Or) please register the NodeDrop event of the diagram view in Mainwindow.xaml.cs

// Registering NodeDrop event of the diagram view

m_Daigram.diagramControl.View.NodeDrop+=new NodeDroppedEventHandler(View_NodeDrop);

Now, when we drag and drop the SymbolPaletteItem to diagram page, this event will be fire.

3. In that event, please check the SelectedItem in the SymbolPalette using the code snippet.

// We can get the ItemName of the SelectedItem in SymbolPalette

string itemname = m_Palette.palette.SelectedItem.ItemName;

4. We can check the ItemName of the SymbolPaletteItem (which we dropped on the diagram page). For example : we have dropped ‘NodeA’ SymbolPaletteItem

5. We can check how many nodes are named starting with “NodeA” and then we can set name to that dropped node. Please refer the following code snippet.

Code Snippet:

// Registering NodeDrop event of the diagram view

m_Daigram.diagramControl.View.NodeDrop+=new NodeDroppedEventHandler(View_NodeDrop);

void View_NodeDrop(object sender, NodeDroppedRoutedEventArgs evtArgs)

{

int i = 0;

if (m_Palette.palette.SelectedItem.ItemName == "NodeA")

{

foreach (Node node in m_Daigram.diagramModel.Nodes)

{

if(node.Name.Contains("NodeA"))

{

i++;

}

// Set Name to the dropped Node

(evtArgs.DroppedNode as Node).Name = "NodeA" + i;

}

Note: This is one way to achieve your requirement; we can achieve your requirement in multiple ways.

Showing label on the bottom of the node.

I want to show a label to the bottom of the node. By default it is showing it on the center. How can I force it to be on the bottom?

Vertical and horizontal alignments of a label is specified using LabelVerticalAlignment and LabelHorizontalAlignment properties of 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/417nodelabel.htm

However, to show the label to bottom of the Node, please set LabelVerticalAlignment as Bottom.

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

Regards,

Sudhakar C

AB abc November 19, 2013 05:54 AM UTC

Hi Sudhakar,

I have opened an incident for 2 items you have mentioned.

(1) Regarding example of input and output port

I don't see the example in the mentioned path. Can you please attach it in this thread?

(2) Assigning custom ID to reference node

Thanks for your suggestion. I was actually referring to PortReferenceId property. Looks like it is assigning incremental values to the port. Is there a way we can control that. Since I am removing default port when node is dragged on the diagram I can remove that from code behind. So, for all my custom ports I am assigning them Id starting with some larger number (eg 11 or 21) and at run time I subtract 11 or 21 out of it to convert them on index based 0. However there are scenarios where I still see some of them not getting the value I assigned. Can you please explain how does it assign PortReferenceid to each port so that I can manipulate it in a way I want

(3) On NodeDrop

I understood this method, however what I want is somethig like BeforeNodeDropped or OnNodeDropping where I can control things even before node is dropped on the canvas

(4) Background grid lines

It looks like, background on Diagram View is showing 1 x 1 pixel grid lines. Is it possible to make it even smaller?

(5) I have a requirement of adding a toolbar to support features like cut, copy & paste. I saw your documentation and was able to do it from code behind. However when I copy and paste nodes, it doesn't trigger NodeDropped event when node is pasted? It looks like since it is pasting, it doesn't trigger OnNodeDropped event. Is it possible to trigger OnNodeDropped on pasted node?

(6) I was trying to disable Node by setting IsNodeEnable property to false but I don't see it getting disabled. Is there any other property I should be setting?

SC Sudhakar C Syncfusion Team November 19, 2013 11:32 AM UTC

Dear Customer,

Thanks for the reply. Please find the response for your queries in below.

Query

Response

Regarding example of input and output port

I don't see the example in the mentioned path. Can you please attach it in this thread?

While viewing your query you are searching the sample with wrong name. We are suggesting you to please refer the sample “InPort OutPort Demo”.

Please find the sample path in below.

DashboardàWPFàDiagramàEditable Diagramà InPort OutPort Demo

Assigning custom ID to reference node

Thanks for your suggestion. I was actually referring to PortReferenceId property. Looks like it is assigning incremental values to the port. Is there a way we can control that. Since I am removing default port when node is dragged on the diagram I can remove that from code behind. So, for all my custom ports I am assigning them Id starting with some larger number (eg 11 or 21) and at run time I subtract 11 or 21 out of it to convert them on index based 0. However there are scenarios where I still see some of them not getting the value I assigned. Can you please explain how does it assign PortReferenceid to each port so that I can manipulate it in a way I want

We are unable to reproduce the reported issue. We are able to change the PortReferenceNo for all ConnectionPort and also we can get the assigned PortReferenceNo for connection ports.

If you are unable to get the assigned PortReferenceNo for all connection ports, please provide more information about the issue. It would be a great help for us if you provide the simple sample to reproduce the issue. We will investigate further and will provide the appropriate information to you.

On NodeDrop

I understood this method, however what I want is somethig like BeforeNodeDropped or OnNodeDropping where I can control things even before node is dropped on the canvas

Currently we don’t have an option to trigger the event before we dropped the Node on diagram page.

Background grid lines

It looks like, background on Diagram View is showing 1 x 1 pixel grid lines. Is it possible to make it even smaller?

We can change the horizontal and vertical spacing between the grid lines by set the GridHorizontalOffset & GridVerticalOffset property of the diagram page.

In your sample, please use the following code snippet.

Code Snippet:

m_Daigram.diagramView.ShowHorizontalGridLine = true;

m_Daigram.diagramView.ShowVerticalGridLine = true;

(m_Daigram.diagramView.Page as DiagramPage).GridHorizontalOffset = 10;

(m_Daigram.diagramView.Page as DiagramPage).GridVerticalOffset = 10;

Note: Default value of GridHorizontalOffset & GridVerticalOffset is 25.

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

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

I have a requirement of adding a toolbar to support features like cut, copy & paste. I saw your documentation and was able to do it from code behind. However when I copy and paste nodes, it doesn't trigger NodeDropped event when node is pasted? It looks like since it is pasting, it doesn't trigger OnNodeDropped event. Is it possible to trigger OnNodeDropped on pasted node?

NodeDrop event of the diagram view will be raised only when we drag and drop the Node from SymbolPalette.

So, if you want to trigger the event when copy paste the Node, we are suggesting you to please use the Nodes.CollectionChanged of the Diagram Model.

This event will be fire when the Nodes collection of the diagram model is changed.

This Nodes collection of the diagram model will be changed by the following scenarios:

1. Drag and drop the SymbolPaletteItem from SymbolPalette to diagram page.

2. Cut / Copy Paste / Delete the Node

3. Add / remove the node programmatically (diagramModel.Nodes.Add(node) / m_Daigram.diagramModel.Nodes.Remove(node)

I was trying to disable Node by setting IsNodeEnable property to false but I don't see it getting disabled. Is there any other property I should be setting?

We suspect that your requirement is, if we disabled the specified Node, then we should not be able to access that Node until we enable that Node.

To achieve this requirement, we are suggesting you to please disable the AllowSelect / IsEnabled property of the Node.

Note: If that Node is in selected state, please disable the IsSelected property of the Node also. Otherwise, that node will be selected even after disabled the AllowSelect / IsEnabled property.

If the above details doesn’t meet your requirement, please revert us with more information. We will investigate and will provide the appropriate information to you.

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

Regards,

Sudhakar C

AB abc November 20, 2013 05:58 AM UTC

(1) Is it possible to show the same node in 2 different ways in symbol palette and actually when it is dropped on diagram view? I have attached sample document mentioning the same.

I want my symbol palette just with some icons and text. When user drags (icon and text combination as shown in the document) to the diagram view, it should show actual node with image, text and ports on it. Is it possible?

(2) Visio supports a typical use case for nodes on grid. If user starts dragging any item on the diagram area, it will still show it at its original place and a transparent image of the same will go with the mouse. When user actually drops is (ie moves it) and releases left button it actually moves the shape. This is a good feature where user can always see the original position of shape before actually dropping it somewhere. Is it possible?

(3) By default I am showing diagram with canvas of 600 x 300. If I try to drag a node out of it's border (eg keep dragging it in to the bottom right) it will still move the node but scroll bars will be at its current position. I want them to automatically scroll all the way in the end (where I am actually dropping the node) so that node doesn't get out of sight of user. Can this be possible?

(4) Showing preview of node getting dragged form palette to diagram. You can refer to my previous samples for this. Since my palette and diagram view are separate when I am dragging them, I don't see a preview coming from palette to diagram visually. Is there a work around for this?

(5) When are you guys planning to support Visual Studio 2012? I was playing with Ribbon control which works much better in 2010 vs in 2012 it doesn't show anything. I can always create a file in 2010 and move it to 2012 but just wondering about the support.

Special_Requirement_c2739352.zip

SC Sudhakar C Syncfusion Team November 27, 2013 04:38 AM UTC

Dear Customer,

Please find the response for your queries in below.

Query

Response

Is it possible to show the same node in 2 different ways in symbol palette and actually when it is dropped on diagram view? I have attached sample document mentioning the same.

I want my symbol palette just with some icons and text. When user drags (icon and text combination as shown in the document) to the diagram view, it should show actual node with image, text and ports on it. Is it possible?

We have prepared a simple sample to achieve your requirement. In that sample, we have created a Custom SymbolPaletteItem with image and some text. And also, when we drag and drop that custom SymbolPaletteItem, we have applied the same DataTemplate (which is applied to the SymbolPaletteItem) to dropped Node.

Now, dropped Node and custom SymbolPaletteItem will have a same type of elements in it.

For more information, please refer the attached sample.

Visio supports a typical use case for nodes on grid. If user starts dragging any item on the diagram area, it will still show it at its original place and a transparent image of the same will go with the mouse. When user actually drops is (ie moves it) and releases left button it actually moves the shape. This is a good feature where user can always see the original position of shape before actually dropping it somewhere. Is it possible?

Since, this feature is not available in our product; we will consider this requirement as a feature requirement “Transparent shape only should move with mouse pointer when we drag the Node”.

Please review the following description of this feature and let us know if it conforms to your requirement:

Description :

When we drag the Node, transparent shape only should move with mouse pointer, but the original shape should be placed in its original position.

If our definition of this feature is different from your requirement, please share the specific details with us so that we can work towards fulfilling your expectations.

By default I am showing diagram with canvas of 600 x 300. If I try to drag a node out of it's border (eg keep dragging it in to the bottom right) it will still move the node but scroll bars will be at its current position. I want them to automatically scroll all the way in the end (where I am actually dropping the node) so that node doesn't get out of sight of user. Can this be possible?

Since, this feature is not available in our product, we will consider this requirement as a feature requirement “Scroll bar should move automatically when we drag the node to outside viewport”.

Please review the following description of this feature and let us know if it conforms to your requirement:

Description:

When we move the Node to outside the view port, scroll bar also should move automatically. So that, we can see the Node while dragging the Node to outside of the viewport.

If our definition of this feature is different from your requirement, please share the specific details with us so that we can work towards fulfilling your expectations.

Showing preview of node getting dragged form palette to diagram. You can refer to my previous samples for this. Since my palette and diagram view are separate when I am dragging them, I don't see a preview coming from palette to diagram visually. Is there a work around for this?

Since, this feature is not available in our product, we will consider this requirement as a feature requirement “Show preview of the SymbolPaletteItem when we drag and drop it to diagram”.

Please review the following description of this feature and let us know if it conforms to your requirement:

Description:

Consider, SymbolPalette and diagram control will be hosted in different panel.

When we drag and drop the SymbolPaletteItem to diagram page, preview of the SymbolPaletteItem should be shown to user.

If our definition of this feature is different from your requirement, please share the specific details with us so that we can work towards fulfilling your expectations.

When are you guys planning to support Visual Studio 2012? I was playing with Ribbon control which works much better in 2010 vs in 2012 it doesn't show anything. I can always create a file in 2010 and move it to 2012 but just wondering about the support.

We already provided Visual Studio 2012 support since our 11.2.0.25 release. If you face any problem on this, please provide more information. We will move forward on this.

Please let us know if you have any concerns on this.

Regards,

Sudhakar C

SimpleNodeAndConnector_b1253c99.zip

AB abc November 27, 2013 06:22 AM UTC

Thanks for your reply Sudhakar

(1) I looked at the example you attached. That's how I want to see my node in diagram view. But in symbol Palette, I would like to see miniature of the same. Also, I want to see text on the right hand side of an image and not on the bottom of an image. Also, I was wondering if we can do the same from a code behind and not doing anything in xaml. Please see attached document (in zip) for the same.

(2) "When we drag the Node, transparent shape only should move with mouse pointer, but the original shape should be placed in its original position." is correct description for our requirement.

(3) "When we move the Node to outside the view port, scroll bar also should move automatically. So that, we can see the Node while dragging the Node to outside of the viewport." I am assuming by viewport, you meant diagram area,

(4) "Consider, SymbolPalette and diagram control will be hosted in different panel.

When we drag and drop the SymbolPaletteItem to diagram page, preview of the SymbolPaletteItem should be shown to user." - I would say when user drags a node, a transparent image should be shown where user is moving mouse, and as soon as user releases the mouse button, SymbolPaletteItem should be dropped there

(5) Is it possible to show connection port with 2 different colors? eg. if its a circular port, can we show its circumference with one color and rest of the circle filled with a different color?

(6) Is it possible to associate a tag (or some other custom object) to a connection port?

(7) Node.Name property doesn't allow me to put hyphen ("-") in it. Is there any restriction to it?

(8) Is it possible to have a slider and dropdown to control zoom factor of the diagram view? I saw its scaled based on 0.2 and I tried updating it, but that doesn't seem to be working.

<DiagramView>.IsZoomEnabled = true;

<DiagramView>.ZoomFactor = (zoomValue * 0.002);

<DiagramView>.IsZoomEnabled = false;

Thanks,

Special_Requirement_c2739352_4407181f.zip

SC Sudhakar C Syncfusion Team November 28, 2013 12:10 PM UTC

Dear Customer,

Please find the response for your queries in below.

Query

Response

I looked at the example you attached. That's how I want to see my node in diagram view. But in symbol Palette, I would like to see miniature of the same. Also, I want to see text on the right hand side of an image and not on the bottom of an image. Also, I was wondering if we can do the same from a code behind and not doing anything in xaml. Please see attached document (in zip) for the same.

We have modified the sample as per your requirement. In that sample, we have applied the ContentTemplate of the SymbolPaletteItem and Node through code behind.

For more information, please refer the attached modified sample.

"When we drag the Node, transparent shape only should move with mouse pointer, but the original shape should be placed in its original position." is correct description for our requirement.

Thank you for helping us defines this feature. We have now added this “Transparent shape only should move with mouse pointer when we drag the Node” to our features database.

And also, we request you to please visit our website periodically for further updates.

"When we move the Node to outside the view port, scroll bar also should move automatically. So that, we can see the Node while dragging the Node to outside of the viewport." I am assuming by viewport, you meant diagram area,

Viewport: Area which can be viewed by user on the screen (viewable area). This is not a whole diagram area. Please refer the attached image.

"Consider, SymbolPalette and diagram control will be hosted in different panel.

When we drag and drop the SymbolPaletteItem to diagram page, preview of the SymbolPaletteItem should be shown to user." - I would say when user drags a node, a transparent image should be shown where user is moving mouse, and as soon as user releases the mouse button, SymbolPaletteItem should be dropped there

Thank you for helping us defines this feature. We have now added this “Show preview of the SymbolPaletteItem when we drag it on the diagram page” to our features database and we have added this information to the feature description.

And also, we request you to please visit our website periodically for further updates.

Is it possible to show connection port with 2 different colors? eg. if its a circular port, can we show its circumference with one color and rest of the circle filled with a different color?

We can achieve your requirement by using the PortStyle property of the Connection Port.

Please refer the below code snippet.

Code Snippet:

ConnectionPort port = new ConnectionPort();

port.PortStyle.Stroke = Brushes.Red;

port.PortStyle.Fill = Brushes.Yellow;

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

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

Is it possible to associate a tag (or some other custom object) to a connection port?

We can create the custom class which is derived from ConnectionPort and can add custom properties to that custom class.

If it’s not meet your requirement, please provide information about your requirement. We will investigate and will provide appropriate information to you.

Node.Name property doesn't allow me to put hyphen ("-") in it. Is there any restriction to it?

This is a default framework constrains. We can’t put a hyphen (“-“) to the Name property of the Content Control. This is not a diagram related issue.

Is it possible to have a slider and dropdown to control zoom factor of the diagram view? I saw its scaled based on 0.2 and I tried updating it, but that doesn't seem to be working.

<DiagramView>.IsZoomEnabled = true;

<DiagramView>.ZoomFactor = (zoomValue * 0.002);

<DiagramView>.IsZoomEnabled = false;

To set the ZoomFactor of the diagram view using the slider / dropdown, we have a sample named “Zoom and Pan Demo” in our dashboard. In that sample, we have a dropdown to select the ZoomFactor of the diagram view. And, we can perform the Zooming operation on the diagram page by clicking the ZoomIn (+) / ZoomOut (-) button.

Please refer the “Zoom and Pan Demo” from the below path.

Path: DashboardàWPFàDiagramàEditable DiagramàZoom and Pan Demo

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

Regards,

Sudhakar C

Forum_1ec887b8.zip

AB abc December 3, 2013 03:04 AM UTC

Thanks for providing example Sudhakar. It is very close to what I want to do.

I am actually doing some customization on Node within the symbolpalette (eg. adding input and output ports, assigning them color etc). Looks like you are suggesting to do all those things in the diagramView_NodeDrop event here. I do have some items (etc. port count, color, image) associated to Node when I create them in SymbolPalette. Is it possible to pass them along with DataContent so that I don't have to reattach image and text to it? ie. Is it possible if I just change the orientation and size and bring all other elements automatically when I drag it in?

Thanks,

SC Sudhakar C Syncfusion Team December 6, 2013 06:18 AM UTC

Dear Customer,

We suspect that your requirement is , you need to add the content of the SymbolPaletteItem as Node with ports (Input and Output port) and also in that Node, you need to show the image with some text”.

For this requirement, we can create the Node with Ports and directly add that Node as content of the SymbolPalette Item. And also, we can add the image with some text as content of that Node directly. Now, we can drag and drop the custom SymbolPaletteItem as usual.

We have prepared a sample based on your requirement. In that sample, we have created a CustomSymbolPalette based on the above details. And also, we have changed the orientation to StackPanel (content of the Node) to display the image and text vertically. Now, when we drag and drop the custom SymbolPaletteItem, the dropped will contain the Input and Output ports and also image and text will be shown as vertically.

For more information, please refer the attached sample.

If it doesn’t meet your requirement, please provide more information about your requirement. We will investigate further and will provide appropriate information to you.

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

Regards,

Sudhakar C

SimpleNodeAndConnector_20769b28.zip

AS ashish November 5, 2015 02:58 PM UTC

Hi Sudhakar,

I am unable to download ForumSample_e931c20b.zip.

Has it been removed.

Can you add again the sample

AS ashish November 5, 2015 03:11 PM UTC

Hi Sudhakar,

Where exactly this piece of code has to be added

diagramView.DrawingTool =DrawingTools.OrthogonalLine;

diagramView.EnableDrawingTools = true;

Since we want EnableDrawingTools property always true.

RA Ranjitha Amirthalingam Syncfusion Team November 6, 2015 10:51 AM UTC

Hi Ashish,

Please find the response to your queries as below.

S.No

Query

Response

1

I am unable to download ForumSample_e931c20b.zip.
Has it been removed.
Can you add again the sample

Yes, it has been removed due to server problem. We have provided new sample to achieve the following requirements. Please refer to the sample from the following link.

Requirements:

1.Need to customize the NodeSelectionAdorner.
2. Need to draw the Connection at RunTime.
3.Need to add CustomPort on Node.
4.Need to remove the default Center Port.

Sample Link: DrawingTool

Additional Information:

While adding new Ports to the Node, the zero index([0]) will be set to the new Port .So we have hooked CollectionChanged event of ConnectionPort to remove the Center Port.

2

Where exactly this piece of code has to be added

diagramView.DrawingTool =DrawingTools.OrthogonalLine;

diagramView.EnableDrawingTools = true;

Since we want EnableDrawingTools property always true.

We have created a simple sample for your reference based on your requirement. In that sample, we have added one connection port to Node.

And, when we mouse enter on the port, we have enabled the EnableDrawingTools property of the diagram view.

Now, follow the below steps to draw the connection.

1.Press the left mouse button while mouse pointer is over the Connection Port,

2.While the left button is pressed, drag the pointer to the node to where you want to create a link.

3.Release the left button over the target node / connection port where you want to connect.

Please refer the above sample “DrawingTool”.

Regards,
Ranjitha A.

Viewer Component

.NET PDF Processing Library

Conversions

Editor Component

.NET Word Processing Library

Conversions

Editor Component

.NET Excel Processing Library

Conversions

.NET PowerPoint Processing Library

Conversions

Enterprise Solutions

Free Tools

Viewer Component

.NET PDF Processing Library

Conversions

Editor Component

.NET Word Processing Library

Conversions

Editor Component

.NET Excel Processing Library

Conversions

.NET PowerPoint Processing Library

Conversions

Learning

Resources

Support

change on select behavior, auto connect nodes, automatically adding extra port, adding same node twice in diagram creates name conflict