2X faster development
The ultimate WPF UI toolkit to boost your development speed.
WPF Diagram (SfDiagram) supports dragging and dropping unknown objects from another item’s control (apart from stencil). The DragEnter event is used to achieve this drag and drop by changing the unknown object to a known object that is predefined SfDiagram types. Let us use the SfTreeView items control to drag and drop the object. The first step is to prepare the DoDragDrop arguments of SfTreeView items, which initiates the drag-drop operation by using the SelectedItemChanged event of TreeView. Refer to the following code example for preparing DoDragDrop arguments: C# //Adding ItemDragStarting event. sftreeview.ItemDragStarting += Sftreeview_ItemDragStarting; //Method to execute ItemDragStarting event. private void Sftreeview_ItemDragStarting(object sender, TreeViewItemDragStartingEventArgs e) { DragObject<TreeViewNode> dataObject = new DragObject<TreeViewNode>(e.DraggingNodes.First() as TreeViewNode); DragDrop.DoDragDrop(sender as DependencyObject, dataObject, DragDropEffects.Copy); //This e.Cancel is used to stop the position changes in treeview e.Cancel = true; }
This transferred data dataObject will be available in the Source property of DragEnter event arguments of SfDiagram control to validate the dragged item. //Creating SfDiagram instance with nods and connectors collection. SfDiagram diagram = new SfDiagram() { Nodes = new NodeCollection(), Connectors = new ConnectorCollection(), }; //Adding DragEnter event. (diagram.Info as IGraphInfo).DragEnter += MainWindow_DragEnter; //Method to execute DragEnter event. private void MainWindow_DragEnter(object sender, ItemDropEventArgs args) { // args.Source have the data which is dragged for drop. if (args.Source is DataObject) { object dataObject = (args.Source as DataObject).GetData(typeof(DragObject<TreeViewNode>)); TreeViewNode treeViewItem = (dataObject as DragObject<TreeViewNode>).Source; } }
The next step is to pass the known type NodeViewModel when using drag and drop on the TreeViewItem by using the Source property. Refer to the following code example to pass the known object type using the Source property: //Method to execute DragEnter event. private void MainWindow_DragEnter(object sender, ItemDropEventArgs args) { // args.Source have the data which is dragged for drop. if (args.Source is DataObject) { object dataObject = (args.Source as DataObject).GetData(typeof(DragObject<TreeViewNode>)); TreeViewNode treeViewItem = (dataObject as DragObject<TreeViewNode>).Source; // Based on the TreeView Item you can add different types of Node. if (treeViewItem.Level.ToString() == "0") { args.Source = new NodeViewModel() { UnitHeight = 40, UnitWidth = 120, Shape = this.Resources["Rectangle"], ShapeStyle = this.Resources["Level1NodeStyle"] as Style, Annotations = new AnnotationCollection() { new AnnotationEditorViewModel() { Content = treeViewItem.Content.ToString(), Offset = new Point(0,0), Margin = new Thickness(23,10,0,0), }, }, }; } } }
Refer to the following code example to know the size, and position of dropped items using ItemDroppedEvent: //Adding ItemDrop event. (diagram.Info as IGraphInfo).ItemDropEvent += MainWindow_ItemDropEvent; //Method to execute ItemDropEvent. private void MainWindow_ItemDropEvent(object sender, ItemDropEventArgs args) { if (args.Source is INode) { INode item = args.Source as INode; //Getting position of dropped node. double offsetX = item.OffsetX; double offsetY = item.OffsetY; } }
|
2X faster development
The ultimate WPF UI toolkit to boost your development speed.
This page will automatically be redirected to the sign-in page in 10 seconds.
Hi,
Hi T-Chen,
Requirement: Need different style to node when drag and drop item from tree view to diagram.
Currently, when drag and drop node from the tree view to diagram it applied the common style to all the nodes. When applying different styles for each node, the style not preserved properly. We will consider this as a bug and provide solution in our upcoming 2020 Volume 4 SP1 release which will be planned to roll out on the end of January 2021.
Now, you can track the status of your request through below feedback link.
Feedback link: https://www.syncfusion.com/feedback/21651/need-different-style-to-node-when-drag-and-drop-item-from-tree-view-to-diagram
Regards, Karkuvel Rajan S