Groups

Essential Diagram Silverlight provides support to group and ungroup nodes. The Grouping feature comes in handy when you want to apply the same edits to a number of objects and yet retain their individuality. All the operations performed on the group also affect the individual items in the group. However any item in the group can also be edited individually. On ungrouping, the items in the group again act as individual entities.

A Group is essentially just another node added, which acts as a container for other objects. Therefore a group node is referred to as the parent node, and the grouped objects are referred to as the children of the group.

The Group class is inherited from the Node class. Therefore all the node properties apply to a group too.

The following table lists the methods that are used for grouping.

Method	Description
Group.AddChild(INodeGroup child)	Adds the specified INodeGroup object to the group. INodeGroup provides an interface to the nodes and the connectors.
Group.RemoveChild(INodeGroup child)	Removes the specified INodeGroup object from the group. INodeGroup provides an interface to the nodes and the connectors.

Creating a Group

There are three ways to create a group in Essential Diagram Silverlight. You can create a group:

Using Code Behind
Using the Group Method

Grouping By Using Code Behind

The Group class enables to group nodes in Essential Diagram Silverlight. The AddChild method is used to add the elements to the group.

The following code example illustrates the creation of a group by using code behind.

public DiagramControl Control;

public DiagramModel Model;

public DiagramView View;

public MainPage ()

{

    Control = new DiagramControl ();

    Model = new DiagramModel ();

    View = new DiagramView ();

    Control.View = View;

    Control.Model = Model;

    View.Bounds = new Thickness(0, 0, 1000, 1000);

    Node n = new Node(Guid.NewGuid(), "Start");

    n.Shape = Shapes.FlowChart_Card;

    n.Level = 1;

    n.OffsetX = 150;

    n.OffsetY = 25;

    n.Width = 150;

    n.Height = 75;

    Node n1 = new Node(Guid.NewGuid(), "End");

    n1.Shape = Shapes.RoundedRectangle;

    n1.Level = 1;

    n1.OffsetX = 350;

    n1.OffsetY = 325;

    n1.Width = 100;

    n1.Height = 75;

    Model.Nodes.Add(n);

    Model.Nodes.Add(n1);

    Group g = new Group(Guid.NewGuid(), "group1");

    g.AddChild(n);

    g.AddChild(n1);

    Model.Nodes.Add(g);

}

vbnet

Public Control As DiagramControl

Public Model As DiagramModel

Public View As DiagramView

'INSTANT VB WARNING: The following constructor is declared outside of its associated class:

'ORIGINAL LINE: public MainPage ()

Public Sub New()
	
	Control = New DiagramControl()
	
	Model = New DiagramModel()
	
	View = New DiagramView()
	
	Control.View = View
	
	Control.Model = Model
	
	View.Bounds = New Thickness(0, 0, 1000, 1000)
	
	Dim n As New Node(Guid.NewGuid(), "Start")
	
	n.Shape = Shapes.FlowChart_Card
	
	n.Level = 1
	
	n.OffsetX = 150
	
	n.OffsetY = 25
	
	n.Width = 150
	
	n.Height = 75
	
	Dim n1 As New Node(Guid.NewGuid(), "End")
	
	n1.Shape = Shapes.RoundedRectangle
	
	n1.Level = 1
	
	n1.OffsetX = 350
	
	n1.OffsetY = 325
	
	n1.Width = 100
	
	n1.Height = 75
	
	Model.Nodes.Add(n)
	
	Model.Nodes.Add(n1)
	
	Dim g As New Group(Guid.NewGuid(), "group1")
	
	g.AddChild(n)
	
	g.AddChild(n1)
	
	Model.Nodes.Add(g)
	
End Sub

The following screen shot illustrates a group of two nodes created by using Code Behind.

Group of Two Nodes

Grouping By Using the Group Command

The Group command is used to group two or more objects.

The following code example shows the grouping of objects using the Group command:

diagramControl.Group.Execute(diagramView);

vbnet

diagramControl.Group.Execute(diagramView)

The steps to create a group by using the Group command are as follows:

1.Select the objects to be grouped.

Selection of Objects to be Grouped

group3

Selected Objects

Call the Group command. This creates a group.

The new group is indicated by the selection rectangle, which is displayed around the objects in the group.

group4

Grouped Objects inside the Selection Rectangle

Selection in a Group

You can select a group by clicking any one of its children. Clicking consecutively on a child object selects the parent group in the order of its creation. Similarly, clicking consecutively on a child object selects the inner groups and eventually the object itself, and the cycle continues.

An object can belong to multiple groups and groups may have multiple subgroups.

The steps to select an object that has two groups are as follows:

1.Click the brown node, to select the outer group.

group4

Outer Group Selected

2.Click the brown node, to select the inner group of which it is a part.

Inner Group Selected

3.Click the brown node, to select the child after all its groups have been traversed.

group6

Selecting the Child Node Again

Editing a Group

To edit a group, you have to make sure that the corresponding group is selected. The following features apply to the edits performed on an object.

If the edit operation is performed on an object which is a group, then all its children are also affected. For example, resizing a group, automatically resizes its child objects to fit the selection area.

