Silverlight 2 Drag, Drop, and Import Content Example

Dragging an element from one user control into another. Exporting and importing data from one user control into another.

Note: There is a Silverlight 3.0 version here: Silverlight 3.0 Drag and Drop Test

Back To: Silverlight Tutorials

Also see:


                        Dynamically loading Silverlight controls into resizable draggable windows.

{Click Here to See the Live Example}

Download Code: SilverlightDragAndDrop_new.zip

This is an an example of code that will be incorporated into http://SilverlightDesktop.net.

The example is based on an earlier drag and drop code sample that was based on an example created by Keith Mahoney. In his example he shows how to drag and drop various types of elements into various types of Panels. In this example we only cover dragging and dropping an element onto a Canvas. We also cover importing and exporting content from one user control into another.

 

When you view the sample you see three movable windows (you grab the colored bar on the top of the window to drag it) with three boxes in the first window.

The "Drag Me" box can only be dragged inside the window, but the blank box and the "Drag Me Outside" box can be dragged anywhere on the screen.

To determine the different behavior of the boxes, the word "[draggable]" is added to the Tag property of the element that will be draggable outside the window. When an element with that Tag is detected, the element is removed from the Canvas it is currently on and placed on the root Canvas of the application while it is being dragged.

When the element is dropped a HitTest is performed to see if the mouse is currently in the bounds of a Canvas element that is in one of the windows. If it is in the bounds, the element is removed from the root Canvas and placed onto the Canvas that is in the respective window.

If the boxes are dragged inside another window, they will remain in the window and move with that window when that window is moved.

The window labeled "Drop Items Here" implements a "ImportContent" interface that allows content to be possibly imported and parsed rather than simply added to the window. When the blank box is dragged onto the window labeled "Drop Items Here", the box is simply added to the window.

However, when the box labeled "Drag Me Outside and Export Me" is dragged onto the window labeled "Drop Items Here", the TextBlocks in the box are parsed and their content is added to the TextBlock in the window.