How to arrange the Nodes in Circular(Radial) mode in WPF Diagram?

You can arrange the Nodes in radial or circular manner using mathematical formulas. The following code example depicts how to calculate the position (OffsetX and OffsetY) for Circular Arrangement of Nodes.

C#

//Center point and radius of the circle
Point center = new Point(500, 300);
double radius = 175;//Creating Nodes
private void CreateNodes()
{
    addNode(Diagram");
    addNode("Tools");
    addNode("Chart");
    addNode("Grid");
    addNode("Schedule");
    addNode("Maps");
    addNode("PDF");
    addNode("SpreadSheet");
}//To arrange nodes in radial mode using center point and radius
private void ArrangeNode()
{
   for (int index = 0; index < model.Nodes.Count; index++)
   {
      CircleArrangement(model.Nodes[index] as Node, index,model.Nodes.Count);
   }
}//Calculating position of Nodes to arrange Circularly
private void CircleArrangement(Node node, int index, int totalno)
{
   double X=(center.X + radius * Math.Cos(2*index*3.14/totalno));
   double Y=(center.Y + radius * Math.Sin(2*index*3.14/totalno));
   node.OffsetX =X;
   node.OffsetY =Y;
}
 //Adding Nodes
private void addNode(String label)
{  
   Node node = new Node();   
   node.Shape = Shapes.Ellipse;
   node.Label = label;            
   node.Width = 100;
   node.Height = 100;
   //Adding Nodes in the DiagramModel
   model.Nodes.Add(node);            
}

model - refers to the instance of the DiagramModel.

center - arranges the Node based on center point.

index - position of the Node in the Arrangement or collection.

radius - defines the space between each Node in the Arrangement.

totalno - specifies the total number of Nodes in the Diagram.

Figure 1: Nodes in Circular arrangement

Conclusion

I hope you enjoyed learning about how to arrange the Nodes in Circular(Radial) mode in WPF Diagram.

You can refer to our WPF Diagram feature tour page to know about its other groundbreaking feature representations and documentation, and how to quickly get started for configuration specifications. You can also explore our WPF Diagram example
to understand how to create and manipulate data.

For current customers, you can check out our components from the License and Downloads page. If you are new to Syncfusion, you can try our 30-day free trial to check out our other controls.

If you have any queries or require clarifications, please let us know in the comments section below. You can also contact us through our support forums, Direct-Trac, or feedback portal. We are always happy to assist you!