Exercise 2: Migrating an ASP.NET Application to Silverlight
Now that you've examined the functionality provided by the existing ASP.NET application you'll migrate the application to Silverlight. In this exercise you'll create a new Silverlight project, work with eXtensible Application Markup Language (XAML), create a WCF service proxy to interact with the service and design a user interface that mirrors the existing ASP.NET user interface.
What benefits do Silverlight and XAML offer to an experienced ASP.NET developer? In a nutshell, XAML provides a declarative way to create user interfaces (much like HTML) and provides a productive and flexible way to layout controls. XAML allows you define the overall layout of controls used in an application without having to know HTML, CSS and JavaScript which can simplify development, minimize code and reduce maintenance costs in many cases. By using XAML you can also avoid cross-browser issues since Silverlight runs in all major browsers on Windows and Macintosh platforms. Postback operations are also eliminated since Silverlight applications run on the client-side.
You can also animate, scale, rotate and even skew objects using XAML which opens up many new avenues for presenting data to end users. You can even completely re-design the look and feel of controls using XAML through the use of styles and templates. If you want to display a list of customers with pictures into a drop-down control you can do it directly without writing custom code. Finally, data bindings between controls and object properties can be defined declaratively in XAML providing a simple yet robust way to bind data in applications. The data binding techniques used in XAML can eliminate a lot of the code typically written to map control properties to object properties which leads to greater productivity and simplified maintenance.
- Add a new Silverlight Application into the solution by right-clicking the CustomerViewersolution and selecting Add New Project from the menu.
From the Installed Templates area on the left of the dialog, pick your desired language (Visual Basic or C#) and select Silverlight. Select Silverlight Application from the available templates as shown next:
- Name the project SilverlightCustomerViewer and save it within the existing CustomerViewer solution folder.
In the next dialog window that appears ensure <New Web Project> is selected in the drop-down options and ensure that the project is named SilverlightCustomerViewer.Web as shown next. This project will be used to host the Silverlight application in a web page.
- Once the project loads you'll see the Visual Studio editor open in split-view mode with a designer on top and a XAML code editor window on the bottom.
- Locate the XAML code editor window and change the UserControl element's d:DesignHeight and d:DesignWidth attributes and add Width and Height attributes as shown next:
<UserControlx:Class="SilverlightCustomerViewer.MainPage"xmlns="https://schemas.microsoft.com/winfx/2006/xaml/presentation"xmlns:x="https://schemas.microsoft.com/winfx/2006/xaml"xmlns:d="https://schemas.microsoft.com/expression/blend/2008"xmlns:mc="https://schemas.openxmlformats.org/markup-compatibility/2006"mc:Ignorable="d"d:DesignHeight="545"d:DesignWidth="550"Width="545"Height="550"> <Gridx:Name="LayoutRoot"Background="White"> </Grid></UserControl>
The d:DesignHeight and d:DesignWidth attributes control the size of the design surface while in design mode. However, they don't have any effect at runtime. The Height and Width attributes constrain the size of the Silverlight screen at runtime. If you don't supply a Height and Width attribute Silverlight will automatically fill the entire area of its container.
Now that the designer has been resized, drag 9 TextBlock controls, 1 ComboBox control, 5 TextBox controls and 2 Button controls from the Toolbox onto the designer and arrange them as shown next.
The TextBlock control is similar to the Label control in ASP.NET. The Silverlight Toolkit (available from https://silverlight.codeplex.com) also provides a Label control that can be used in Silverlight applications.
Tip: Once you've added a control onto the design surface you can select it and then copy and paste it onto the design surface to add another control of the same type quickly and easily.
- Modify the Text property of each TextBlock control to match the user interface shown previously (right-click on the control and select Properties from the menu).
- Modify the Content property of each Button control to match the user interface.
Right-click on the ComboBox control, select Properties and change the name of the control to a value of CustomersComboBox (you can change the name using the text box at the top of the Properties window as shown next):
Figure 6
Properties Window Control Name
- Change the DisplayMemberPath property of the ComboBox to a value of FullName.
DisplayMemberPath is used to define the property that will be displayed as the ComboBox binds to a collection of objects such as Customer objects.
- Give the following names to the update and delete buttons in the interface using the Properties window:
Update |
UpdateButton |
Delete |
DeleteButton |
- To simulate an HTML frameset tag, drag a Rectangle from the Toolbox and drop it on the designer surface.
- Right-click on the Rectangle and select Order Send to Back from the menu.
- Resize and arrange the Rectangle so that it encompasses the controls as shown next:
-
Drag a Border control onto the design surface and place it as shown next:
- Right-click on the Border control in the designer and select Properties from the menu.
- Change the following properties on the Border control:
Background |
White |
BorderBrush |
White |
- Drag a TextBlock control from the Toolbox and drop it into the Border control (ensure that it's dropped inside of the Border control).
- Change the TextBlock'sText property to a value of Customer Details.
- Right-click on the Customer Details TextBlock and select Reset Layout Size from the menu.
The user interface should look like the following once done: