How To: Create a Web Application Using Silverlight 2.0

J.D. Meier, Alex Homer, David Hill, Jason Taylor, Prashant Bansode, Lonnie Wall, Rob Boucher Jr, Akshay Bogawat.

Applies To

  • ASP.NET 3.5
  • Visual Studio 2008
  • Silverlight Tools for Visual Studio 2008 SP1

Summary

This How To article shows you how to create an interactive interface for a Web application using Microsoft Silverlight 2.0. It shows you how to create a Silverlight project and define the user interface for a UserControl that Silverlight will display in the user’s Web browser. The How To then shows how you can connect events raised as the user interacts to the controls in the page to event handlers that you create. You can then manipulate the controls on the page from your code.

Contents

  • Objectives
  • Overview
  • Before you Begin
  • Summary of Steps
  • Step 1 - Create a Solution for a Silverlight-Based Application using Visual Studio
  • Step 2 - Add Controls to a Silverlight Application
  • Step 3 - Connect a Silverlight Control to a New Event Handler
  • Step 4 - Write a Handler for a Silverlight Control
  • Additional Resources

Objectives

  • Learn how to create a Silverlight Web application solution.
  • Learn how to add controls to a Silverlight Web application.
  • Learn how to specify events for Silverlight controls that you can handle in your code.
  • Learn how to write event handlers that interact with Silverlight controls.

Overview

Use Visual Studio 2008 to create a Silverlight Web project containing HTML test pages that host the Silverlight plug-in, and a Silverlight UserControl that implements the user interface controls. Add controls to the Silverlight UserControl to implement the interface. Define the event handler for one of the controls, and then write the code in the event handler that interacts with the Silverlight control.

Before you Begin

Download and install Silverlight Tools for Visual Studio 2008from the Microsoft Download Web site at http://www.microsoft.com/downloads/. This installs the features and templates required for creating Silverlight applications into Visual Studio.

Summary of Steps

  • Step 1 - Create a Solution for a Silverlight-Based Application using Visual Studio
  • Step 2 - Add Controls to a Silverlight Application
  • Step 3 - Connect a Silverlight Control to a New Event Handler
  • Step 4 - Write a Handler for a Silverlight Control

Step 1 – Create a Solution for a Silverlight-Based Application using Visual Studio 2008

This step shows you how to create a new solution for a Silverlight Web browser-hosted application.
  1. Open the File menu, point to New, and then click Project….
  2. In the list of project types in the New Project dialog box, expand the language of your choice and select Silverlight. In the Templates list, select Silverlight Application.
  3. Type a name for the new project in the Name text box, select a location, and then click OK.
  4. In the Add Silverlight Application dialog box, select “Add a new Web site to the solution for hosting the control” and then click OK.

This creates a solution containing two projects. The first contains an empty Default.aspx page, and two Silverlight test pages. The ASPX test page contains a Silverlight control that hosts your Silverlight-based application in the browser. The HTML test page also contains a Silverlight section, and can display any Silverlight errors.

The second project is a Silverlight project containing a single XAML page named Page.xaml that implements a UserControl that a Silverlight-capable Web browser can display. This project also contains the ‘application’ files that define the base Silverlight application, and which can be used to create global event handlers. These files are App.xaml and App.xaml.cs or App.xaml.vb.

If the browser does not have Silverlight installed, it prompts the user to download the Silverlight plug-in, which downloads and runs your Silverlight-based application. When you run your application within Visual Studio, the test page opens in your Web browser.

Step 2 – Add Controls to a Silverlight Application