Resizing a Group

If an object is selected, then the edit operation will be performed on that particular object only.

Resizing a Child Object

Once a group is edited, the group’s selection rectangle updates its area to fit the child objects.

Updated Selection Rectangle

Connecting Groups

Grouping enables to connect to groups as well as the individual objects in a group. This section illustrates how to create connections to a group and its child objects.

Creating Connections to a Group

The following steps illustrate the creation of connections to a group.

1.Click the left mouse button while the mouse pointer is on any of the child objects of the group.

2.While the left mouse button is pressed, drag one end of the line connector to any of the group’s children.

This will display a red adorner along the group’s boundary, indicating that the connection is to be made to that particular group.

Creating Connection to a Group

3.Release the mouse button at that point to connect to the group’s boundary.

Connection Created to the Group

Creating Connections to Objects in a Group

The following steps illustrate the creation of connections to individual objects in a group.

1.Press the left mouse button while the mouse pointer is over the node to which the connection is to be made.

2.While the left mouse button is pressed, drag the line connector to the center port of that particular node.

When the mouse pointer is over the center port, a red adorner will be displayed along the node’s boundary, indicating that the connection is to be made to that particular node.

Creating Connection to a Child Object

3.Release the mouse button at that point to connect to the node’s boundary.

Connection created to the Child Object

NOTE

Connections cannot be created between a group and its own children. However, child objects belonging to the same group can be connected to each other.

Ungroup

Ungrouping a group deletes the group and removes all the child elements from the group. Once a group is ungrouped, the child elements behave as individual entities.

There are three ways to ungroup a group in Essential Diagram Silverlight. You can ungroup a group:

By using Code Behind
By using the Ungroup Method

By Using Code Behind

The RemoveChild method is used to remove elements from a group.

For example, the following code illustrates the removal of node n from a group by using code behind.

public DiagramControl Control;

public DiagramModel Model;

public DiagramView View;

public MainPage ()

{

    Control = new DiagramControl();

    Model = new DiagramModel();

    View = new DiagramView();

    Control.View = View;

    Control.Model = Model;

    View.Bounds = new Thickness(0, 0, 1000, 1000);

    Node n = new Node(Guid.NewGuid(), "Start");

    n.Shape = Shapes.FlowChart_Start;

    n.Level = 1;

    n.OffsetX = 150;

    n.OffsetY = 25;

    n.Width = 150;

    n.Height = 75;

    Node n1 = new Node(Guid.NewGuid(), "End");

    n1.Shape = Shapes.FlowChart_Start;

    n1.Level = 1;

    n1.OffsetX = 350;

    n1.OffsetY = 325;

    n1.Width = 100;

    n1.Height = 75;

    Model.Nodes.Add(n);

    Model.Nodes.Add(n1);

    Group g = new Group(Guid.NewGuid(), "group1");

    g.AddChild(n);

    g.AddChild(n1);

    Model.Nodes.Add(g);

    g.RemoveChild(n);

}

vbnet

Public Control As DiagramControl

Public Model As DiagramModel

Public View As DiagramView

    'INSTANT VB WARNING: The following constructor is declared outside of its associated class:

    'ORIGINAL LINE: public MainPage ()

    Public Sub New()

        Control = New DiagramControl()

        Model = New DiagramModel()

        View = New DiagramView()

        Control.View = View

        Control.Model = Model

        View.Bounds = New Thickness(0, 0, 1000, 1000)

        Dim n As New Node(Guid.NewGuid(), "Start")

        n.Shape = Shapes.FlowChart_Start

        n.Level = 1

        n.OffsetX = 150

        n.OffsetY = 25

        n.Width = 150

        n.Height = 75

        Dim n1 As New Node(Guid.NewGuid(), "End")

        n1.Shape = Shapes.FlowChart_Start

        n1.Level = 1

        n1.OffsetX = 350

        n1.OffsetY = 325

        n1.Width = 100

        n1.Height = 75

        Model.Nodes.Add(n)

        Model.Nodes.Add(n1)

        Dim g As New Group(Guid.NewGuid(), "group1")

        g.AddChild(n)

        g.AddChild(n1)

        Model.Nodes.Add(g)

        g.RemoveChild(n)

    End Sub

The following screen shot illustrates a group of two nodes created by using Code Behind.

By Using the Ungroup Command

The Ungroup command is used to ungroup two or more objects.

The following code example describes the ungrouping of objects by using the Ungroup command.

diagramControl.UnGroup.Execute(diagramView);

vbnet

diagramControl.UnGroup.Execute(diagramView)

The following steps describe the ungrouping of a group using the Ungroup command.

1.Select the group to be ungrouped.

group4

Selecting a Group

2.Call the Ungroup command. This ungroups the nodes.

As soon as the group is ungrouped, the selection rectangle disappears indicating that the group has been ungrouped.

Objects Ungrouped

Groups

Creating a Group

Grouping By Using Code Behind

Selection in a Group

Editing a Group

See Also

Connecting Groups

Creating Connections to a Group

Creating Connections to Objects in a Group

See Also

Ungroup

By Using Code Behind

By Using the Ungroup Command