Summary

This QuickStart goes over installing the development tools needed to create a Silverlight application, building a basic Silverlight application, and adding a Silverlight application to a Web page.

Installing the Development Tools

Creating Silverlight applications can all be done with a very basic editor, such as notepad, but it's much easier, faster, and productive to use development tools specifically designed for creating Silverlight applications. The tools you'll need for this QuickStart are a version of Microsoft Visual Studio 2010 (the Microsoft Visual Web Developer 2010 Express version is free) and the Silverlight 4 Tools for Visual Studio 2010. Another tool you may find useful is Microsoft Expression Blend, which is a powerful WYSIWYG design tool, though we will not be using Blend in this QuickStart.

You can install the required tools using the Web Platform Installer link below, or you can install the tools individually from the links above.

Creating Your First Application

The first thing we need to do is start Visual Studio and create a new project. After you've started Visual Studio, choose the "New Project" menu option: File->New->Project

This will bring up the New Project dialog. In the Template list on the left, select Visual C# (Visual Basic is also available) and then Silverlight. Then select Silverlight Application as the project type. Now name your project HelloWorld and select OK.

The next dialog box that opens asks if you want to create a new Web Site or simply use a test page. For this sample, unselect "Host the Silverlight application in a new Web site". We will use the test page option. When developing Silverlight applications, there are some benefits in using the Web site option, but for this example the test page is sufficient.

That is all there is to creating a new Silverlight project. Next we will add some functionality to the application.

If you don't see the Solution Explorer (typically on the right side of the window) you can open it from View->Solution Explorer. In the Solution Explorer, there are a number of project files. The files we will be using in this QuickStart are MainPage.xaml and MainPage.xaml.cs. If you are unfamiliar with XAML, XAML is an XML based declarative language used to create and layout UI elements. See the XAML QuickStart for more information on XAML. The cs file is the C# code-behind file. Code-behind files are joined with a XAML file through a partial class. For more information on code-behind and partial classes, see the Code-Behind and Partial Classes MSDN article. Separating the UI from the code allows you to create visible user interface elements in the declarative XAML markup and then use a separate code-behind file to respond to events and manipulate the objects you declare in XAML. This seperation makes it easy for designers and developers to work together efficiently on the same projects.

Double click on MainPage.xaml. This will open the MainPage.xaml file in the main editor window.

We will add a simple TextBlock that displays the message "Hello, World!". Between the <Grid> tags, add a <TextBlock /> element. Now add a Text attribute to the TextBlock element and give it a value of "Hello, World!". Your final XAML should like the XAML in the screenshot below.

Running Your First Application

Now that you have created your first Silverlight application, you need to run it. You could add the application to an existing Web site, but while developing, an easier way to execute your application is by using the debug functionality of Visual Studio. To run a Silverlight application in Debug mode, either choose Debug->Start Debugging or hit F5. This will launch a test Web page that hosts your application. If there are errors compiling your application, Visual Studio will display error information.

To stop debugging, either close the browser window that opened or choose Debug->Stop Debugging.

The following example is our Silverlight application so far.

XAML

<Grid x:Name="LayoutRoot" Background="White">
   <TextBlock Text="Hello, World!" />
</Grid>

Add Graphics

Now let's add some graphics. In Silverlight you can add graphics by using Shape classes. You can create simple shapes such as Rectangles or more complex shapes such as Polygons. Brushes are used to color or paint objects in Silverlight. For more information on graphics and brushes, see the Graphics QuickStart and the Brushes QuickStart.

We will start by changing the Grid into a StackPanel. A StackPanel has less overhead than a Grid, so it will make our example more simple. A Panel is a container that is used to group and layout UI elements. Each application should have at least one Panel. A StackPanel lays out each element one after the other, either vertically or horizontally, depending on the Orientation. Grid and Canvas panels allow for more exact positioning of elements. For more information on layout in Silverlight, see the Layout QuickStart.

The shape we will create is an Ellipse. Specify the Height and Width of the Ellipse as well as the Fill, which specifies the Brush used to paint it. Hit F5 to run the application in debug mode.

The following example is our application so far. There is no user interaction yet, so it doesn't do much, but we will add some controls next.