This step shows you how to add controls to a Silverlight user control and modify their properties by editing their element attributes.
  1. In Solution Explorer, open Page.xaml for editing.
  2. If the root UserControl element shown in the XAML editor pane contains the Height and Width attributes, delete them.
  3. Drag a StackPanel element from the Silverlight XAML Controls section of the Toolbar and drop it onto the XAML definition window inside the root UserControl element declaration. Notice how you can drag and drop controls onto the XAML editor as well as the more usual technique of dropping them onto the user control in design view.
  4. Place the insertion point at the end of the word StackPanel in the opening tag in the XAML editor window and type a space and then type x:Name=”LayoutRoot”. IntelliSense helps you to add this attribute.
  5. Type another space and add the attribute Background="OldLace" to the opening StackPanel element. You will see the design view of the user control change to reflect the updated definition.
  6. Copy the following declaration of a Canvas element and its child TextBlock element and paste it into the XAML editor as a child element, between the opening and closing tags of the StackPanel element.
<Canvas x:Name="Canvas1" Background="DarkKhaki" Width="100" Height="30">
  <TextBlock>Canvas1</TextBlock>
</Canvas>

You have seen in this step how to use Visual Studio to add controls to a Silverlight user control by dragging them from the toolbar. You can also type complete elements, add attributes, and modify existing attributes and values in the XAML text editor pane. The top pane of the designer shows what the control will look liked when displayed in a Web browser.

Step 3 – Connect a Silverlight Control to a New Event Handler

This step shows you how to connect a Silverlight control to an event handler that you will write in the next step.
  1. Open Page.xaml in the editor and place the insertion point immediately before the “>” of the opening Canvas element, after the double-quotes of the last attribute of the element.
  2. Type one space and start to type MouseLeftButtonDown. As the IntelliSense list displays the options, select MouseLeftButtonDown. The editor inserts the attribute MouseLeftButtonDown="" and displays another list containing <New Event Handler>.
  3. Press the TAB key to select this item. The editor inserts the name of the event handler Canvas1_MouseLeftButtonDown. The XAML code will look like the following:
<Canvas x:Name="Canvas1" Background="DarkKhaki" Width="100" Height="30"
                MouseLeftButtonDown="Canvas1_MouseLeftButtonDown">
  <TextBlock>Canvas1</TextBlock>
</Canvas>

Silverlight makes it easy to add event handlers to controls. However, notice that the process differs from editing environments such as Windows Forms and ASP.NET, where you can double-click on a control to create an event handler. In Silverlight, you must follow the steps above instead.

Step 4 – Write a Handler for a Silverlight Control

This step shows you how to write the code in an event handler for a Silverlight control in the Visual Studio code editor.
  1. Open the file Page.xaml.cs or Page.xaml.vb (depending on your choice of language) in the editor.
  2. The previous step of this How To created an outline event handler named Canvas1_MouseLeftButtonDown. Find this event handler and insert the following code into it so that the complete event handler looks like the following
C#
private void Canvas1_MouseLeftButtonDown(object sender, MouseButtonEventArgs e)
{
    Canvas c = sender as Canvas;
    SolidColorBrush newColor = new SolidColorBrush(Color.FromArgb(255, 200, 77, 0));
    c.Background = newColor;
}

Visual Basic
Private Sub Canvas1_MouseLeftButtonDown(ByVal sender As System.Object, ByVal e As System.Windows.Input.MouseButtonEventArgs)
    Dim c As Canvas = sender
    Dim newColor As SolidColorBrush = New SolidColorBrush(Color.FromArgb(255, 200, 77, 0))
    c.Background = newColor
End Sub
  1. Open the Solution Explorer window and right click on SilverlightApplication2TestPage.aspx. Select Set As Start Page from the menu. Press F5 to compile and run the application. After the Web page and its hosted Silverlight content loads, click the dark yellow area immediately below the word Canvas1 to see the background change color.

The MouseLeftButtonDown attribute of the Canvas element causes Silverlight to execute the event handler named Canvas1_MouseLeftButtonDown. The code in this event handler extracts a reference to the element to which the handler is attached, and changes the value of the Background property using a new SolidColorBrush.

Additional Resources

Last edited Dec 17, 2008 at 8:11 PM by prashantbansode, version 1

Comments

No comments yet.