Getting started with Silverlight: Part 1 - The tools and Hello World

This is a first part in a series of getting started posts for Silverlight developers. 

In our series in getting started, we’ll eventually build out an application that searches Twitter for monitoring keywords and automatically refreshes at a specified interval.  Before we start getting too deep, let’s make sure you have the tools necessary to get started and understand the fundamentals of the developer experience for Silverlight.

The Tools

Of course, with any development all you need is a text editor and a compiler, but you’d be crazy these days not to use world-class tools.  That being said, what I will propose here are a set of tools to make your complete development experience with Silverlight simpler and faster.  Not all are required (again, you just need notepad and a compiler if you are hard core :-)).  Not all are free either.  But I highly recommend them not just because I work at Microsoft, but I truly believe they are the best tools for the job.

Visual Studio 2008

You’ll want to make sure you have Visual Studio 2008 in your first bag of tricks.  You will need Service Pack 1 for VS installed to get the Silverlight tools, so make sure you have that.  Any version of Visual Studio 2008 SP1 will work with the tools.  If you do not have a copy of Visual Studio 2008, you can use one of the free express versions, Visual Web Developer Express 2008 to do Silverlight development.  If you plan on doing database development as well, you can get SQL Server 2008 Express as well for no cost.

Silverlight Tools for Visual Studio

The Silverlight Tools for Visual Studio is an additional download that installs the SDK, developer runtime (for debugging) and a set of tools for Visual Studio (project templates, build targets, etc.).  This one package installed on top of VS will get you everything you need for your VS development environment for Silverlight.

For both of these, Visual Studio and Silverlight Tools, you can download them separately.  If you already have VS, just download and install the Silverlight Tools and you will be up and running.  If you don’t have VS, consider using the Web Platform Installer which will install Visual Studio, SQL Server Express and the Silverlight Tools for you – without you having to hunt around for the installers.  You can get the Web Platform Installer here:

If you already have Visual Studio installed, you can still install the Silverlight Tools using WebPI or you can download them directly here.

Expression Blend

Expression Blend is an interactive developer tool.  It is a visual designer for XAML, the underlying presentation technology for Silverlight and Windows Presentation Foundation (WPF) applications.  It has a great design surface and allows for easy manipulation of layout, animations, styling and templating.  I believe this to be an essential tool in XAML development.  This tool, however, is not available at zero cost.  If you have an MSDN Subscription it is included in some levels.  It can also be purchased as a part of Expression Studio.  You can download an evaluation copy of Expression Blend 3 here to get started.  We will use Blend for layout in the next step.

Silverlight Toolkit

The Silverlight Toolkit is a set of additional controls that are available outside of the core control set.  These include charting controls, date/time controls, accordions and much more.  Best of all, the source code for these controls (as well as all the core controls) are included for you to learn from and extend!

The toolkit is available for download from CodePlex and we will be using some controls from it in this series.

There are other control suites and tools you can use like .NET RIA Services which we will discuss in step 3, but I think the above are my recommended minimum tools you should have for Silverlight development.  Install them all before proceeding in this tutorial in step 2.

Understanding the development environment

Once you install Visual Studio and the Silverlight Tools you will notice a new grouping in the VS New Project dialog box:

You will see some new templates under the category Silverlight which include at least Silverlight Application, Silverlight Class Library and Silverlight Navigation Application.  Some others you may see depending on additional tools you may have installed.

For this step, choose the Silverlight Navigation Application template and give it a name for the application (I’m calling mine TwitterSearchMonitor).

The next window you will see will ask you if you would like to create a web project:

If this is a new project, I highly recommend choosing to create a web project for you.  By doing this you will have a web context to run the application for you.  This is helpful in avoiding issues around accessing web services from the local file system.  Running your application under HTTP from the start will help you avoid some of the most common mistakes in debugging web service access.  You can choose the ASP.NET Web Application Project, ASP.NET Web Site or ASP.NET MVC Project if you have that installed.  If you aren’t sure, just use the defaults.

The Project Structure

Once your app is created you will see something similar like this:

This shows your web application (which will host the Silverlight application) with pre-created test pages for the Silverlight application and the Silverlight application itself.  Let’s focus first on the Silverlight application project.

There are some key files you should be aware of here that we’ll explore in this series:

