Home > Articles > Programming > Windows Programming

  • Print
  • + Share This
Like this article? We recommend Creating a Silverlight Client

Creating a Silverlight Client

Select File > Add > New Project and create a new project of type Silverlight Application. Leave the default options for Silverlight 5 and the ASP.NET Web hosting project unchanged. When the new project is ready, in Solution Explorer right-click the project whose name ends with .Web and set this as the startup project. (The reference to the CustomersLibrary project must be added to the Silverlight client project, not the hosting web version.) Then you can write the code shown in Listing 8 to define the user interface.

Listing 8—Defining the user interface of the Silverlight client.

    d:DesignHeight="300" d:DesignWidth="400">

    <Grid x:Name="LayoutRoot" Background="White">
            <RowDefinition Height="40"/>
        <sdk:DataGrid Name="CustomersDataGrid" ItemsSource="{Binding Customers}"
                  AutoGenerateColumns="True" SelectedItem="{Binding CurrentCustomer}"/>
        <Button Name="DeleteButton" Command="{Binding DeleteCustomerCommand}"
                Width="100" Height="30" Grid.Row="1"

This code is almost the same as for the WPF application; however, in Silverlight the DataGrid isn't included in the list of controls imported by default, so you need to follow these steps:

  1. Import the XML namespace of the SDK, which exposes the DataGrid control.
  2. Add a reference to System.Windows.Controls.dll.
  3. Add a reference to System.Windows.Data.dll.
  4. Add a reference to System.Windows.Data.Input.dll.

The code-behind here is the same as that for the WPF version, so you can create and assign an instance of CustomerViewModel (shown earlier, in Listing 7). Running the application produces the result shown in Figure 7.

Figure 7 The Silverlight client in action.

It's easier to understand the benefits of the portable class library now; you wrote code only once to work with customers, but already two clients can use that code.

  • + Share This
  • 🔖 Save To Your Account