Contents

Overview

Silverlight provides a Rich Internet Application (RIA) framework that can be used to build applications that can be deployed through the Web while preserving the rich client-side functionality found in traditional desktop applications created using Windows Forms. This lab is designed to guide Windows Forms developers through the process of migrating applications to Silverlight.

In the lab you'll convert an existing Windows Forms application that consumes data from a Windows Communication Foundation (WCF) service to Silverlight and ensure that existing functionality is preserved. Along the way you'll learn how to create a Silverlight user interface, handle events, make asynchronous calls to services, bind data to controls, plus more.

You'll start by researching existing data access and WCF service projects used by a Windows Forms application. Next, you'll run the Windows Forms application to see the feature set that will be migrated to Silverlight. To accomplish the migration you'll create a new Silverlight project in Visual Studio 2010 and use eXtensible Application Markup Language (XAML) along with managed code (both C# and VB are supported in the lab). The Silverlight application that you'll create is shown next:

You Will Benefit from this Lab if:

• You are migrating a Windows Forms application to Silverlight
• You'd like to create a rich-client application that takes advantage of a web-deployment model
• You need to integrate distributed data into an application

You Will Learn:

• How to use the Visual Studio 2010 Silverlight Designer
• XAML and Silverlight control concepts
• How WCF services can be integrated into Silverlight applications
• Silverlight data binding techniques
• How to make asynchronous calls to services
• How to work with cross-domain services
• Similarities between Windows Forms and Silverlight applications

Business Requirements for the Silverlight application include:

• Create a new Silverlight project and associated ASP.NET Web Application project
• Re-use existing data access and WCF service code
• Use XAML to define the user interface and emulate the Windows Forms application
• Handle user interface events
• Create a WCF service proxy
• Call the WCF service using the asynchronous programming model
• Bind data to controls using Silverlight binding syntax
• Handle update and delete operations and notify the user about the status of the operation

Exercise 1: Exploring a Windows Forms Application

In this exercise you'll open an existing Visual Studio 2010 solution and walk through code found in a WCF and Windows Forms project. The main goal of the exercise is to get acquainted with an existing Windows Forms application and supporting code to better understand what code can be re-used during the migration to Silverlight. Throughout the exercise you'll view data access code that relies on Entity Framework 4, examine a WCF service contract and run the Windows Forms project to explore the functionality it offers. To get started, follow the steps below.

1. Open Visual Studio 2010 and select File → Open Project/Solution from the menu.
2. Open the following Visual Studio solution file:

   Language	[Lab Files Location]
   C#	/MigratingToSilverlight/Starting Point/C#/CustomerViewer/CustomerViewer.sln
   Visual Basic	/MigratingToSilverlight/Starting Point/VB/CustomerViewer/CustomerViewer.sln

3. The following projects are available in the solution:
   • CustomerService.Model – Contains entities and data repository classes used to access an AdventureWorks LT database.
   • CustomersService – A WCF service application that exposes entities to various applications.
   • CustomerViewer – A Windows Forms project that consumes data from a WCF service.
   • CustomerViewer.Web – An ASP.NET Web Forms project that uses jQuery to make RESTful calls to a WCF service.
   
4. Right-click on CustomerService.svc in the CustomersService project and select View in Browser from the menu. This will start a local WCF server and show a test page.
5. Back in Visual Studio, right-click on the CustomerViewer project and select Set as StartUp Project from the menu.
6. Run the application by pressing F5. The first time the application runs there will be short delay before data is loaded.
7. Once data loads, notice that customers appear in the ComboBox. Once a customer is selected the details are shown in the form allowing customer data to be updated or deleted.
8. Back in Visual Studio, right-click on CustomerForm.cs or CustomerForm.vb (depending upon your language) and select View Code from the menu. Take a moment to explore the code and note the following:
   • A WCF service proxy is used to call a service that supplies customer data
   • Control data bindings are defined in the SetBindings method
   • Customer data can be updated and deleted through interactions with the WCF service
