Silverlight Day 1

Posted Wednesday, February 20, 2008 7:16 PM by Kevin

So I finally set out to do something with Silverlight... I set a simple goal for myself tonight - I just wanted to see "Hello World".  That should be easy, right?

First, I downloaded the Silverlight 1.0 SDK from http://www.microsoft.com/silverlight and installed it.

Second, I created a new web site in Visual Studio.

Third, I grabbed a copy of Silverlight.js and added it to the web site.  For me, it was in C:\Program Files\Microsoft Silverlight 1.0 SDK\Tools\Silverlight.js.

I added a link to Silverlight.js in the HTML head of default.aspx.  Like this:

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

</script>

Next, I added a div in the HTML body of default.aspx and gave it an id.  It doesn't need the runat=server attribute, just an id (it will only be reference from Javascript).  Like this:

<div id="MySilverlightDiv">
</div>

Next, I created a XAML file.  I know next to nothing about XAML yet, so I just used Google to "borrow" someone else's example code for now.  My XAML file is called MySilverlight.xaml and looks like this:

<Canvas xmlns="http://schemas.microsoft.com/client/2007" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">

    <TextBlock FontSize="40" FontFamily="Arial" Canvas.Top="20" Canvas.Left="20">

        Hello World!

    </TextBlock>

</Canvas>

Last thing I did was add the javascript to my HTML file to actually create the Silverlight object in my div:

<script type="text/javascript">

    Silverlight.createObject(

        "MySilverlight.xaml",

        document.getElementById( "MySilverlightDiv"),

        "MySilverlightControl",

        { width:'400',

          height:'200',

          inplaceInstallPrompt:false,

          background:'#DDDDDD',

          isWindowless:'false',

          framerate:'24',

          version:'1.0' },

        { onError:null,

          onLoad:null },

        null );

</script>

That's the filename of my XAML file, the Id of my div, a unique Id for the Silverlight control itself, and some various parameters for Silverlight that I do not yet fully understand.

That's it.  I hit my web site with a browser and there was my awesome Hello World!

Hopefully tomorrow I will have time to research XAML some more and do something a bit more interesting with Silverlight.  I hope to extend this simple starter project and continue writing about it here, so if you're interested - copy/paste the code above and come back tomorrow! :)

Filed under: ,

Comments

# re: Silverlight Day 1

Wednesday, February 20, 2008 9:17 PM by CoryRobinson

Do you have a working page out there somewhere to live display this and future Silverlight work?