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:


Click to run sample


Coco’s Dress Up Kit
This application 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 (5)

  1. jsudds says:

    I installed the SL beta for the first time today, and tried out the doggy salon app. Everything worked for about two seconds, but then started behaving badly.

    The mouse cursor lost track of what I was holding. Worse, moving the mouse near any of the floatable elements caused them to scatter off screen until there was nothing left except a very cold-looking lupine.

    Not pretty.

  2. jsudds says:

    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.

  3. During the weekend I spent some minutes to collect some of the greatest Silverlight examples. Most of

  4. Bootstrap Bill says:

    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.

Skip to main content