The easiest implementation strategy is to make sure that the drag-and-drop data is an instance of your model’s node data type.
For example, consider the case where my Diagram.Model was created as an instance of GraphLinksModel<TestData, Object, String, TestLink>. TestData and TestLink are data classes that I have defined. And make sure you have set DiagramModel.Modifiable to true.
Then you could build a TreeView where each TreeViewItem had an instance of TestDataassociated with it. For this example, I have built the tree in XAML and the TreeViewItem.Header is a TestData.
Silverlight doesn’t support drag-and-drop, so there isn’t any built-in support for handling drops from other elements exceptwhen copying from another Diagram. (Well, Silverlight 4 supports a very restricted form of drag-and-drop, but that doesn’t help either of us.)
I’m not familiar with Telerik’s drag-and-drop mechanism in Silverlight. You’ll need to implement your own drop handler, because Diagram.ExternalObjectsDropped won’t be involved.
There is “common” drag-and-drop support in the Silverlight Toolkit from silverlight.codeplex.com. I know that that works with GoXam, from TreeViews to Diagram. But the caution is that this functionality is considered “Experimental” by Microsoft.
OK, I have tried the Silverlight toolkit’s drag-and-drop support for TreeViews. I purposely used the older Silverlight 3 toolkit from November 2009, to make sure this stuff works in Silverlight 3 and (presumably) also with the toolkit for Silverlight 4.
Here are the XMLNS declarations, which work in Silverlight 3 or 4:
xmlns:controls="clr-namespace:System.Windows.Controls;assembly=System.Windows.Controls"
xmlns:toolkit="clr-namespace:System.Windows.Controls;assembly=System.Windows.Controls.Toolkit"
xmlns:mswindows="clr-namespace:Microsoft.Windows;assembly=System.Windows.Controls.Toolkit"
Note the use of two DLLs, System.Windows.Controls.DLL for TreeView and System.Windows.Controls.Toolkit.DLL for drag-and-drop support.
<go:Diagram x:Name="myDiagram" Grid.Column="1"
mswindows:DragDrop.AllowDrop="True"
. . . />
And the ItemDroppedOnTarget event handler:
private void TreeViewDragDropTarget_ItemDroppedOnTarget(object sender, ItemDragEventArgs e) {
var coll = e.Data as SelectionCollection;
if (coll != null) {
myDiagram.StartTransaction("Dropped data");
foreach (Selection sel in coll) {
var item = sel.Item as TreeViewItem;
if (item != null) {
var data = item.Header as TestData;
if (data != null) {
var newdata = myDiagram.Model.AddNodeCopy(data) as TestData;
if (newdata != null) newdata.Location = myDiagram.LastMousePointInModel;
}
}
}
myDiagram.CommitTransaction("Dropped data");
}
}
Of course you’ll need to customize the code for your own data.
Please see how one can implement dropping data on nodes from ListBox. The example shows how to drop some object associated to a ListBox item and onto another object associated to the GoXam node. I use toolkit for SL4. The flow is simple.
1. Use toolkit to enable draging from listbox.
2. Drop event is handled from listbox drop event, how ever it is unaware of the element that it's dropped upon so. 3. Drop target is managed via mouse_enter,mouse_leave events.
// Sets the Tag property on a Node object to false // when the MouseEnter event is called on the Node's SpotPanel. // The binding on the Stroke will change to a Transparent brush. privatevoid Node_MouseLeave(object sender, MouseEventArgs e) { SetTagVisible(sender asUIElement, false); }
// Used in the above two methods to change the node's Tag property to a specified value. privatevoid SetTagVisible(UIElement uielement, bool visible) { if (Northwoods.GoXam.Part.FindAncestor<Palette>(uielement) == null) { SpotPanel sp = uielement asSpotPanel; if (sp == null) return; Node n = Northwoods.GoXam.Part.FindAncestor<Node>(sp); if (n == null) return; n.Tag = visible; if (visible) { Globals.Instance.ActiveNode = n; Globals.Instance.ActiveSpotPanel = sp; } else { Globals.Instance.ActiveNode = null; Globals.Instance.ActiveSpotPanel = null; } } }