Getting Started with Silverlight 2

Source code for this tutorial: http://silverlightrocks.com/cs/files/folders/silverlight_2_tutorials_source_code/entry314.aspx

Ok so now if you have set up your environment by installing everything listed in the last post, we should be ready to create a Silverlight Project.

In Visual Studio 2008, create a new C# project of type "Silverlight Application". Call it "SpaceRocks". This project will be the basis for the first set of tutorials we'll go through.

Click OK, and you'll be prompted for what type of host you want.

If you're looking to host your Silverlight control in an ASP.NET web form or user control, select the first option. This will generate a test page with the markup you'll need to get your control working in your web site. For this sample, let's keep it simple and select the second option. The reason for a separate project if doing ASP.NET is that Silverlight has its own copies of some of the same assemblies that the web site needs, and since references are specified at the project level, there would be conflicts if it was all in one project.

Go ahead and compile and run your project. If all goes well, one of two things will happen.

Outcome 1: You will get prompted with a "Get Silverlight" control. Go ahead and install Silverlight 2 by clicking on the control.

Outcome 2: You'll get a blank page.

Ok so by now you should be seeing a blank page. Why a blank page? Well the default background color for a new Silverlight project is White. If you look at your Page.xaml file, it will look like this:

   1: <UserControl x:Class="SpaceRocks.Page"   2:     xmlns="http://schemas.microsoft.com/client/2007"    3:     xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"    4:     Width="640" Height="480">   5:     <Grid x:Name="LayoutRoot" Background="Black">   6:     7:     </Grid>   8: </UserControl>

XAML files are used for forms layout, similar to HTML for a web page. Typically in Silverlight you will lay out your page and controls using XAML and then use code behind to handle the events, kick off animations, etc. Visual Studio 2008 currently has read only designer support for Silverlight controls and pages, but if you right click on the file in Solution Explorer, there is an "Open in Expression Blend..." option. Expression Blend is a tool which allows you to lay out XAML based controls, add animations, and more.

Back to Visual Studio...change the Background attribute to "Black", change the Width to 640, and the Height to 480. Run it again. Now you should have a black box 640x480 inside the browser.