Converting a WPF/E Application to a Silverlight Scripting Application

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 Kit
Thisapplication 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 Application
Here are the details of the steps required to convert the WPF/E application to a Silverlight scripting application:

 Step 1 Replace aghost.js with CreateSilverlight.js and Silverlight.js
The recommended procedure for creating a Silverlight control is to use the JavaScript helper files, CreateSilverlight.js and Silverlight.js. The CreateSilverlight.js file contains a template for the CreateSilverlight method, which you can customize for your application needs. Here's the modified CreateSilverlight method for this application:

function

createSilverlight()
{
Sys.Silverlight.createObject(
        "plugin.xaml", // Source property value.
        parentElement, // DOM reference to hosting DIV tag.
        "myControl",   // Unique control id value.
        {   // Control properties.
            width:'1048',   // Width of control.
            height:'586',   // Height of control.
            version:'0.9.0' // Control version to use.
        },
{ }); // No events defined -- use empty list.
}

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:

WPF/E HTML
<script type="text/javascript" src="aghost.js"></script>
...
<div id="controlHost" >
  <script type="text/javascript">
    // Initialize and create control.
    new agHost(
      "controlHost",  // DOM reference to hosting DIV tag.
      "myControl",    // Unique control ID value.
      "1048",         // Width of control.
      "586",          // Height of control.
      null,           // Background of control (default).
      null,           // SourceElement property.
      "plugin.xaml"); // Source property value.
  </script>
</div>

Silverlight HTML 
<script type="text/javascript"
src="CreateSilverlight.js"></script>
<script type="text/javascript" src="Silverlight.js"></script>
...
<div id="controlHost" >
  <script type="text/javascript">
    // DOM reference to hosting DIV tag.
    var parentElement =
document.getElementById("controlHost");

    // Initialize and create control.
    createSilverlight();
  </script>
</div>

For more information on creating and initializing Silverlight controls, see Using CreateSilverlight.js and Silverlight.js.

 Step 2 Use GetPosition to Retrieve Mouse Coordinates
The 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 CreateFromXaml
In 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.

 Step 4 Remove the "javascript:" Prefix from Event Handler References
The "javascript:" prefix is no longer required for referencing event handler functions. While the "javascript:" prefix is supported in this release, it is a deprecated feature and will be removed in future versions.

MouseLeftButtonDown="javascript:onMouseDown"
MouseLeftButtonDown="onMouseDown"          

While this application did not define any events in the runtime code, the way event handler functions are assigned in JavaScript has changed:

sender.keyDown =

"javascript:onKeyDown";
sender.addEventListener("keyDown", "onKeyDown");

For more information on using events, see Silverlight Events.

List of New API for Silverlight 1.0 Beta
Brian 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.

Enjoy,
Lorin
Silverlight SDK Team

and my dog, Coco

CocoDressUpKit.zip