XAML

<StackPanel x:Name="LayoutRoot" Background="White">
   <TextBlock Text="Hello, World!" HorizontalAlignment="Center" />
   <Ellipse Name="FirstEllipse" Height="100" Width="200" Fill="SlateBlue" />
</StackPanel>

Adding a Button

The next thing we will add to our example is a Control. Controls are one way users can interact with Silverlight applications. Silverlight has a rich control library which includes Buttons, TextBoxes, DataGrid, and many, many more. For more information on the different types of controls and how to use them, see the Controls QuickStart.

The control we will add is a Button. There are two parts to adding a Button. The first is to add a Button element to our XAML, like we did for the TextBlock and the Ellipse. The second thing we need to do is add some logic for handling events generated by user interaction, such as clicking the Button.

In the XAML, add a <Button /> tag below the <Ellipse /> tag. Add a Name attribute and give it a value of "FristButton", so we can access the button from code. Next, add a Content attribute to the Button and set the value to the string "Click". "Click" will be displayed on the button. Set the Width equal to 100.

Silverlight is an event driven application model. When certain things happen in your application, such as a user clicking on a Button or the application loads, an event is raised. You can add code, called event handlers, that do something when an event occurs. We will add an event handler for the Click event.

Visual Studio can create the event handlers for you. In XAML, put the cursor after the Content attribute value in the Button tag and press the spacebar. The Visual Studio IntelliSense will display a list of all the members for the Button class. Scroll down and choose Click. Visual Studio will add an attribute for the Click event and display a tool tip with <New Event Handler>. If you click the Tab key, Visual Studio will choose a name for your event handler and will create the basic code in the Mainpage.Xaml.cs file.

The final XAML should look like the following:

Now we need to add some code to the Click event handler. In the Solution Explorer, if the MainPage.xaml.cs file is not showing under MainPage.xaml, click on the triangle to the left of MainPage.xaml. Double click on MainPage.xaml.cs to open it.

You should see a private method called FirstButton_Click, which was auto-generated by Visual Studio when you added the Click event handler in XAML. If the method doesn't exist, simply copy the code below into your C# or VB file, but make sure the method name is the same as the name you specified for the Click event handler in your XAML.

When the Button is clicked, we will change the text that is displayed on the Button. Set the Content property of the Button to "Click Again!".

The following example is our application so far. If you click on the Button, the Button text is changed.

XAML

<StackPanel x:Name="LayoutRoot" Background="White">
   <TextBlock Text="Hello, World!" HorizontalAlignment="Center" />
   <Ellipse Name="FirstEllipse" Height="100" Width="200" Fill="SlateBlue" />
   <Button Name="FirstButton" Width="100" Content="Click" Click="FirstButton_Click" />
</StackPanel>

C#

private void FirstButton_Click(object sender, RoutedEventArgs e)
{
   FirstButton.Content = "Click Again!";
}

VB

Private Sub FirstButton_Click(ByVal sender As Object, ByVal e As RoutedEventArgs)
    FirstButton.Content = "Click Again!"
End Sub

Add Animation

The final thing we will add to our application is some animation. We will create a very simple animation that squeezes the ellipse and then expands it back out, but you can do much more with animations. For more information on Animations in Silverlight, see the Animation QuickStart.

To create an animation you need to do three things: create a StoryBoard, create the animation, and then add code to start the animation.

A StoryBoard is a container used to group animations. From the StoryBoard, the animations can be started and stopped. In the XAML, create a StackPanel.Resource section and within this create a <StoryBoard> element. Give the StoryBoard the Name "FirstStoryBoard" so that we can access it in code. That is it for the StoryBoard.

Animations in Silverlight work by changing the value of a property over a span of time. Our animation will animate the Width property of the Ellipse, which is a Double, so we will use a DoubleAnimation. The StoryBoard.TargetName attached property specifics the object that the animation will be applied to, in our case it is "FirstEllipse". Storyboard.TargetProperty specifies the property on the Ellipse that will be animated, in our case it is "Width". The To property specifies the value to animate to. Set this to 1, so that the Width will shrink from its current value of 200 down to 1. The AutoReverse property specifies if the animation should repeat, when it is finished, backwards to its start position. Set this property to True. The Duration property specifies how long the animation will take. Set the Duration to "00:00:01", which is one second (zero hours:zero minutes:one second).

