I had some time recently in between Surface projects and decided to start converting some of the 1.0 examples to the latest Silverlight release. I’m kinda glad I got to skip all the 1.1 –> 2.0 Beta phases and jump right into the final release. Anyway here’s the first conversion, the image carousel…

View Example, Source
  

• Located in Royal Oak, MI
• Compensation is commensurate with experience
• Position is Full-time

Qualifications

• Candidate must have been working with Silverlight 1.0 since its inception, with examples showing level of expertise
• Understanding of enhancements made with 2.0
• Understanding of WPF / XAML
• Working knowledge of development within .NET 3.0 & 3.5 Framework
• Strong JavaScript
• Experience using Expression Blend

Requirements

• Must show the ability to work collaboratively as well as independently.
• Communicate effectively with Senior Developers, Project Managers, and Creative team to maximize production.
• Produce internal case studies to explore all benefits of Silverlight, and update Blog to report and show these findings to the Silverlight community at large.
• Provide mentoring and training to junior-level developers to assist in the expansion of our team.
• Be an overall rockstar, and provide humor and a positive attitude to our already inspiring work environment.

To apply for this position, please forward your curriculum vitae to: msheldon@vectorform.com

<SilverlightApp>  
   <source>dummy.xaml</source>
</SilverlightApp>

So just add the above snippet to your “manifest.xml” file, and include it in your zip with your video(s) file and upload to the Silverlight Streaming service.

Now for the tricky parts. You need to make a modification to your code to reference not your local copy of silverlight.js but the remote version supplied by the service, something like http://agappdom.net/h/silverlight.js

Another important change is in your createSilverlight function:

function createSilverlight() {  

   Silverlight.createHostedObjectEx({  

        source: "interface.xaml",  

        parentElement: document.getElementById("Wrapper_MultipleVideos"),  

        id: "SilverlightControl",  

        properties: {  

            width: "940",  

            height: "600",  

            background:"#bb5619",  

            isWindowless: "false",  

            framerate:"30",  

            version: "1.0"  

        },  

        events: {  

        },  

        initParams:"streaming:/48598/MultipleVideos/"  

    });  

}

Two things to note here: 1) use the Silverlight.createHostedObjectEx function call and 2) the additional initParams property.

The initParams property takes a string as input, and should point to your AccountID and Application’s Name listed on the Silverlight Streaming service site, in this case it’s “MultipleVideos”.

What happens here is that the service will convert the string specified into a proper URL. This URL is NOT permanent and will change so you cant just write it down and hard code it into your functions or xaml. Therefore you need to programmatically set the source of your MediaElement.

So for example you could do something like this in your initial start up function of your app (or in the Loaded event call for your main Canvas)

function mainCanvasLoaded(s) { 
   plugin = s.getHost()
   main=s.findName("mainCanvas")
   vid1=main.findName("videoElement1")
   vid2=main.findName("videoElement2")  

   //dynamic URL assignment happens here
   vid1.source=plugin.initParams+"/my_video1.wmv"
   vid2.source=plugin.initParams+"/my_video2.wmv"
}

If you want to upload and reference multiple videos under different application name’s you would need to tweak the initParams property like so to be a comma separated list:

initParams:"streaming:/48598/MondaysVideo/, streaming:/48598/ThursdaysVideo/"

And then in your video source assignment code you could handle that with a split(”,”) call like this:

   urlArray=plugin.initParams.split(",")
   vid1_url=urlArray[0]
   vid2_url=urlArray[1]

Official info on the subject can be found here at this MSDN article, but I didn’t find it too helpful.

The Silverlight Streaming service is meant to be a convenient place where designers and developers can host Silverlight Applications they build for free.

To use the service to host your application you must sign-in to http://silverlight.live.com/ with a windows Live ID, hotmail, messenger or passport account.

After creating an account you will get an Account ID and an Account Key. The Silverlight Streaming Account ID is public and you will need to use it in your code of your Silverlight Applications. Your Account Key is private and should be treated like a password.

