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! :)