Category / Section
How to create parent and child relationship by drag and drop nodes in WPF Diagram (SfDiagram)?
2 mins read
The ItemDropEvent is triggered when the Node or Connector is dragged and dropped to another once the AllowDrop Constraints is enabled for Node or Connector in WPF Diagram (SfDiagram). Here, you get the source of the argument as drag item and Target as dropped items (List of items). This event helps us to reposition the nodes and relationship.
C#
public class DiagramVM : DiagramViewModel { public DiagramVM() { Nodes = new ObservableCollection<CustomNode>(); // Initialize Commands ItemAddedCommand = new Command(OnItemAdded); DropCommand = new Command(OnItemDrop); } // Method used to add the Allowdrop constraints to the dropped node // Allowdrop constraints is used to allow the itemdropped event to get the element as target element. private void OnItemAdded(object obj) { ItemAddedEventArgs args = obj as ItemAddedEventArgs; if (args.Item is CustomNode) { (args.Item as CustomNode).Constraints = (args.Item as CustomNode).Constraints.Add(NodeConstraints.AllowDrop); } } // Mehtod to create relation between drag and dropped nodes private void OnItemDrop(object obj) { ItemDropEventArgs args = obj as ItemDropEventArgs; if (!(args.Target is SfDiagram)) { foreach (object targetElement in args.Target as IEnumerable<object>) { if (targetElement is CustomNode) { if ((args.Source as CustomNode).ParentId == null) { (args.Source as CustomNode).Id = "Node" + (Nodes as ObservableCollection<CustomNode>).Count.ToString(); (args.Source as CustomNode).ID = (args.Source as CustomNode).Id; (args.Source as CustomNode).ParentId = (targetElement as CustomNode).Id; CreateConnector((args.Source as CustomNode).ParentId, (args.Source as CustomNode).Id); LayoutManager.Layout.UpdateLayout(); } } } } else if (args.Target is SfDiagram) { if ((args.Source as CustomNode).ParentId == null) { (args.Source as CustomNode).Id = "Node" + (Nodes as ObservableCollection<CustomNode>).Count.ToString(); (args.Source as CustomNode).ID = (args.Source as CustomNode).Id; (args.Source as CustomNode).ParentId = ""; LayoutManager.Layout.UpdateLayout(); } } } }
The sample has provided to represent the parent-child relationship when drag and drop child node from the stencil to the parent node on the diagram. In the sample, you have restricted the drop of a child node in the diagram area.