9. Locate the CustomerService.Model project and double-click the AdventureWorksLT.edmx file to see the Entity Framework 4 model that's exposed. The entity model contains several entities including Customer which is used by the Windows Forms application.

   DataSets are not used in the application since data will exposed through a Web Service and consumed by many different types of clients. The CustomerService.Model project contains strongly-typed objects that work well in a service-oriented environment. Strongly-typed objects also fit in well with Silverlight applications where the DataSet class and related classes such as DataTable aren't supported. By using a Web Service to expose strongly-typed data, many different types of applications can interact with the data regardless of technology or framework.

10. Open CustomerRepository in the Repository folder and take a moment to look through the code that interacts with the entity model (you might also want to look at the base class named RepositoryBase). This class is responsible for all communication with Entity Framework and acts as a re-useable repository layer in the application.
11. Locate the CustomerService project and view ICustomerService in the editor to see the operations it exposes. The operations are used to load Customer objects and handle update and delete operations. The Windows Forms project currently uses a WCF service proxy object to communicate with the different service operations and the Silverlight project will need to call the same service. Service calls are forwarded to the CustomerRepository class examined earlier.

    WCF services work well in environments where data must be exposed to different types of clients without requiring a specific technology or framework. The application shown in this lab uses WCF services to promote data re-use, allow different types of clients to consume data, and provide a standards-compliant way to access data.

Exercise 2: Migrating a Windows Forms Application to Silverlight

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.

1. Add a new Silverlight Application into the solution by right-clicking the CustomerViewer solution and selecting Add → New Project from the menu.
2. 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:
3. Name the project SilverlightCustomerViewer and save it within the existing CustomerViewer solution folder.
4. 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.
5. 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.
6. 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:

   XAML

   <UserControl x:Class="SilverlightCustomerViewer.MainPage"
       xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
       xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
       xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
       xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
       mc:Ignorable="d"
       d:DesignHeight="545" d:DesignWidth="550" Width="545" Height="550">
       <Grid x: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.

7. 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 http://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.

   
8. 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).
9. Modify the Content property of each Button control to match the user interface shown earlier.
10. 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):
11. 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.

12. Give the following names to the update and delete buttons in the interface using the Properties window:

    Button Content	Button Name
    Update	UpdateButton
    Delete	DeleteButton

13. 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.
14. Right-click on the Rectangle and select Order → Send to Back from the menu.
15. Resize and arrange the Rectangle so that it encompasses the controls as shown next:
16. Drag a Border control onto the design surface and place it as shown next:
17. Right-click on the Border control in the designer and select Properties from the menu.
18. Change the following properties on the Border control:

    Property	Value
    Background	White
    BorderBrush	White

