The Moth

As someone pointed out to me, I jumped straight into this "Silverlight thing" without doing a "Hello World post". Part of the reason for that is that this is covered in many online places already, but anyway, here goes my take...

Holding Your Hand for Clicking in the Right Places
After you install the bits we released at MIX (the only must is the SL tools for VS2008), go "File->New Project" and select the Silvelight tab (screenshot). You have two options: creating an Application or a Library (a dll you can reference form other SL apps). Select an Application, type your project name (e.g. HelloWorld) and (tip: I also like checking the "Create directory for solution" checkbox) click OK and you'll be confronted with a new dialog (screenshot). Of the 3 options only the 2 top ones are enabled for this scenario and I'll say off the bat that the 2nd option is fairly useless, so let's stick with the first option which is more interesting and powerful. What this option suggests is that it will create 2 projects for you: the Silverlight application project (the results of which run client side in the browser) but also a vanilla web project (that will run server side) to host your Silverlight app. Unlike most people I prefer "Web Application Project" to "Web Site" so change the "Project Type" combobox and click OK. Your solution now has two projects: HelloWorld and HelloWorld_Web (screenshot). Build it now (Ctrl+Shift+B) and notice the addition of a ClientBin folder in your HelloWorld_Web tree.

The Web Project
Delete the Default.aspx, file it is useless. We are left with two files (HelloWorldTestPage.aspx and HelloWorldTestPage.html) of which we will use only one at any given time (switch between them by right clicking and "Set As Start Page"). Both serve the same purpose which is to host the Silverlight plugin in which our SL application will be loaded in (think of them as test harnesses at this stage). Do a "View Code" on each from the right click menu (or click on the two links above) and take your time to look inside. I do not intend to go through the markup (please follow all links in this paragraph for more). Both files accomplish the same thing. One using the object tag with application/x-silverlight and the other using the asp:Silverlight tag, they point the Source of those to ClientBin/HelloWorld.xap. That is how the plugin knows where to look for the Silverlight application. So, you can correctly infer from this that your Silverlight project compiles to a XAP file and the build process then copies that to the web project's ClientBin folder. For now, please hold the question "What is this XAP thing?".

Before we move on to examine the Silverlight project, right click on the solution node and select "Add->New Project" and again choose "Silverlight Application" and click OK (screenshot). Notice how now the 3rd option is enabled? This is how you could add a Silverlight project to existing solution (instead of starting from scratch like we did) - Cancel the dialog. Another way to add a Silverlight project to an existing Web Project is by right clicking on the HelloWorld_Web project treeview node and select "Add Silverlight Link" and using that dialog. Now that we are comfortable with the web site aspect of things, let's look at the Silverlight project.

The Silverlight Project
Expand the References node in the Silverlight project. Most of the names of those assemblies will be familiar to you but bear in mind that these are the Silverlight variants/versions that will generally be a subset of what you are familiar with in the full .NET Framework.

Right click on the App.xaml node and select "View Code" which will bring up App.xaml.cs. Two of the self-explanatory event handlers in there are for you to use as you see fit (Exit and UnhandledException) and the most important one has been pre-populated for you: Startup - this is the entry point to the Silverlight app. You could handle here parameters passed from the markup (e.InitParams). By default it sets the Application.RootVisual to point to the other class in this project: Page (Page.xaml + Page.cs).

Right click on the Page.xaml node and select Open or just double click on it (screenshot). If you have done any WPF development this will be familiar in the sense that it is all about the eXtensible Application Markup Language (XAML).

Both WPF and Silverlight use the same declarative, tool-friendly XAML-based UI development. The rough idea is that you drag and drop controls on the design surface at the top, set the properties of the controls via the properties window and potentially make some tweaks to the XAML that gets generated in the pane at the bottom. You can then hand this to a designer that will use another tool (currently Expression Blend 2.5) to really jazz it up, add their bling and then hand it back to you whilst the code behind in the Page.xaml.cs that you wrote (that contains the real business logic) remains intact. The reality at this stage of the Beta 1 is that the designer is read-only and the properties window doesn't work and Blend 2.5 also has some more work to be done to it. What this means is that currently in Beta 1, as a developer, you have to manually type all of the XAML for the GUI layout of your Silverlight application.

Within the existing Grid tag, type:
<TextBlock Text="Hello Silverlight World"/>

Build the solution. Using Windows Explorer navigate to the ClientBin (or just use Open Folder in Windows Explorer) and find the HelloWorld.xap file. Not to repeat myself here, please visit this post, read the first paragraph and then jump to point 4 and 5 and then come back here, we'll be waiting.

Run (F5)
Run the project (obviously the start up project for the solution is the Web project) and notice your browser coming up showing what you would expect. What has happened here is that the html or aspx page instantiated the SL plug-in, which then instantiated the Silverlight CLR, created an AppDomain and then downloaded the XAP file, opened it up and found the entry point at which stage it passes control over to your code.

When you right click anywhere on the page, you see the Silverlight menu option which just shows the "About" dialog with versioning info. You can tweak the size of the Silverlight plug-in in the host page (html or aspx) so it does not occupy the entire page. This is a way of creating an "island of richness" on an existing web page. I leave that as an exercise for home ;-).

For Further Info
- Truly Excellent Section on MSDN(read all of it following all the links)