How to drag and drop different shapes from SfTreeView to WPF Diagram (SfDiagram)?
WPF Diagram (SfDiagram) supports dragging and dropping the objects (unknown) 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 diagram types.
Let us use the SfTreeView Itemscontrol to drag and drop the different shaped object.
The first step is to prepare the DoDragDrop arguments, which initiate drag-drop operation by using the ItemDragStarting event of SfTreeView.
Refer to the following code example for preparing the DoDragDrop arguments.
C#
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 a diagram to validate the dragged item.
C#
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 with the treeview item, you can change the shape and shapestyle of the node based on the treeview item properties.
C#
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),
},
},
};
}
else
{
args.Source = new NodeViewModel()
{
UnitHeight = 40,
UnitWidth = 120,
Shape = this.Resources["Ellipse"],
ShapeStyle = this.Resources["OtherLevelNodeStyle"] as Style,
Annotations = new AnnotationCollection()
{
new AnnotationEditorViewModel()
{
Content = treeViewItem.Content.ToString(),
},
},
};
}
