1. Home
  2. Forum
  3. WPF
  4. Create zone

Create zone

Hello,

I would like to be able to create a kind of "zone" in my diagram (like a Swimlane but without row and column). All nodes inside a zone will move with it.

Example:


Each zone as an header (a custom toolbar) and a textzone to put a comment. The tool bar is not represented on my example. 

It's is possible to drag it. 

It's possible to resize it (as swimlane does, taking into account the nodes inside it).


Thank you in advance.


5 Replies
KR Karkuvel Rajan Shanmugavel Syncfusion Team September 13, 2021 10:55 AM UTC

HI Rodrigue, 
 
Requirement: Need to create a Group with Header and ToolBar. 
 
We have analyzed your requirement with the provided image. We need some clarification in your requirement. Please provide the details for the below questions which will help us to provide proper solution. 
 
  • We need to know where the toolbar is placed and what are the option you have used in the toolbar?
  • We need you to confirm that the “Load Controller” is the text zone in the Zones?
  • While Dragging did you want to drag the text zone and toolbar?
  • While Resize did you want to resize the toolbar and text zone?
 
 
Regards, 
Karkuvel Rajan S 


PE Peter September 13, 2021 12:45 PM UTC

Hello,

  • We need to know where the toolbar is placed and what are the option you have used in the toolbar?

The toolbar is at the top of the zone: it's just a favorite icon (a star icon in a Toggle button but it's not very important)

  • We need you to confirm that the “Load Controller” is the text zone in the Zones?

Yes, just beside the toolbar, I would like to have a RichTextBox to be able to insert some comments. The toolbar and the textzone can be in a StackPanel, I'll customize them.

  • While Dragging did you want to drag the text zone and toolbar?

Yes, everything must be dragged. If a "node" is inside the group, it's moved too (like in swimlane)

  • While Resize did you want to resize the toolbar and text zone?

Yes, I would like that behavior, please (stretch).

Thank you :)

DT Deepa Thiruppathy Syncfusion Team September 14, 2021 02:37 PM UTC

Hi Rodrigue, 
 
Requirement: Creating zone type elements with SfDiagram control. 
 
From given details , Group elements of SfDiagarm control will achieve your requirement. We have created the sample with group elements which can be edit to add some comments, can drag and resize the group and its elements. 
Labels can be added to the groups.  
 
Please refer the sample from the below link,  
 
 
For more details about group creation, please refer the following user guide documentation,  
 
If given details, samples, documentation links are not meet your requirement, then kindly provide the requirement in detail to understand your requirement clearly. 
  
Regards, 
Deepa T 


PE Peter September 14, 2021 09:24 PM UTC

Ok, thank you for your example. It's interresting but it's not what I would like.

I don't want that nodes resize with the "zone" (=group), to have to double click each time I want to edit something..., etc.

 Is it possible to customize a swimlane: hide the function, add stackpanel in content's phase, etc.?

Swimlane | Diagram | ASP.NET Webform | Syncfusion


DT Deepa Thiruppathy Syncfusion Team September 15, 2021 01:15 PM UTC

Hi Peter, 
  
Please find the response to your queries in below table. 
  
Query  
Response 
I don't want that nodes resize with the "zone" (=group), to have to double click each time I want to edit something..., etc. 
This requirement can be achieved using constraints property of node element. You can remove resize constraints from node’s constraints property. It will restrict the node’s resize operation while resize the group(zone). It will resize the only group bounds when doing resizing operation, not node bounds. 
 
Code Snippet 
 
node. Constraints = NodeConstraints.Default & ~(NodeConstraints.Resizable | NodeConstraints.InheritResizable | NodeConstraints.Rotatable | NodeConstraints.InheritRotatable); 
 
 
To add any label you can do double click on the Group, Node. 
 
Please refer the sample from below link, 
 
 
Also we have prepared a video to demonstrate the sample. Please find the video link as below, 
 
 
Is it possible to customize a swimlane: hide the function, add stackpanel in content's phase, etc.? 
Currently, it is not possible to hide function and phase elements inside the Swimlane and it is the actual behavior of the Swimlane element. 
 
  
For more details about our Nodes, Groups and Constraints, please refer the following user guide documentation, 
  
 
If given details, samples are not meet your requirement, then kindly provide the requirement in detail to understand your requirement clearly. 
 
Regards, 
Deepa Thiruppathy 


Loader.
Up arrow icon