Your First Silverlight Application

Learn how to write your first Silverlight application. Where to get the tools, and what settings to use during development. Only 4 lines of real code stand between you and having a Silverlight application running. Join me as I begin a series with this introductory article.

Development Tools
If my screenshots look different from yours, it's because I'm using Visual Studio 2010. Hopefully I'm not going to be doing anything that couldn't be done in Visual Studio Express. If I do, please let me know and I'll take a look at it.

You can download the express versions of the tools from Microsoft/Express for free.

Getting Silverlight
First off, if you don't have the developer tools, go to Silverlight.net, take the "Getting Started" menu, and then item number (1) is "Install the developer tools". [if you're reading this prior to April 13, 2010, you maybe want to wait until then because the bits are going to change]

Please feel free to download anything else on there that strikes your fancy or spend a couple days (months?) watching training videos :) Eventually come back here please, or else my purpose for writing this will be lost!

First Project/First app
For this first project and application, we're going to build a very simple obligatory variation on "Hello World", so begin by Selecting File->New Project. Then choose Silverlight Application, and I chose C# as my language of choice. I accepted the defaults, but feel free to give your project a custom name:

I've marked the Selection of the "Silverlight" template on the left side under Visual C#. You may certainly elect to use a different language, and the template selection will be similar.

On the right-hand side, I've marked the selection of "Silverlight Application". The other Type of Silverlight applications that are there we'll hopefully get into as time goes on, but for now select that one.

This will pre-fill the Name, Location, and Solution Name at the bottom. I just took the defaults, but this is where you would give your application a real name.

Before going on, notice the dropdown box at the very top that contains the selection ".NET Framework 4". This is your target framework, and you may need to change that depending upon your audience.

MainPage.xaml
When you press OK on the "New Project" dialog, you're presented with a 'blank slate' on which you can place your Silverlight controls. If you take a look at the xaml produced, the page isn't really blank, but the visual effect is. This is MainPage.xaml and is the default page in which to build your application. I'm purposefully not going to talk about layout controls yet. Let's just build something... isn't that what we always do :) ... and I'm also only going to touch lightly on all the files that get built when you crank up a new Silverlight Project with the defaults. Let's just bask in the wonderfulness of building an app before we get buried in details.

Get your toolbox open (View->Toolbox if it's not showing), and drag a label control over to the display surface somewhere near the upper left. Placement isn't that important right now. With the label selected in the design surface, if you open the Properties Window (View->Properties Window), you will see something similar to this screenshot:




From the Properties window I'm changing the 'Label' to be "lblHello". In the screenshot, 'Content' is highlighted, and I changed mine to be "Hello". Since it is, after all, a label, the Content can't be blank, and "Label" looks a little weird on the page!

Next drag a TextBox and Button over to your design surface and place them someplace pleasing to your eye. I put them all one below the other. I also used the same techniques described above to give my TextBox and Button names, and changed the 'Content' of the Button to be "Press Me".

This might be a good time to press F5 to run this and make sure nothing weird is going on. Assuming you have no errors, it should run, and display the three controls you placed on the design surface.

Congratulations... you've built your first Silverlight application! -- but wait, there's more...

Going back to Visual Studio, double-click the button, and Visual Studio will open up the codebehind for MainPage.xaml: MainPage.xaml.cs

You now should be seeing a blank button handler only different from mine by the name you gave your button:

        private void btnPressMe_Click(object sender, RoutedEventArgs e)
        {

        }

For the button press, We're going to take the text from the TextBox, jam the word "Hello" onto the front of it and display it in the label. My code for the body of that method looks like this:

            StringBuilder sb = new StringBuilder();
            sb.Append("Hello ");
            sb.Append(tbName.Text);
            lblHello.Content = sb.ToString(); 

To keep from StringBuilder giving you a compile error, add a 'using' for System.Text to the using section of your .cs file:

using System.Text; 

Alternatively, you can right-click StringBuilder; select 'Resolve' from the popup menu, then select 'using System.Text;' and Visual Studio will insert that for you.

If you run this up now, type something in the TextBox, and press the button you hopefully will see something like this:




Notice the text is pretty small, the layout is probably not using any sort of alignment, and it's using default colors, but the important part is that we've begun with File->New Project, and built an entire Silverlight application. It's just all uphill from here, so check back for the next blogpost in this series.

Examining the files
Before leaving, since this is a first app, we should at least mention all those files that got built when we ran File->New Project. Taking a cursory look at the Solution Explorer Window we find:




So what's with the 2 projects? The upper one, in my screenshot, "SilverlightApplication11", is the actually Silverlight app. The lower one is the Web application that the app is launched from.

You can see MainPage.xaml in the Silverlight application project, and if you expand that you'll find the code behind file as well. Looking under 'ClientBin' in the Web application you'll see "SilverlightApplication11.xap'. This is the end result of having built our application. A xap file is nothing more than a zip file. If we rename this file to be SilverlightApplication11.zip and open it, we find:

The AppManifest.xaml is a list of what is needed to run our app. SilverlightApplication11.dll is our compiled app, and the other two dlls are support dlls as listed in the manifest. As our programs get larger, this xap file is going to get larger as well, and yes at some point we're going to have to deal with that, but for now 52K is probably ok the way it is :)

Other things to notice in the Solution Explorer window are the TestPage.aspx and TestPage.html. These are two very minimal pages that get built to support the Silverlight app. If you want to take your Silverlight app to another site such as a blog and expose it as an island of Silverlight, simply examine how these two pages are working. There's a bunch of error checking code in each of them taking up space and making it look worse than it is. The bulk of the necessary code is getting silverlight.js recognized and setting up the appropriate block to host the control.

Unless someone has trouble with hosting their application, I'm not going to take the time to discuss that. It's more of a plumbing effort than a Silverlight effort :)

Note to readers
As we move forward, if there's something in particular that you'd like to see, or are having problems with, please write and I will address those. Also watch for my first post later this week on Windows Phone 7 Series (and yes... they dropped the word "Series").

Stay in the 'Light!