• App.xaml – this is an application-wide resource file.  If you put resources in here (we’ll explore in styling) or global events upon startup, they will happen here.  This file is also the entry point to your application and tells the Silverlight plugin what to do next.
• MainPage.xaml – this is a page that is a part of the template you chose.  It doesn’t have to be called MainPage, but that is what the project template uses by default.  This represents the starting user interface for your application.  Don’t be confused by details just yet.
• Assets/Views folders – these contain assets (files, images, styles, etc.) and other UI views for your application.

The XAML files are the files that make up the UI of your application.  They are just XML files with the XAML markup language.  We will be altering these in later steps.

When you build the solution (go ahead and do that) you’ll notice in the web application’s ClientBin folder a new file with a XAP extension will show up.  This is your compiled Silverlight application.  It’s actually an archive (aka ZIP) file with a different extension file name.  If you rename it to .ZIP and open it using an archive tool you can see the contents.

The XAP file is what is served to your browser.  This is the file that is hosted on the web server and gets delivered to the end user.  The XAP is hosted within a standard HTML page that hosts the Silverlight application using the <object> tag instantiation. 

NOTE: Silverlight is a client technology and can be hosted on any web server.  It can be any type of web server that is capable of delivering the XAP file along with the correct content MIME type from the server (application/x-silverlight-app).  As long as it does that, we don’t care what type of web server it is delivering the XAP file.

Test pages for ASP.NET and HTML are created for you with the standard template.  Since both of them are the same essentially, I usually delete one of them for simplicity.

Adding UI to the XAML pages

The template we chose is a navigation application template, meaning it has some navigation features built into it.  This is a fairly new feature to Silverlight and enables you to have a “master page” kind of view in your application.  If you look in the Views folder you will see About.xaml, ErrorWindow.xaml and Home.xaml.  For now let’s focus on Home.xaml since that is the first view that is loaded.  Open that file up by double-clicking it and you’ll see the XAML load in Visual Studio.

In this page you’ll see some XAML code that defines the view in a Grid that uses some other layout controls like a StackPanel and TextBlocks (we’ll go into StackPanel in the next step 2).  These are all part of the core control set that Silverlight provides.  A TextBlock enables you to present text to the user.  If you run the application now (hit F5 to run in debug mode – go ahead and choose to modify the web.config to enable debugging) you should see something like this:

Notice the text in the running application matches the text in the TextBlock of the XAML.  Also notice the link style buttons in the upper right.  These represent our navigation points which go to our separate views.  Let’s add some more XAML and see how to write code.

In the Home.xaml view, after the second TextBlock, add a Button using this XAML:

   1: <Button Content="Click me" x:Name="MyButton" FontSize="18" Width="150" Height="45" />

This will display a button on the view just underneath the “Home page content” text area.  Notice the x:Name attribute?  This is the unique identifier for this element and helps us reference it in code.  Think of this as the ID attribute of the control.  Now let’s make it do something when clicked.  There are two ways we can add events to the Button (or other elements) with simplicity.  In the XAML for Button itself we can add a Click attribute and you will see VS Intellisense automatically ask us if we want to generate a new event handler:

We can also wire up the event handler in code directly and keep it out of our XAML using this code in the Home.xaml.cs page:

   1: public Home()

   2: {

   3:     InitializeComponent();

   4:     MyButton.Click += new RoutedEventHandler(MyButton_Click);

   5: }

Either way will work.  For simplicity for now you can use whatever you like…I will use the XAML method for now.  Now in the function MyButton_Click we can write managed code in the function to manipulate our user interface or other functions.  Let’s finish our Hello World sample by changing the HeaderText TextBlock (HeaderText is the x:Name value so we can reference it easily in code) to “Hello World” output.  To do that we’ll write this function code:

   1: void MyButton_Click(object sender, RoutedEventArgs e)

   2: {

   3:     HeaderText.Text = "Hello World!";

   4: }

After making these changes and running the application again (F5) we will see our button and when clicked it will change the text like below:

Next Steps

We’ve created our first Hello World Silverlight application.  We’ve got more to do to complete our Twitter search application.  Let’s move to step 2 to change some of our layout of our views for our application.  For more information on getting started check out the other resources here:

• Silverlight Community Site – Getting Started resources
• Getting Started video (walks through some of this above)

We won’t provide the code download here because this was just to get us started.  Future steps we’ll include a link to the finished project always.  Hope this helps…let’s move on to part 2!