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. Image for the cookie policy date
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

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

 

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