19. Drag a TextBlock control from the Toolbox and drop it into the Border control (ensure that it's dropped inside of the Border control).
20. Change the TextBlock's Text property to a value of Customer Details.
21. Right-click on the Customer Details TextBlock and select Reset Layout → Size from the menu.
22. The user interface should look like the following once completed:

Exercise 3: Calling a WCF Service and Binding Data

In this exercise you'll create a WCF service proxy that can be used to call an existing WCF service. You'll also use a clientaccesspolicy.xml file to handle cross-domain issues and bind data to controls.

1. Right-click on the SilverlightCustomerViewer project and select Add Service Reference from the menu.
2. Once the Add Service Reference dialog appears click the Discover button to locate WCF services within the solution.
3. Click on the icon to the left of CustomerService.svc to expand it. Drill-down until you can see the ICustomerService contract. Click the contract name and note that it has several service operations available.
4. In the Namespace box supply a name of CustomerService.Proxies as shown next:
5. Click OK to create the WCF service proxy.
6. Add a new Customer class into the SilverlightCustomerViewer project and change the class's namespace so that it matches with the namespace of the class generated by the WCF proxy:

   C#

   SilverlightCustomerViewer.CustomerService.Proxies
   

   Visual Basic

   CustomerService.Proxies
   

7. Add a FullName property into the Customer class as shown next. Ensure that you mark the class with the partial keyword. This property will be displayed by the ComboBox control.

   C#

   public partial class Customer
   {
       public string FullName
       {
           get
           {
               return FirstName + " " + LastName;
           }
       }
   }
   

   Visual Basic

   Public Partial Class Customer
       Public ReadOnly Property FullName() As String
          Get
             Return FirstName + " " + LastName
          End Get
       End Property
   End Class
   

8. Open the MainPage.xaml code-beside file in the editor and import the proxy namespace at the top of the code file:

   C#

   using SilverlightCustomerViewer.CustomerService.Proxies;
   

   Visual Basic

   Imports CustomerService.Proxies
   

9. Add the following code within the constructor to hook the Loaded event to an event handler:

   C#

   Loaded += MainPage_Loaded;
   

   Visual Basic

   AddHandler Loaded, AddressOf MainPage_Loaded
   

10. Add a MainPage_Loaded method immediately after the constructor with the following code to use the WCF service proxy created earlier and make an asynchronous data request:

    C#

    void MainPage_Loaded(object sender, RoutedEventArgs e)
    {
        var proxy = new CustomerServiceClient();
        proxy.GetCustomersCompleted += proxy_GetCustomersCompleted;
        proxy.GetCustomersAsync();
    }
    

    Visual Basic

    Sub MainPage_Loaded(sender as Object, e as RoutedEventArgs)
        Dim proxy as New CustomerServiceClient()
        AddHandler proxy.GetCustomersCompleted, _
          AddressOf proxy_GetCustomersCompleted
        proxy.GetCustomersAsync()
    End Sub
    

11. Add the following method and associated code to handle the asynchronous callback that will be made when data from the WCF service is returned to the Silverlight application.

    Once the WCF service proxy returns data it can be accessed through the GetCustomersCompletedEventArgs object's Result property which is typed as an ObservableCollection of Customer. The collection is assigned to the ItemsSource property of the ComboBox which is similar to the DataSource property found on data controls in ASP.NET and Windows Forms.

    C#

    void proxy_GetCustomersCompleted(object sender, 
      GetCustomersCompletedEventArgs e)
    {
        CustomersComboBox.ItemsSource = e.Result;
    }
    

    Visual Basic

    Sub proxy_GetCustomersCompleted(sender as Object, _
      e as GetCustomersCompletedEventArgs)
       CustomersComboBox.ItemsSource = e.Result
    End Sub
    

12. Back in MainPage.xaml, select the TextBlock control immediately to the right of Customer ID and select Properties from the menu.
13. Locate the Text property and remove any text from it.
14. Click on the Text property's black triangular icon shown next and select Apply Data Binding…from the menu:
15. The data binding properties window will appear and open the Source area. Click ElementName on the left and CustomersComboBox on the right to identify the ComboBox as the data binding source as shown next:
16. Click on the Path area (immediately below the Source area of the data binding window) and select SelectedItem from the properties:

    After removing the text from the Text property you won't see the TextBlock control on the designer surface. To get to it within the Properties window you can select the TextBlock in the XAML code or right-click on the designer and select Document Outline from the menu. You can then drill-down into the visual tree to select different controls within the designer and access their properties within the Properties window.

17. Locate the TextBlock control modified within the previous steps in the XAML editor and change the Text property value to the following (notice the inclusion of the CustomerID property after SelectedItem):

    XAML

    Text="{Binding ElementName=CustomersComboBox, Path=SelectedItem.CustomerID}"
    

18. Perform the previous steps to add data bindings to all of the TextBox controls in the designer. You'll need to modify the Text property of each control within the XAML as in the previous step to specify the appropriate property of the SelectedItem to bind to. The properties that each TextBox should bind to are shown next:

    TextBox	Property to Bind
    First Name	FirstName
    Last Name	LastName
    Company Name	CompanyName
    Email	EmailAddress
    Phone	Phone

    Once you've defined a binding for one TextBox control's Text property using the data binding window it's often faster to copy and paste it within the XAML to the other TextBox controls and then change the property name defined in the binding.

19. After adding the proper data bindings to the TextBox controls take a moment to look through the XAML and notice that each TextBox binding has Mode=TwoWay added to it. This allows changes to a TextBox control to be propagated back to the bound property automatically. An example of a TwoWay binding is show next:

    XAML

    Text="{Binding ElementName=CustomersComboBox, 
      Path=SelectedItem.FirstName,Mode=TwoWay}"
    

