How to add a container as parent of the selected node using the context menu in the WPF Diagram (SfDiagram)?

In the WPF Diagram, you can add a container as parent of the selected node using the context menu by implementing custom commands. In the command execution method, you can create a container and add the selected node as a child of that container. We have provided the code example for how to achieve this.

Code Snippet :

DiagramMenuItem createContainerMenuItem = new DiagramMenuItem()
{
    Content = "Container",
    Command = new DelegateCommand(OnExecutingCreateContainerCommand, CanExecuteCreateContainer),
};
//Here diagram is the instance of the SfDiagram.
diagram.Menu.MenuItems.Add(createContainerMenuItem);

//method for add the Container
public void OnExecutingCreateContainerCommand(object parameter)
{
   var selectedItems = diagram.SelectedItems as ISelector;
   var selectedNodes = (selectedItems.Nodes as IEnumerable<object>).OfType<NodeViewModel>();
   var selectedConnectors = (selectedItems.Connectors as IEnumerable<object>).OfType<ConnectorViewModel>();
   var nodesToAdd = new ObservableCollection<NodeViewModel>(selectedNodes);
   var connectorsToAdd = new ObservableCollection<ConnectorViewModel>(selectedConnectors);

   var selectionBounds = (selectedItems.Info as ISelectorInfo).Bounds;
   selectionBounds.Inflate(30, 20);

   var offsetX = selectionBounds.X + selectionBounds.Width * 0.5;
   var offsetY = selectionBounds.Y + selectionBounds.Height * 0.5;

   var containerHeader = new ContainerHeaderViewModel()
   {
       UnitHeight = 40,
       Annotation = new AnnotationEditorViewModel()
       {
           Content = "Container",
           FontSize = 18,
           FontWeight = FontWeights.Bold,
           Foreground = new SolidColorBrush((Color)ColorConverter.ConvertFromString("#343434"))
       },
   };

   // To make header not overlap with the child nodes.
   selectionBounds.Height += containerHeader.UnitHeight;
   offsetY -= containerHeader.UnitHeight * 0.5;

   var container = new CustomContainerVM()
   {
       Name = "Container",
       Nodes = nodesToAdd,
       Connectors = connectorsToAdd,
       UnitWidth = selectionBounds.Width,
       UnitHeight = selectionBounds.Height,
       OffsetX = offsetX,
       OffsetY = offsetY
   };

   //Create dotted lines
   var containerStyle = new Style(typeof(Path));
   containerStyle.Setters.Add(new Setter(Path.FillProperty, Brushes.Transparent));
   containerStyle.Setters.Add(new Setter(Path.StretchProperty, Stretch.Fill));
   containerStyle.Setters.Add(new Setter(Path.StrokeProperty, Brushes.Black));
   containerStyle.Setters.Add(new Setter(Path.StrokeDashArrayProperty, new DoubleCollection() { 2, 3 }));

   container.ShapeStyle = containerStyle;

   container.Header = containerHeader;

   (diagram.Groups as GroupCollection).Add(container);
}

public bool CanExecuteCreateContainer(object param)
{
    //Node selection count.
    int selectedNodesCount = ((diagram.SelectedItems as SelectorViewModel).Nodes as IEnumerable<object>).Count();
    if (selectedNodesCount > 0)
    {
        return true;
    }

    return false;
} 

View sample in Github

Conclusion
I hope you enjoyed learning about How to add a container as parent of the selected node using the context menu in the WPF Diagram

You can refer to our WPF Diagram feature tour page to learn about its other groundbreaking feature representations and documentation, and how to quickly get started for configuration specifications.

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!