How to drag and drop elements from treeview in WPF Diagram (SfDiagram)?
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;
}
}
Conclusion
I hope you enjoyed learning about how to drag and drop elements from treeview in WPF Diagram.
You can refer to our WPF Diagram's feature tour page to know about its other groundbreaking feature representations and documentation, and how to quickly get started for configuration specifications. You can also explore our WPF Diagram example to understand how to create and manipulate data.
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!
