Drag and drop is a very useful feature of interactive content. You can easily add drag and drop to your WPF/E control by implementing simple event handlers on mouse events. This posting illustrates the use of drag and drop functionality in a creative WPF/E application.
The Zip file (CocoDressUpKit.zip) contains all the files used for this application. You can also view the WPF/E application at: http://wpfesdk.members.winisp.net/samples/coco
Using Drag and Drop in a WPF/E ControlThe Coco's Dress Up Kit application allows you to drag and drop decorative objects from a panel onto an image:
Coco's Dress Up Kit
Each decorative object that is on the panel is defined as a Canvas object, and provides event handlers for the mouse events: MouseLeftButtonDown, MouseLeftButtonUp, and MouseMove. Here is the XAML content definition for one of the purple ribbons:
All decorative objects share the same three mouse event handlers, since the drag and drop functionality is implemented the same for all the objects.
Event Handlers for Drag and Drop OperationsA drag and drop operation is a sequence of three steps:
Let's look at how each of these steps is implemented in a WPF/E control. The onMouseDown event handler in the eventhandler.js file initiates the drag and drop operation by storing the beginning position of the mouse, setting a flag to indicate the drag and drop operation is in effect, and gaining exclusive access to mouse events by invoking the CaptureMouse method:
// Start drag and drop operation.
The onMouseMove event handler in the eventhandler.js file determines whether the drag and drop operation is in effect by testing the value of the isMouseDown variable. If the drag and drop operation is in effect, the incremental difference between the last stored mouse position and the current mouse position is applied to the object's Canvas.Top and Canvas.Left values:
// Reposition object during drag and drop operation.
The onMouseUp event handler in the eventhandler.js file stops the drag and drop operation by invoking the ReleaseMouseCapture method on the object. This method releases the object's exclusive access to the WPF/E control's mouse events. This means that all objects can now receive mouse events:
// Stop drag and drop operation.
How Mouse Capture Enables Drag and DropThe reason why all the decorative objects can share mouse event handlers is that each object enables mouse capture during the drag and drop operation. The end result is that when you drag an object, such as the sunglasses, no mouse events are sent to other objects. So when the sunglasses is dragged under the flower, the flower does not receive mouse events, even though the mouse cursor is directly over the flower:
Dragging the sunglasses does not trigger mouse events for the flower
Mouse capture also enables drag and drop operations when you move the mouse quickly. As long as mouse capture is enabled, the mouse cursor does not need to be exactly on the object being dragged. Eventually, the object being dragged will render under the mouse cursor.
Enjoy,LorinWPF/E Developer Content Teamand my dog, Coco