Bryant Likes

Now that there is a central place to host your Silverlight applications, creating a Community Server Module for Silverlight is a lot easier. I took my previous WPF/E CS Module and modified it to work with the Silverlight streaming service. If you want to add this to your blog follow these steps:

1) Download my CS Module source code and compile it. Follow the installation instructions in the readme.txt file.

2) Create an account on the Silverlight streaming service.

3) Read Tim Heuer's excellent post on how to create and upload your Silverlight application to the server.

4) Write a blog post and embed the <silverlight /> tag with your information.

The Silverlight app should show up in the blog post, but I know that the url that I output in the feeds will not be correct. I've only found how to preview my own applications when I'm logged in but I haven't found an easy way to send a link. I'm sure this is possible (if not, can we get it added?).

Here is a sample Silverlight 1.1 app for your viewing pleasure.

Well I've been downloading the VS Orcas for a few days and it still isn't done. I really wanted to try out the .NET support in Silverlight 1.1 and so I asked if this could be done with VS 2005 and Scott Louvau replied:

Well, in VS2005 you can create a class library which will build against the Silverlight runtime, but it's a little work.

1. Create a Class Library.
2. Remove all references from it.
3. Right-click on the Project and pick Properties.
4. On the Build tab, click Advanced and check 'Do not reference mscorlib.dll'
5. Manually add references to mscorlib, agclr, System, System.Core, System.Silverlight, and System.Xml.Core from the Silverlight install folder (\Program Files\Microsoft Silverlight\)

At this point your build outputs should be Silverlight consumable binaries. It looks like the equivalent command line call to csc.exe (the C# compiler) should include the references to the mentioned binaries and the /nostdlib option but may require others as well.

 -Scott

I tried it out and it work pretty well. If you're interested I've uploaded my project so that you can download it and try it out. You will need Silverlight 1.1 installed and VS studio 2005.

Download the sample code here

I've also posted the code to my server but I couldn't figure out how to setup IIS to allow DLL files to be downloaded. Maybe tomorrow.

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.