Converting a WPF/E Application to a Silverlight Scripting Application

  • Article

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:

Click to run sample

Coco's Dress Up Kit
Thisapplication allows you drag and drop decorative objects from a panel onto an image:

click to run sample
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

Coco's signature
 

CocoDressUpKit.zip

Comments

  • Anonymous
    May 01, 2007
    PingBack from http://blogs.msdn.com/silverlight_sdk/archive/2007/04/30/new-api-for-the-silverlight-1-0-beta.aspx

  • Anonymous
    May 03, 2007
    The comment has been removed

  • Anonymous
    May 09, 2007
    To be fair, I haven’t been able to repro this yet. I'm wondering if it wasn't caused by a memory hiccup, which are all too  common on my overtaxed Vista/IE7 machine. I will keep you posted if I see it again.

  • Anonymous
    June 04, 2007
    During the weekend I spent some minutes to collect some of the greatest Silverlight examples. Most of

  • Anonymous
    February 29, 2008
    I got the following error when I attempted to run the sample. 403 - Forbidden: Access is denied. You do not have permission to view this directory or page using the credentials that you supplied.