20. Right-click the SilverlightCustomerViewer.Web project and set it as the startup project. Set the html page in the project as the startup page by right-clicking the file and selecting Set As Start Page.
21. Press F5 to compile and run the project and notice that an error occurs once the Silverlight application loads. This is due to a cross-domain call being made from Silverlight to the WCF service. The service uses a different port then the Silverlight host Web project causing a cross-domain exception to be thrown.
22. To fix the cross-domain issue, rename the existing clientaccesspolicy.exclude file in the CustomersService project to clientaccesspolicy.xml.
23. Open the clientaccesspolicy.xml file in the editor and take a moment to look through the XML. Anytime Silverlight makes a call to a service in a different domain a client access policy file must be in place to successfully talk with the service. This file must be placed at the root of the service application.
24. Run the application again and notice that data now loads in the ComboBox control. Select a customer and notice how the data from it is bound to the appropriate TextBlock and TextBox controls.
25. Back in Visual Studio, double-click on both buttons in the designer to create Click event handlers.
26. Add the following code into the Update button's click event handler to call the WCF service and pass the updated Customer object:

    C#

    var proxy = new CustomerServiceClient();
    var cust = CustomersComboBox.SelectedItem as Customer;
    cust.ChangeTracker.State = ObjectState.Modified;
    
    proxy.SaveCustomerCompleted += (s, args) =>
    {
        var opStatus = args.Result;
        string msg = (opStatus.Status) ? "Customer Updated!" : 
                        "Unable to update Customer: " + opStatus.Message;
        MessageBox.Show(msg);                 
    };
    proxy.SaveCustomerAsync(cust);
    

    Visual Basic

    Dim proxy as New CustomerServiceClient()
    Dim cust = CType(CustomersComboBox.SelectedItem, Customer)
    cust.ChangeTracker.State = ObjectState.Modified
    
    AddHandler proxy.SaveCustomerCompleted, Sub(s, args) 
        Dim opStatus = args.Result
        Dim msg As String = If(opStatus.Status, "Customer Updated!", _
          "Unable to update Customer: " +opStatus.Message)
        MessageBox.Show(msg)
    End Sub
    proxy.SaveCustomerAsync(cust)
    

27. Add the following code into the Delete button's click event handler:

    C#

    var proxy = new CustomerServiceClient();
    var cust = CustomersComboBox.SelectedItem as Customer;
    cust.ChangeTracker.State = ObjectState.Deleted;
    proxy.SaveCustomerCompleted += (s, args) =>
    {
        OperationStatus opStatus = args.Result;
        if (opStatus.Status)
        {
            ((ObservableCollection<Customer>)CustomersComboBox.ItemsSource)
              .Remove(cust);
            MessageBox.Show("Customer deleted!");
        }
        else
        {
            MessageBox.Show("Unable to delete Customer: " + opStatus.Message);
        }
    };
    proxy.SaveCustomerAsync(cust);
    

    Visual Basic

    Dim proxy as New CustomerServiceClient()
    Dim cust = CType(CustomersComboBox.SelectedItem, Customer)
    cust.ChangeTracker.State = ObjectState.Deleted
    AddHandler proxy.SaveCustomerCompleted, Sub(s, args) 
        Dim opStatus As OperationStatus = args.Result
        If opStatus.Status Then
     CType(CustomersComboBox.ItemsSource, _
            ObservableCollection(Of Customer)).Remove(cust)
     MessageBox.Show("Customer deleted!")
        Else
     MessageBox.Show("Unable to delete Customer: " + opStatus.Message)
        End If
    
    End Sub
    proxy.SaveCustomerAsync(cust)
    

28. Run the application and test the update and delete functionality.

Summary

In this exercise you examined an existing Windows Forms application and supporting data access and service layers. You then migrated the existing functionality in the Windows Forms application to Silverlight and satisfied the following requirements:

• Create a new Silverlight project and associated ASP.NET Web Application project
• Re-use existing data access and WCF service code
• Use XAML to define the user interface and emulate the Windows Forms application
• Handle user interface events
• Create a WCF service proxy
• Call the WCF service using the asynchronous programming model
• Bind data to controls using Silverlight binding syntax
• Handle update and delete operations and notify the user about the status of the operation

Although the application created in this lab demonstrates how XAML and managed code can be used, other labs will provide additional details about application design practices that can be followed such as the Model-View-ViewModel (MVVM) pattern that you can use to build Silverlight applications.