Create a simple Silverlight Application

Introduction

In this article I will show you how to create a simple silverlight application that shows a text, when the user clicks on a button. The result will look like this:



1. Ensure that you have the Tools installed

To get this sample running on your machine, you need Visual Studio 2008 and the Silverlight 3.0 Tools installed. You can get a detailed installation manual here.

2. Create a new Silverlight Project

Start Visual Studio 2008 and create a new "Silverlight Application Project" by choosing "File" -> "New" -> "Project...". Choose the destination path and give your project a meaningful name, then hit OK to create the project.

Silverlight solutions always consist of two projects. One that is the silverlight application itself - and one, that embeds it in a web page. Visual Studio asks you, if you want to embed your silverlight application in a simple HTML page, or in a full ASP.NET web application. For this example we choose "ASP.NET Web Application Project".

If we look at the files that Visual Studio created, we see the two projects "HelloSilverlightDemo" which is our silverlight application, and "HelloSilverlightDemo.Web" which is an ASP.NET web application that embeds our silverlight app into a webpage.

When we compile our solution, VisualStudio packs all XAML and DLLs into a deployment package that is called "HalloSilverlight.XAP. Its actually just a ZIP file that has been renamed. If you want to deploy your Silverlight to a web server, this file contains all information to make it run.

3. Place the controls

Unfortunately Visual Studio 2008 does not include a visual designer for Silverlight. If you want to use a visual designer, you can use Expression Blend to design your project. In our simple case we write directly the XAML code. Open the "MainPage.xaml" file and past the following code snipped to it:

<UserControl
 xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
 xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
 x:Class="HelloSilverlightDemo.MainPage"
 Width="400" Height="100"gt;

<Grid Background="#FFECEDF0">
    <Button Margin="144,56,152,20" Content="Say Hello..." 
                Click="Button_Click" />
    <TextBlock x:Name="textBlock" Margin="80,16,88,60" 
                   FontSize="16" FontWeight="Bold" />
</Grid>
</UserControl>

The XAML code looks a bit like HTML. We use a Grid layout panel to align a Button and a TextBlock control on the surface. We define a margin, that defines the position of the elements. The Click="Button_Click" registers a callback function, that is called, when the button gets clicked.


4. Wire-up the interaction logic

Every UserControl in Silverlight consists of a view that defines the appearance and a code-behind file that defines the interaction logic. The view is defined in XAML and the code-behind is written in C# or VB.NET.

In the code-behind we have to define the callback-function "Button_Click", that is called when the button gets clicked. In this function, we set the text of the textBlock to "Hello Silverlight".

public partial class MainPage : UserControl
{
  public MainPage()
  {
      InitializeComponent();
  }

  private void Button_Click(object sender, RoutedEventArgs e)
  {
      textBlock.Text = "Hello Silverlight!";
  }
}


5. Test your application in the Browser

Now, we have done all our work, and we are curious, to see if it works. To test your application just hit [F5] and wait until Visual Studio has compiled all sources. A browser window will open automatically and load a webpage including your Silverlight app. To do this trick, VisualStudio brings up a small development web server. You can see its icon in the system tray. Now you can debug and test your application.