Article
11/17/2011

Creating the Client Application (WCF Data Services/Silverlight)

Microsoft Silverlight will reach end of support after October 2021. Learn more.

In this task, you will create an application for Silverlight as a new project in the solution that contains the Northwind data service that you created in the previous task. In this project you will add a data service reference to the Northwind data service. The application is hosted in the same ASP.NET Web application that hosts the data service. This makes it more convenient because both the data service and client application for Silverlight can be tested in the same domain by using the ASP.NET Development Server.

Procedures

To create the application for Silverlight project

In Solution Explorer, right-click the Solution, point to Add, and then select New Project.
In the Add New Project dialog box, select Silverlight from the Categories pane, and then select the Silverlight Application template. Name the project SilverlightClient.
In the Add Silverlight Application dialog box, select Host the Silverlight application in a new or existing Web site in the solution. Select Add a test page that references the application and Make it the start page.

To add a data service reference to the project

Right-click the SilverlightClient project, click Add Service Reference, and then click Discover.

This displays the Northwind data service that you created in the first task.
In the Namespace text box, type Northwind, and then click OK.

This adds to the project a new code file that contains the data classes that are used to access and interact with data service resources as objects. The data classes are created in the default namespace of the client application, which in this case is Northwind.

To define the client application user-interface

In Solution Explorer, right-click References and click Add Reference.

This displays the Add Reference dialog box.
Select System.Windows.Controls.Data and click OK.
In Solution Explorer, double-click the MainPage.xaml file. This opens XAML markup for the Page class that is the user interface for the Silverlight application.

Replace the existing XAML markup with the following markup that defines the application user interface:

<!-- NOTE: 
  By convention, the sdk prefix indicates a URI-based XAML namespace declaration 
  for Silverlight SDK client libraries. This namespace declaration is valid for 
  Silverlight 4 only. In Silverlight 3, you must use individual XAML namespace 
  declarations for each CLR assembly and namespace combination outside the scope 
  of the default Silverlight XAML namespace. For more information, see the help 
  topic "Prefixes and Mappings for Silverlight Libraries". 
-->
<UserControl x:Class="SilverlightClient.MainPage"
    xmlns="https://schemas.microsoft.com/winfx/2006/xaml/presentation" 
    xmlns:x="https://schemas.microsoft.com/winfx/2006/xaml" 
    xmlns:sdk="https://schemas.microsoft.com/winfx/2006/xaml/presentation/sdk"
    Width="800" Height="600">
    <Grid x:Name="LayoutRoot" Background="White" Margin="10" VerticalAlignment="Top" >
        <Grid.RowDefinitions>
            <RowDefinition Height="60" />
            <RowDefinition Height="30" />
            <RowDefinition Height="150" />
            <RowDefinition Height="30" />
            <RowDefinition Height="150" />
            <RowDefinition Height="120" />
        </Grid.RowDefinitions>
        <StackPanel Name="customerInputPanel" Orientation="Horizontal" Grid.Row="0" 
                    VerticalAlignment="Center" Margin="20,10">
            <TextBlock Text="Customer ID:" Margin="10" Grid.Column="0"/>
            <TextBox Name="customerId" Margin="10,0" Text="ALFKI" Grid.Column="1"
                     Height="25" Width="200"/>
            <Button Content="Get Orders" Name="getCustomerOrders" Grid.Column="2" 
                    Height="25" Width="120" Click="getCustomerOrders_Click" />
        </StackPanel>
        <TextBlock x:Name="ordersTextBlock" Margin="20,0" Grid.Row="1"
                       Text="Orders:" Grid.Column="0" FontFamily="Calibri"/>
        <sdk:DataGrid Name="ordersGrid" Grid.Row="2"  Margin="20,0" Height="130" 
                       IsReadOnly="True" AutoGenerateColumns="True" ItemsSource="{Binding}" 
                       VerticalAlignment="Top"></sdk:DataGrid>
        <TextBlock Text="Items:" Name="detailsTextBlock" Margin="20,0" Grid.Row="3" 
                       FontFamily="Calibri"/>
        <StackPanel Orientation="Horizontal" Grid.Row="4">
            <sdk:DataGrid Name="detailsGrid" Margin="20,0" Height="150" Width="450"
                       AutoGenerateColumns="True" ItemsSource="{Binding}" ></sdk:DataGrid>
            <StackPanel Orientation="Vertical" >
                <StackPanel Orientation="Horizontal">
                    <StackPanel Orientation="Vertical">
                        <TextBlock Margin="10,10" Text="New product ID:" 
                                   FontFamily="Calibri" Width="100"/>
                        <TextBox Name="productId" HorizontalAlignment="Left" Width="100" 
                                 Text="70" Margin="10,0" />
                    </StackPanel>
                    <Button Name="addDetail" Content="Add Item" Width="100" Height="25" 
                    Margin="20,40,40,0" />
                </StackPanel>
                <StackPanel Orientation="Horizontal" >
                <Button Name="deleteDetail" Content="Delete Item"  Width="100" Height="25" 
                    Margin="10,30" />
                <Button Name="saveChanges" Content="Save Changes" Width="100" Height="25" 
                    Margin="20,30" />
                    </StackPanel>
            </StackPanel>
        </StackPanel>
        <TextBlock x:Name="messageTextBlock" Text="Messages:" Margin="20,20" Height="80"
                       Grid.Row="5" FontFamily="Calibri" />
    </Grid>
</UserControl>

Next Steps

You have successfully created the sample client application for Silverlight. Next, you will add a query to the Page class that returns a specific Customers object from the Northwind data service as well as the related returns Orders objects, and you will bind those Orders objects to a grid control:

Querying the Data Service

Share via