Once signed in, click on Manage Applications on the left. Here you can upload your Silverlight Application. Before jumping right in and selecting the files you want to upload you need to do a few things first. You need to create an xml file called ”manifest.xml” listing all the files your app will be using and the order of the JS files. Here is a sample manifest.xml file:

<SilverlightApp>   
   <source>name of the initial XAML file</source>    

   <version>[empty | 1.0 | 1.1]</version>    

   <width>[value in browser units or percentage]</width>    

   <height>[value in browser units or percentage]</height>    

   <jsOrder>    

      <js>[js file to load first]</js>    

      <js>[js file to load second]</js>    

      <js>...</js>    

   </jsOrder>    

</SilverlightApp>

Check out this MSDN Article for more info on the manifest file.

Once you have created this file, name it “manifest.xml” and place it in the root folder of your application. Zip up the entire contents of your application (including the manifest file) and now you’re ready to upload to the Silverlight Streaming service site.

After you’ve successfully uploaded your zip file containing your application, you’ll be directed to a page where you can upload an updated version, launch a test page containing your app, or delete your app. You’ll also be given 3 steps necessary to embed your app on a web site. Embed the scripts given to you on your site and test it out. If all goes well you should see your Silverlight app on your page but hosted through the Streaming service.

In the next post I’ll show how you can host assets only (particularly video) using this service. One would think you could just upload your assets and be given a reference to them but this is not the case and there’s a little more to it…

1. It gives you a way to have a preloader for an entire Silverlight application that would show up almost instantly upon loading the page.
2. It also has the potential of compresses XAML code into 1/3 the file size.

[view example] [download source]

So say you want to have a link or button on your page control some aspect of your Silverlight App, like load a new Video into a MediaElement, you could do something like this:

function loadVideo(wmv_file) {    

   var videoRef
   var controlRef
   controlRef=document.getElementById("SilverlightControl")
   videoRef=controlRef.content.findName("videoElement")
   videoRef.source=wmv_file 

}

and then in you could just call the loadVideo function within an onclick, onmousdown, or in the href like so:

a href="javascript:loadVideo('my_video.wmv')" mce_href="javascript:loadVideo('my_video.wmv')"

Foo.xaml
<Canvas xmlns="http://schemas.microsoft.com/client/2007"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
Width="100"
Height="100"
Background="CornflowerBlue"
>
</Canvas>


However, the Control interface doesn’t have an accessor for the Canvas. Looking at the control in the debugger, you find that the Canvas is buried down deep in the control in a non-public area.

So, how do you access the Canvas?
Well, there’s a simple 3-step process.


public class Foo : Control
{
// STEP1: Save the canvas locally
private Canvas _TheCanvas;


// STEP2: Add a public property so that clients can access
// the canvas easily.
//
// Control.Canvas
public Canvas Canvas
{
get { return _TheCanvas; }
}

    public Foo()
{
// STEP3: Save the canvas as the control is being created.
System.IO.Stream s = this.GetType().Assembly.GetManifestResourceStream("UserControls.Foo.xaml");
_TheCanvas = this.InitializeFromXaml(new System.IO.StreamReader(s).ReadToEnd()) as Canvas;
}
}

That’s it. Now you can access the canvas of your control at any time.

In Xmas Drop, you play the role of Milo. The only security elf on duty when the toy factory exploded. It’s up to you and Milo to save Christmas.

Help Milo catch presents using the arrow or A/D keys. When Milo catches three presents in a row, his elf magic puts them safely away. Use the Up/Down or W/S keys to cycle the stack and setup for a 3 in a row.

Play the game. Download the source. Check out our other demos.

New in this update:

• Improved graphics from our creative team
• Improved game pacing
• Improved sound and music
• Enemies come at you in different formations
• More enemies types to challenge you
• “Blossom of Death” for those desperate situations
• Global high score tracking

Things to do:

• Polish
• Polish
• Polish
• Tweak

We’ve learned a lot about Silverlight 1.1 while making this game. With the ability to cross-compile to WPF and XNA, we think that Silverlight can be a viable game platform for the web. Looking forward to the official 1.1 release.
If you’d like to help us out, please play the game and send us your feedback.