Drag and drop is a very useful feature of interactive content. You can easily add drag and drop support to your Silverlight control by implementing simple event handlers on mouse events. I showed how to do this in an earlier blog posting using the Feb 2007 CTP -- WPF/E Drag and Drop: Coco's Dress Up Kit. This posting goes through the steps required to convert the WPF/E version of this application to a Silverlight 1.0 Beta scripting application.
The Zip file, CocoDressUpKit.zip, contains all the files used for this application. You can also run the Silverlight scripting application by clicking the button below:
Coco's Dress Up KitThis application allows you drag and drop decorative objects from a panel onto an image:
Coco's Dress Up Kit
Converting a WPF/E Application to a Silverlight Scripting ApplicationHere are the details of the steps required to convert the WPF/E application to a Silverlight scripting application:
Once you have created a custom CreateSilverlight method for your application, the hosting Web page needs to invoke it. Here are the differences between the WPF/E and Silverlight ways of initializing and creating a control in HTML:
For more information on creating and initializing Silverlight controls, see Using CreateSilverlight.js and Silverlight.js.
Step 2 Use GetPosition to Retrieve Mouse CoordinatesThe MouseEventArgs parameter now provides a GetPosition method to retrieve the x- and y-coordinate values of the current mouse position. Here's the change required to use the GetPosition method:
// Retrieve the current position of the mouse. var currX = mouseEventArgs.x; var currX = mouseEventArgs.getPosition(null).x; var currY = mouseEventArgs.y; var currY = mouseEventArgs.getPosition(null).y;
For more information on using mouse events, see Silverlight Mouse Support.
Step 3 Use the Content Property to Invoke CreateFromXamlIn order to use the CreateFromXaml method, you now need to prefix the method invocation with the Content property. Here's the change required to use the CreateFromXaml method:
var ellipse = control.createFromXaml(xamlFragment; var ellipse = control.content.createFromXaml(xamlFragment);
For more information on using the CreateFromXaml method, see Using the CreateFromXaml Method. For more information on changes in referencing the Silverlight control, see Referencing the Control's Properties, Methods, and Events at Runtime in Using Silverlight Controls.
List of New API for Silverlight 1.0 BetaBrian has put together an excellent reference for those who are looking for a list of the differences in API between the February CTP and the Silverlight 1.0 Beta release. Check out his posting, New API for the Silverlight 1.0 Beta.