Group in WPF Diagram (SfDiagram)

11 Jan 20241 minute to read

Group is used to cluster multiple Nodes and Connectors into a single element. It acts like a container for its children (Nodes, Groups, and Connectors). Every change made to the Group also affects the children. Child elements can be edited individually.

Create Group

Add Group

The following code illustrates how to create a Group Node.

C#

ObservableCollection<NodeViewModel> nodes = new ObservableCollection<NodeViewModel>();
NodeViewModel node = new NodeViewModel()
{
	UnitWidth = 100,
	UnitHeight = 100,
	OffsetX = 100,
	OffsetY = 100,
	Shape = new RectangleGeometry() { Rect = new Rect(0, 0, 10, 10) },
	ShapeStyle = App.Current.Resources["shapestyle"] as Style
};
NodeViewModel node1 = new NodeViewModel()
{
	UnitWidth = 100,
	UnitHeight = 100,
	OffsetX = 200,
	OffsetY = 200,
	Shape = new RectangleGeometry() { Rect = new Rect(0, 0, 10, 10) },
	ShapeStyle = App.Current.Resources["shapestyle"] as Style
};

ObservableCollection<GroupViewModel> groups = new ObservableCollection<GroupViewModel>();
GroupViewModel group = new GroupViewModel()
{
	Nodes = new ObservableCollection<NodeViewModel>()
	{
		node,
		node1
	},
};

groups.Add(group);
diagram.Groups = groups;

Group from Stencil

Group Nodes can be predefined and added to stencil. You can drop those Groups into Diagram, when required.

To explore how to add Groups from stencil, refer to Stencil.

Interaction

You can edit the Group and its children at runtime. For more information about how to interact with a Group, refer to Interaction.

See Also

How to restrict the child node dragging whereas allow group dragging?

How to Notify when diagramming object is duplicated with source?