Articles in this section
Category / Section

How to drag and drop elements from treeview in WPF Diagram (SfDiagram)?

4 mins read

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;
    }
}

 

View Sample in GitHub 

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 Syncfusio, 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 forumsDirect-Trac, or feedback portal. We are always happy to assist you!

Did you find this information helpful?
Yes
No
Help us improve this page
Please provide feedback or comments
Comments (1)
Please  to leave a comment
TC
T-Chen

Hi,

  I have faced the problem when using the example of TreeViewToDiagram. My solution is below:

  private void sfTreeView_ItemDragStarting(object sender, Syncfusion.UI.Xaml.TreeView.TreeViewItemDragStartingEventArgs e)
    {
        DragObject<TreeViewNode> dataObject = new DragObject<TreeViewNode>(e.DraggingNodes[0] as TreeViewNode);
        // Initiates the drag drop opertion
        DragDrop.DoDragDrop(sfTreeView as DependencyObject, dataObject, DragDropEffects.Copy);
    }

   Now, it can drag item from sfTreeView to sfDiagram, but the Node added in sfDiagram is all with the same Style predefined in XAML. It's not like dragging from Stencil to sfDiagram. 

   Expecting better solutions!


   Best regards!
   T-Chen
KR
Karkuvel Rajan Shanmugavel

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

Access denied
Access denied