Today I am going to go over the essentials needed to get started with Silverlight 4 (Beta). 

First you will need to uninstall any previous versions of the Silverlight SDK and Tools.   Do this by uninstalling them from Control Panel.   A sample of what my control panel had is below.   I went ahead and removed all three items.

Next you will need either Visual Studio 2010 (Beta) or Visual Web Developer Express 2010 Beta .   Visual Studio 2010 Beta and Visual Web Developer Express 2010 both include the Silverlight 3 SDK and tools, but do not include the Silverlight 3 runtime (browser plugin for view Silverlight apps).   If you want to create Silverlight 3 projects, make sure you install the latest Silverlight 3 runtime by downloading it from http://go.microsoft.com/fwlink/?LinkId=146060.

In order to work with Silverlight 4 Beta you will need to download the Microsoft Silverlight 4 Tools for Visual Studio 2010 Beta 2. 

After you have installed the Silverlight 4 Tools open Visual Web Developer or Visual Studo 2010 and go to File -> New Project.   This will open the project dialog as shown below.   From the installed templates on the left choose Visual C# -> Silverlight and choose Silverlight Application.   In this example we are naming our project HelloSilverlight 

[more]

Once you click ok you will see the dialog shown below.   Check the “Host the Silverlight Application in a new Web site” box.   Select the “ASP.NET Web Application Project” and choose Silverlight 4 as the Silverlight 4 version.   Leave the “Enable .NET RIA Services checkbox” unchecked.   Click OK.

After clicking OK you should see a workspace that looks much like the image below without the annotations.

Your workspace will contain several areas you should become familiar with.   In the upper left corner you will see a ToolBox icon, clicking this will open the control toolbox.  In the center you have a design canvas that shows a preview of your application.   Below the design canvas is the XAML editor.   On the top right you have your solution explorer which show all the files in your project.   In the lower right you have your property editor that allows you to edit properties of controls you add to the design canvas.  Note that these panes can be docked and moved around so your screen layout might differ from what is shown.

In the top right of the XAML editor you will see three icons like the ones below. 

These may be used to split the Design canvas and XAML panes vertical or side by side instead.   The third icon collapses the pane to make either the Design surface or XAML pane fill the whole space.

To begin your first Silverlight Application open the control tool box and drag the TextBlock into the XAML editor after the  opening tag.  This should insert a tag.

Now update your XAML so that it looks like the following.

Now from the Debug menu select “Start Debugging” and your application will launch in a new browser window.  You should see an web page that looks like this:

Now we are finishied.  In this post we have walked through Installing Visual Studio Web Developer Express 2010, installing the Silverlight 4 Tools, and creating a simple Silverlight 4 application.