Register  Login
Blog
Silverlight Desktop Blog
Jun 25

Written by: Michael Washington
6/25/2008 9:07 PM

Live Example: SilverlightDragAndDrop

Download Code: SilverlightDragAndDrop.zip

One of the points of SilverlightDesktop is to allow you to drag and drop information between the modules. This is a task that is not easily done in any other web technology.

We are referring to dragging and dropping between modules that could be created by two different module developers who have no knowledge of each other. An example would be grabbing an email address from your contacts module and dropping it onto the email module and sending an email.

Here is an example of an early test. We still have a lot of work to do but we decided to share this code because it may be usable on your other Silverlight projects. 

The code is 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. However, this simpler example might be easier to understand. 

 

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

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

If the "Drag Me Outside" box is dragged inside either window, it will remain inside the window when the window is moved.

To determine the different behavior of the boxes, the words "[draggable outside]" are 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 either of the Canvas elements that are in 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.

Tags:
  

Terms Of Use | Privacy Statement | Copyright 2008 by SilverlightDesktop.net Dynnamite DotNetNuke Skins & Modules