Feed Icon  

Contact

  • Bryant Likes
  • Send mail to the author(s) E-mail
  • twitter
  • View Bryant Likes's profile on LinkedIn
  • del.icio.us
Get Microsoft Silverlight
by clicking "Install Microsoft Silverlight" you accept the
Silverlight license agreement

Hosting By

Hot Topics

Tags

Open Source Projects

Archives

Ads

Upgrading from WPF/E to Silverlight

Posted in ASP.Net/Web Services | WPF/E | Silverlight at Tuesday, 01 May 2007 05:10 Pacific Daylight Time

I'm going through the process of updating my WPF/E Samples to Silverlight. Since it is a little more painful than the last update I thought I would walk you through the process so you don't have to figure the out.

  1. Copy the Silverlight.js file to your web server in order to replace the aghost.js file. You can delete the aghost.js file (you could leave it and replace the contents with the contents from the Silverlight.js file, but eventually you'll probably want to have the same file name to make future upgrades easier).
  2. Change the script reference from aghost.js to Silverlight.js:

    <script type="text/javascript" src="Silverlight.js"></script>

  3. Now you need to call Sys.Silverlight.createObject() instead of new aghost(). The parameters have changed quite a bit so here is the new mappings:

    WPF/E:

    new agHost( "WpfeControlHost", // DIV tag id. "WpfeControl", // WPF/E control id. "400px", // Width of rectangular region of WPF/E control in pixels. "100px", // Height of rectangular region of WPF/E control in pixels. "#D6D6D6", // Background color of rectangular region of WPF/E control. null, // SourceElement property value. "HelloWorld.xaml", // Source property value. "false", // WindowlessMode property value. "30", // MaxFrameRate property value. 'myErrorHandler'); // OnError property value -- notice use of single quotes.

    
    

     

    Silverlight:

    Sys.Silverlight.createObject( "HelloWorld.xaml", // Source property value. WpfeControlHost, // DOM reference to hosting DIV tag. "WpfeControl", // Unique control id value. { // Control properties. width:'400', // Width of rectangular region of control in pixels. height:'100', // Height of rectangular region of control in pixels. inplaceInstallPrompt:false,// Determines whether to display in-place install prompt if invalid version detected. background:'#D6D6D6', // Background color of control. isWindowless:'false', // Determines whether to display control in Windowless mode. framerate:'30', // MaxFrameRate property value. version:'0.9' // Control version to use. }, { onError:'myErrorHandler', // OnError property value -- event handler function name. onLoad:null // OnLoad property value -- event handler function name. }, null); // Context value -- event handler function name.

    
    

    Notice a few things have changed besides just the order and the addition of some new parameters. First, there are no quotes around the ID of the hosting DIV tag. Second, you really only have five parameters to pass in. The forth and fifth parameters are javascript objects that have multiple properties.

  4. Now the real fun begins. At this point you can run your page to see if you get any Silverlight errors. When I ran my rolling gear example I got this error message:

 

 

 

 

 

 

 

 

 

At least the error messages are much more descriptive now. :)

So for my gear example I just had to change the routed event from Canvas.OnLoad to Canvas.Loaded and it now works.

As I upgrade the rest of my examples I post any other tips/tricks I find here as well.

Update: Tip #1 - Search and replace your Xaml files to remove all instances of java script: in your event handlers (note: I added a space in the java script so that my blog filter wouldn't comment it out).

Update2: The MouseMove event has changed quite a bit. Instead of getting the x and y like this: args.GetValue("X") you now call: mouseEventArgs.getPosition(element).x. The documentation always passing in a null for the element parameter, so I'm not totally sure what it is used for.

Update3: If you were hosting your script that used to create the aghost object inside the div that would host the control, you need to move the script outside the div tag since the script references the div by the id and not by the string (and I guess it isn't part of the dom yet since we haven't hit the end tag). Let me know if you need an example.

Update4: The CreateFromXaml method is no longer on the Silverlight control object directly, but under the content object. So instead of wpfeControl.createFromXaml("...") you now need to call wpfeControl.content.createFromXaml("...").

Update5: I wish I found this article sooner: What's New in Silverlight (1.0 Beta and 1.1 Alpha)?

Update6: ActualWidth and ActualHeight now require the content object as well. So you need to change control.ActualHeight to control.content.actualHeight.

Update7: SetSource now requires a part parameter. If you're using it to load images you pass an empty string as the part.

Woot! My Hong Button example is now working in Silverlight.

Tuesday, 01 May 2007 08:40:57 (Pacific Daylight Time, UTC-07:00)
Thanks! I was just about to head over to the Sandbox at the Mix to figure this out!
Tuesday, 01 May 2007 13:33:37 (Pacific Daylight Time, UTC-07:00)
1. "there are no quotes around the ID of the hosting DIV tag."

Silverlight template in Orcas Beta 1 creates quotes around the ID.

2. mouseEventArgs.getPosition(element).x

Now you can get mouse cursor position relative to the specified UI element. In Feb 2007 CTP, mouseEventArgs.x always return the cursor position relative to the root canvas.
Tuesday, 01 May 2007 15:41:11 (Pacific Daylight Time, UTC-07:00)
Thanks for the info Danny.I still have another hour and thirty minutes before orcas is finished downloading, so I haven't had a chance to try that out yet.

Sunday, 06 May 2007 08:44:10 (Pacific Daylight Time, UTC-07:00)
This is a good post. This will alleviate some pains for people. Additionally, along with the "createFromXaml" tip, I noticed that I needed to change all of my .findName calls to .content.findName
Wednesday, 15 August 2007 13:22:59 (Pacific Daylight Time, UTC-07:00)
please let me know how to access /create object of last created silverlignt object using Silverlight.createObject
Comments are closed.