Category / Section
How to arrange the Nodes in Circular(Radial) mode in Silverlight Diagram?
1 min read
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