Now we need to start the animation. In the Click event handler, add a call to the Begin method on the StoryBoard.

The following example is our final application.

XAML

<StackPanel x:Name="LayoutRoot" Background="White">
   <StackPanel.Resources>
      <Storyboard x:Name="FirstStoryBoard">
         <DoubleAnimation Storyboard.TargetName="FirstEllipse"
                          Storyboard.TargetProperty="Width"
                          To="1" AutoReverse="True"
                          Duration="00:00:01" />
      </Storyboard>
   </StackPanel.Resources>

   <TextBlock Text="Hello, World!" HorizontalAlignment="Center" />
   <Ellipse Name="FirstEllipse" Height="100" Width="200" Fill="SlateBlue" />
   <Button Name="FirstButton" Width="100" Content="Click" Click="FirstButton_Click" />
</StackPanel>

C#

private void FirstButton_Click(object sender, RoutedEventArgs e)
{
   FirstButton.Content = "Click Again!";

   FirstStoryBoard.Begin();
}

VB

Private Sub FirstButton_Click(ByVal sender As Object, ByVal e As RoutedEventArgs)
    FirstButton.Content = "Click Again!"
    FirstStoryBoard.Begin
End Sub

Adding the Application to a Web Page

When you deploy your Silverlight application you can either make your application the full Web page or you can add your application as an isolated piece to a Web page. For example, your Silverlight application might be a streaming video player that integrates into a larger Web site. Most Silverlight applications you encounter are probably part of a larger Web page, but there are a number of Web sites which are one large Silverlight application.

To add a Silverlight application to a Web site, use the HTML object element to embed the Silverlight plug-in into the html page. You can use the object element to integrate Silverlight with JavaScript code in your Web page. However, JavaScript is not required to embed the control. This is useful if JavaScript is disabled on the client or prohibited on the server.

The object tag contains the information needed to load the Silverlight plug-in. The Source param is the name of the Silverlight application. Silverlight applications are packaged as .xap files. You can specify a number of other properties on the plug-in such the width, the height, and if the Silverlight application should be displayed in full-screen. For more information on the different plug-in properties, see the Silverlight Plug-in Object Reference MSDN article.

The following example shows the test html page that Visual Studio generates when you run an application in debug mode. For more information, see the Integrating Silverlight with a Web Page MSDN article.

HTML

<body>
   <form id="form1" runat="server" style="height:100%">
     <div id="silverlightControlHost">
       <object data="data:application/x-silverlight-2," 
               type="application/x-silverlight-2" 
               width="100%" height="100%">
          <param name="source" value="HelloWorld.xap"/>
          <param name="onError" value="onSilverlightError" />
          <param name="background" value="white" />
          <param name="minRuntimeVersion" value="4.0.50401.0" />
          <param name="autoUpgrade" value="true" />
          <a href="http://go.microsoft.com/fwlink/?LinkID=149156&v=4.0.50401.0" 
                   style="text-decoration:none">
          <img src="http://go.microsoft.com/fwlink/?LinkId=161376" 
                   alt="Get Microsoft Silverlight" style="border-style:none"/>
          </a>
       </object>
       <iframe id="_sl_historyFrame"
               style="visibility:hidden;height:0px;width:0px;border:0px">
       </iframe>
     </div>
   </form>
</body>

Silverlight applications can access the HTML Document Object Model (DOM) using a technology called HTML Bridge. HTML Bridge enables Silverlight applications to access the DOM and call managed code from JavaScript. For more information on HTML Bridge and how to setup the Silverlight plug-in, see the HTML Bridge QuickStart.

When deploying your Silverlight application, the only Web server requirement is to associate the .xap file name extension with the MIME type "application/x-silverlight-app". (For IIS 7.0, this value is pre-configured.) See the Deployment and Localization MSDN article for more information.

What's Next

Now that you have been introduced to your first Silverlight application, let's delve deeper into XAML, the declarative markup language used to create your Silverlight application user interface: XAML QuickStart.