Binding OData Feeds to Controls in a Client Application (WCF Data Services Quickstart)

In this final task of the WCF Data Services quickstart, you will create a more advanced client application to consume the Northwind service created in the previous task. You will add a new Windows Presentation Foundation (WPF) application to the solution, add a reference to the writable Northwind service, and access the OData feed from the client application by using the generated client data service classes and client libraries. You will then use this application to update Northwind data by using OData.

Note Note

By default, Visual Studio auto-assigns a port number to the localhost URI on your computer. This task uses the port number 12345 in the URI examples. For more information about how to set a specific port number in your Visual Studio project see Creating the Northwind Data Service (WCF Data Services Quickstart).

To create the client application by using Visual Studio

  1. In Solution Explorer, right-click the solution, click Add, and then click New Project.

  2. In Project types, click Windows, and then select WPF Application in the Templates pane.

  3. Enter NorthwindClient for the project name, and then click OK.

  4. Open the file MainWindow.xaml and replace the XAML code with the following code:

        <Window x:Class="MainWindow"
        Title="Northwind Orders" Height="335" Width="425" 
            Name="OrdersWindow" Loaded="Window1_Loaded">
        <Grid Name="orderItemsGrid">
            <ComboBox DisplayMemberPath="OrderID" ItemsSource="{Binding}"
                      Height="23" Margin="92,12,198,0" Name="comboBoxOrder" VerticalAlignment="Top"/>
            <DataGrid ItemsSource="{Binding Path=Order_Details}"  
                      CanUserAddRows="False" CanUserDeleteRows="False"  
                      Name="orderItemsDataGrid" Margin="34,46,34,50"
                    <DataGridTextColumn  Header="Product" Binding="{Binding ProductID, Mode=OneWay}" />
                    <DataGridTextColumn  Header="Quantity" Binding="{Binding Quantity, Mode=TwoWay}" />
                    <DataGridTextColumn  Header="Price" Binding="{Binding UnitPrice, Mode=TwoWay}" />
                    <DataGridTextColumn  Header="Discount" Binding="{Binding Discount, Mode=TwoWay}" />                
            <Label Height="28" Margin="34,12,0,0" Name="orderLabel" VerticalAlignment="Top" 
                   HorizontalAlignment="Left" Width="65">Order:</Label>
            <StackPanel Name="Buttons" Orientation="Horizontal" HorizontalAlignment="Right" 
                        Height="40" Margin="0,257,22,0">
                <Button Height="23" HorizontalAlignment="Right" Margin="0,0,12,12" 
                    Name="buttonSave" VerticalAlignment="Bottom" Width="75" 
                        Click="buttonSaveChanges_Click">Save Changes
                <Button Height="23" Margin="0,0,12,12" 
                    Name="buttonClose" VerticalAlignment="Bottom" Width="75" 

To add a data service reference to the project

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

    This displays the Northwind data service that you created in the first task.

  2. In the Namespace text box, type Northwind, and then click OK.

    This adds a new code file to the project, which contains the data classes that are used to access and interact with data service resources as objects. The data classes are created in the namespace NorthwindClient.Northwind.

To access data service data in the WPF application

  1. In Solution Explorer under NorthwindClient, right-click the project and click Add Reference.

  2. In the Add Reference dialog box, click the .NET tab, select the System.Data.Services.Client.dll assembly, and then click OK. In Solution Explorer under NorthwindClient, open the code page for the MainWindow.xaml file, and add the following using statement (Imports in Visual Basic).

    using System.Data.Services.Client;
    using NorthwindClient.Northwind;
  3. Insert the following code that queries that data service and binds the result to a DataServiceCollection<T> into the MainWindow class:

    Note Note

    You must replace the host name localhost:12345 with the server and port that is hosting your instance of the Northwind data service.

    private NorthwindEntities context;
    private string customerId = "ALFKI";
    // Replace the host server and port number with the values 
    // for the test server hosting your Northwind data service instance.
    private Uri svcUri = new Uri("http://localhost:12345/Northwind.svc");
    private void Window1_Loaded(object sender, RoutedEventArgs e)
            // Instantiate the DataServiceContext.
            context = new NorthwindEntities(svcUri);
            // Define a LINQ query that returns Orders and 
            // Order_Details for a specific customer.
            var ordersQuery = from o in context.Orders.Expand("Order_Details")
                              where o.Customer.CustomerID == customerId
                              select o;
            // Create an DataServiceCollection<T> based on 
            // execution of the LINQ query for Orders.
            DataServiceCollection<Order> customerOrders = new
            // Make the DataServiceCollection<T> the binding source for the Grid.
            this.orderItemsGrid.DataContext = customerOrders;
        catch (Exception ex)
  4. Insert the following code that saves changes into the MainWindow class:

    private void buttonSaveChanges_Click(object sender, RoutedEventArgs e)
            // Save changes made to objects tracked by the context.
        catch (DataServiceRequestException ex)
    private void buttonClose_Click(object sender, RoutedEventArgs e)

To build and run the NorthwindClient application

  1. In Solution Explorer, right-click the NorthwindClient project and select Set as startup project.

  2. Press F5 to start the application.

    This builds the solution and starts the client application. Data is requested from the service and bound to the controls.

  3. Edit a value in the Quantity column of the data grid, and then click Save.

    Changes are saved to the data service.

    Note Note

    This version of the NorthwindClient application does not support adding and deleting of entities.

You have successfully created the client application that accesses the sample Northwind OData feed. You have also completed the WCF Data Services quickstart. For more information about accessing an OData feed from a .NET Framework application, see Data Client (WCF Data Services).

Community Additions