We use cookies to give you the best experience on our website. If you continue to browse, then you agree to our privacy policy and cookie policy. (Last updated on: June 24, 2019).
Unfortunately, activation email could not send to your email. Please try again.
Syncfusion Feedback

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

Platform: WPF |
Control: SfDiagram |
Published Date: June 27, 2019 |
Last Revised Date: April 17, 2020

Drag Drop from Tree view to Diagram

 

Diagram supports dragging and dropping the objects (unknown) from another items control (apart from stencil). The DragEnter event is used to achieve this drag and drop by changing the unknown object to known object that is predefined diagram types.

Let us use the TreeView Itemscontrol to drag and drop the object.

First step is to prepare the DoDragDrop arguments, which initiates drag drop operation by using the SelectedItemChanged event of TreeView.

Refer to the following code example for preparing DoDragDrop arguments.

//SelectedItemChanged Event of TreeView Control
        private void treeview_SelectedItemChanged(object sender, RoutedPropertyChangedEventArgs<object> e)
        {
            NodeViewModel nvm = new NodeViewModel();           
            DragObject<NodeViewModel> dataObject = new DragObject<NodeViewModel>(nvm);
            // Initiates for drag drop operation
            DragDrop.DoDragDrop(e.NewValue as DependencyObject, dataObject, DragDropEffects.Copy);
        }

 

This transferred data dataObject will be available in the “Source” property of DragEnter event arguments of Diagram to validate the dragged item.

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<TreeViewItem>));
  TreeViewItem treeViewItem = (dataObject as DragObject<TreeViewItem>).Source;
 }
}

 

Next step is to pass known type NodeViewModel when drag and drop the TreeViewItem by using the “Source” property.

 

Refer to the following code example to pass the known object type using “args.Source”.

private void MainWindow_DragEnter(object sender, ItemDropEventArgs args)
{
            // args.Source have the data which is dragged for drop.
            if (args.Source is DataObject)
            {               
                //Convert the unknown treeviewitem to diagram known object(NodeViewModel). 
                args.Source = new NodeViewModel()
                {
                    UnitHeight = 50,
                    UnitWidth = 50,    
  //add custom properties based on dropped tree view item.              
                };
            }
}

 

View Sample in GitHub

2X faster development

The ultimate WPF UI toolkit to boost your development speed.
ADD COMMENT
You must log in to leave a comment
Comments
T-Chen
Jan 16, 2021

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 dataObject = new DragObject(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
Reply
Karkuvel Rajan Shanmugavel [Syncfusion]
Jan 21, 2021

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

Please sign in to access our KB

This page will automatically be redirected to the sign-in page in 10 seconds.

Up arrow icon

Warning Icon You are using an outdated version of Internet Explorer that may not display all features of this and other websites. Upgrade to Internet Explorer 8 or newer for a better experience.Close Icon

Live Chat Icon For mobile
Live Chat Icon