Now that you've examined the functionality provided by the existing Windows Forms 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 Windows Forms user interface.
What benefits does XAML offer to an experienced Windows Forms developer? In a nutshell, XAML provides a declarative way to create user interfaces 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 use a programming language such as C# or VB which simplifies development reduces maintenance costs, allows for better re-use of styles, and leads to greater overall productivity. 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. 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.
- Add a new Silverlight Application into the solution by right-clicking the CustomerViewer solution 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:
Figure 3
New project dialog box
- Name the project SilverlightCustomerViewer and save it within the existing CustomerViewer solution folder.
In the dialog window that appears ensure that <New Web Project> is selected from 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.
Figure 4
New SilverLight Application dialog box
- 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 TextBlockcontrols, 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 analogous to the Label control in Windows Forms. The Silverlight Toolkit (available from https://silverlight.codeplex.com) also provides a Label control that can be used in Silverlight applications.
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.
Figure 5
Silverlight Customer UI
- 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 shown earlier.
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
ComboBox Properties
- 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 or a Windows Forms GroupBox container control, 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:
Figure 7
Silverlight Application UI
Drag a Border control onto the design surface and place it as shown next:
Figure 8
Silverlight Application UI
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's Text 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 completed:
Figure 9
Finished Silverlight Application UI