Tutorial: Enlazar controles de WPF a un servicio de datos de WCF

En este tutorial, creará una aplicación WPF que contiene controles enlazados a datos. Los controles se enlazan a registros del cliente encapsulados en un Servicio de datos de WCF. También agregará botones que los clientes pueden usar para ver y actualizar los registros.

En este tutorial se muestran las tareas siguientes:

• Crear un Entity Data Model generado a partir de los datos de la base de datos de ejemplo AdventureWorksLT.

• Crear un Servicio de datos de WCF que expone los datos de Entity Data Model en una aplicación WPF.

• Crear un conjunto de controles enlazados a datos arrastrando elementos desde la ventana Orígenes de datos hasta WPF Designer.

• Crear botones que permiten navegar hacia delante y hacia atrás por los registros del cliente.

• Crear un botón que guarda los cambios a los datos en los controles para el Servicio de datos de WCF y el origen de datos subyacente.

  Nota

  Es posible que su equipo muestre nombres o ubicaciones diferentes para algunos de los elementos de la interfaz de usuario de Visual Studio en las siguientes instrucciones. La edición de Visual Studio que tenga y la configuración que esté utilizando determinan estos elementos. Para obtener más información, vea Trabajar con valores de configuración.

Requisitos previos

Necesita los componentes siguientes para completar este tutorial:

• Visual Studio 2010.

• Acceso a una instancia en ejecución de SQL Server o SQL Server Express que tenga adjunta la base de datos de ejemplo AdventureWorksLT. La base de datos AdventureWorksLT se puede descargar desde el sitio web de CodePlex.

Para completar el tutorial, resulta útil, aunque no necesario, tener conocimiento previo de los siguientes conceptos:

• Servicios de datos de WCF Para obtener más información, vea ADO.NET Data Services Framework Overview.

• Modelos de datos de Servicios de datos de WCF. Para obtener más información, vea Data Model.

• Entity Data Model y ADO.NET Entity Framework. Para obtener más información, vea Entity Data Model e Introducing the Entity Framework.

• Uso de WPF Designer. Para obtener más información, vea Información general sobre WPF y Silverlight Designer.

• Enlace de datos de WPF. Para obtener más información, vea Información general sobre el enlace de datos.

Crear el proyecto de servicio

Para iniciar este tutorial, cree un proyecto de Servicio de datos de WCF.

Para crear el proyecto de servicio

1. Inicie Visual Studio.

2. En el menú Archivo, elija Nuevo y haga clic en Proyecto.

3. Expanda Visual C# o Visual Basic y, a continuación, seleccione Web.

4. Seleccione la plantilla de proyecto Aplicación web ASP.NET.

5. En el cuadro Nombre, escriba AdventureWorksService y haga clic en Aceptar.

   Visual Studio crea el proyecto AdventureWorksService.

6. En el Explorador de soluciones, haga clic con el botón secundario en Default.aspx y seleccione Eliminar. Este archivo no es necesario en este tutorial.

Crear un Entity Data Model para el servicio

Para exponer datos a una aplicación mediante un Servicio de datos de WCF, debe definir un modelo de datos para el servicio. El Servicio de datos de WCF admite dos tipos de modelos de datos: Entity Data Model y modelos de datos personalizados que se definen mediante objetos de Common Language Runtime (CLR) que implementan la interfaz IQueryable<T>. En este tutorial creará un Entity Data Model como modelo de datos.

Para crear un Entity Data Model

1. En el menú Proyecto, haga clic en Agregar nuevo elemento.

2. Seleccione el elemento de proyecto ADO.NET Entity Data Model.

3. Cambie el nombre a AdventureWorksModel.edmx y haga clic en Agregar.

   Se abre el Asistente para Entity Data Model.

4. En la página Elegir contenido de Model, haga clic en Generar desde la base de datos y haga clic en Siguiente.

5. En la página Elegir la conexión de datos, seleccione una de estas opciones:

   • Si una conexión de datos a la base de datos de ejemplo AdventureWorksLT está disponible en la lista desplegable, selecciónela.

     O bien

   • Haga clic en Nueva conexión y cree una conexión a la base de datos AdventureWorksLT.

6. En la página Elegir la conexión de datos, asegúrese de que esté seleccionada la opción Guardar configuración de conexión de la entidad en App.Config como y, a continuación, haga clic en Siguiente.

7. En la página Elija los objetos de base de datos, expanda Tablas y, a continuación, seleccione la tabla SalesOrderHeader.

8. Haga clic en Finalizar.

Crear el servicio web

Cree un Servicio de datos de WCF para exponer los datos de Entity Data Model en una aplicación WPF.

Para crear el servicio

1. En el menú Proyecto, seleccione Agregar nuevo elemento.

2. Seleccione el elemento de proyecto Servicio de datos de WCF.NET.

3. En el cuadro Nombre, escriba AdventureWorksService.svc y haga clic en Agregar.

   Visual Studio agrega AdventureWorksService.svc al proyecto.

Configurar el servicio

Debe configurar el servicio para que funcione con el Entity Data Model creado.

Para configurar el servicio

1. En el archivo de código AdventureWorks.svc, reemplace la declaración de clase AdventureWorksService con el código siguiente.

   Public Class AdventureWorksService
       Inherits DataService(Of AdventureWorksLTEntities)
   
       ' This method is called only once to initialize service-wide policies.
       Public Shared Sub InitializeService(ByVal config As IDataServiceConfiguration)
           config.SetEntitySetAccessRule("SalesOrderHeaders", EntitySetRights.All)
           config.UseVerboseErrors = True
       End Sub
   End Class
   

   public class AdventureWorksService : DataService<AdventureWorksLTEntities>
   {
       // This method is called only once to initialize service-wide policies.
       public static void InitializeService(IDataServiceConfiguration config)
       {
           config.SetEntitySetAccessRule("SalesOrderHeaders", EntitySetRights.All);
       }
   }
   

   Este código actualiza la clase AdventureWorksService para que se derive de una interfaz DataService<T> que funcione en la clase de contexto del objeto AdventureWorksLTEntities del Entity Data Model. También actualiza el método InitializeService para conceder a los clientes del servicio acceso de lectura y escritura completo a la entidad SalesOrderHeader.

   Para obtener más información acerca de las clases de contexto del objeto de ADO.NET Entity Framework, vea Object Services Overview (Entity Framework).

2. Compile el proyecto y compruebe que no se producen errores.

Crear la aplicación cliente de WPF

Para mostrar los datos de Servicio de datos de WCF, cree una nueva aplicación WPF con un origen de datos basado en el servicio. Más adelante, en este tutorial, agregará controles enlazados a datos a la aplicación.

Para crear la aplicación cliente de WPF

1. En el Explorador de soluciones, haga clic con el botón secundario en el nodo de la solución, haga clic en Agregar y seleccione Nuevo proyecto.

   Nota

   En los proyectos de Visual Basic, el nodo de la solución aparece en el Explorador de soluciones solo cuando se activa la casilla Mostrar solución siempre en General, Proyectos y soluciones, Opciones (Cuadro de diálogo).

2. En el cuadro de diálogo Nuevo proyecto, expanda Visual Basic o Visual C#, y, a continuación, seleccione Windows.

3. Seleccione la plantilla de proyecto Aplicación WPF.

4. En el cuadro Nombre, escriba AdventureWorksSalesEditor y haga clic en Aceptar.

   Visual Studio agrega el proyecto AdventureWorksSalesEditor a la solución.

5. En el menú Datos, haga clic en Mostrar orígenes de datos.

   Se abre la ventana Orígenes de datos.

6. En la ventana Orígenes de datos, seleccione Agregar nuevo origen de datos.

   Se abrirá el Asistente para la configuración de orígenes de datos.

7. En la página Elegir un tipo de origen de datos del asistente, seleccione Servicio y, a continuación, haga clic en Siguiente.

8. En el cuadro de diálogo Agregar referencia de servicio, haga clic en Detectar.

   Visual Studio busca los servicios disponibles en la solución actual y agrega AdventureWorksService.svc a la lista de servicios disponibles del cuadro Servicios.

9. En el cuadro Espacio de nombres, escriba AdventureWorksService.

10. En el cuadro Servicios, haga clic en AdventureWorksService.svc y, a continuación, haga clic en Aceptar.

    Visual Studio descarga la información del servicio y, a continuación, vuelve al Asistente para la configuración de orígenes de datos.

11. En la página Agregar referencia de servicio, haga clic en Finalizar.

    Visual Studio agrega los nodos que representan los datos devueltos por el servicio a la ventana Orígenes de datos.

Definir la interfaz de usuario de la ventana

Agregue varios botones a la ventana; para ello, modifique el código XAML en WPF Designer. Más adelante, en este tutorial, agregará código que permitirá a los usuarios ver y actualizar los registros de ventas mediante estos botones.

Para crear el diseño de la ventana

1. En el Explorador de soluciones haga doble clic en MainWindow.xaml.

   La ventana se abrirá en WPF Designer.

2. En la vista XAML del diseñador, agregue el código siguiente entre las etiquetas <Grid>:

   <Grid.RowDefinitions>
       <RowDefinition Height="75" />
       <RowDefinition Height="525" />
   </Grid.RowDefinitions>
   <Button HorizontalAlignment="Left" Margin="22,20,0,24" Name="backButton" Width="75">&lt;</Button>
   <Button HorizontalAlignment="Left" Margin="116,20,0,24" Name="nextButton" Width="75">&gt;</Button>
   <Button HorizontalAlignment="Right" Margin="0,21,46,24" Name="saveButton" Width="110">Save changes</Button>
   

3. Compile el proyecto.

Crear los controles enlazados a datos

Cree controles que muestren los registros del cliente; para ello, arrastre el nodo SalesOrderHeaders desde la ventana Orígenes de datos hasta el diseñador.

Para crear los controles enlazados a datos

1. En la ventana Orígenes de datos, haga clic en el menú desplegable del nodo SalesOrderHeaders y seleccione Detalles.

2. Expanda el nodo SalesOrderHeaders.

3. En este ejemplo, algunos campos no se mostrarán, de modo que haga clic en el menú desplegable situado al lado de los nodos siguientes y seleccione Ninguno:

   • CreditCardApprovalCode

   • ModifiedDate

   • OnlineOrderFlag

   • RevisionNumber

   • rowguid

   Esta acción evita que Visual Studio cree controles enlazados a datos para estos nodos en el paso siguiente. En este tutorial se supone que el usuario final no necesita ver estos datos.

4. En la ventana Orígenes de datos, arrastre el nodo SalesOrderHeaders hasta la fila de cuadrícula situada bajo la fila que contiene los botones.

   Visual Studio genera XAML y código que crea un conjunto de controles que están enlazados a datos de la tabla Product. Para obtener más información sobre el XAML y el código generados, vea Enlazar controles WPF a datos en Visual Studio.

5. En el diseñador, haga clic en el cuadro de texto situado al lado de la etiqueta Customer ID.

6. En la ventana Propiedades, active la casilla junto a la propiedad IsReadOnly.

7. Establezca la propiedad IsReadOnly de cada uno de los cuadros de texto siguientes:

   • Purchase Order Number

   • Sales Order ID

   • Sales Order Number

Cargar los datos desde el servicio

Use el objeto proxy del servicio para cargar los datos de ventas del servicio y, a continuación, asigne los datos devueltos al origen de datos para CollectionViewSource en la ventana de WPF.

Para cargar los datos desde el servicio

1. En el diseñador, haga doble clic en el texto MainWindow para crear el controlador de eventos Window_Loaded.

2. Reemplace el controlador de eventos con el código siguiente. Asegúrese de que reemplaza la dirección localhost de este código con la dirección del host local de su equipo de desarrollo.

   Private DataServiceClient As AdventureWorksService.AdventureWorksLTEntities
   Private SalesQuery As System.Data.Services.Client.DataServiceQuery(Of AdventureWorksService.SalesOrderHeader)
   Private OrdersViewSource As CollectionViewSource
   
   Private Sub Window_Loaded(ByVal Sender As Object, ByVal e As RoutedEventArgs) Handles MyBase.Loaded
   
       ' TODO: Modify the port number in the following URI as required.
       DataServiceClient = New AdventureWorksService.AdventureWorksLTEntities( _
       New Uri("https://localhost:32415/AdventureWorksService.svc"))
       SalesQuery = DataServiceClient.SalesOrderHeaders
   
       OrdersViewSource = CType(Me.FindResource("SalesOrderHeadersViewSource"), CollectionViewSource)
       OrdersViewSource.Source = SalesQuery.Execute()
       OrdersViewSource.View.MoveCurrentToFirst()
   End Sub
   

   private AdventureWorksService.AdventureWorksLTEntities dataServiceClient;
   private System.Data.Services.Client.DataServiceQuery<AdventureWorksService.SalesOrderHeader> salesQuery;
   private CollectionViewSource ordersViewSource;
   
   private void Window_Loaded(object sender, RoutedEventArgs e)
   {
       // TODO: Modify the port number in the following URI as required.
       dataServiceClient = new AdventureWorksService.AdventureWorksLTEntities(
           new Uri("https://localhost:45899/AdventureWorksService.svc"));
       salesQuery = dataServiceClient.SalesOrderHeaders;
   
       ordersViewSource = ((CollectionViewSource)(this.FindResource("salesOrderHeadersViewSource")));
       ordersViewSource.Source = salesQuery.Execute();
       ordersViewSource.View.MoveCurrentToFirst();
   }
   

Navegar por los registros de ventas

Agregue código que permita a los usuarios desplazarse por los registros de ventas mediante los botones < y >.

Para permitir a los usuarios navegar por los registros de ventas

1. En el diseñador, haga doble clic en el botón < en la superficie de la ventana.

   Visual Studio abre el archivo de código subyacente y crea un nuevo controlador de eventos backButton_Click para el evento Click.

2. Reemplace el controlador de eventos backButton_Click generado por el código siguiente:

   If OrdersViewSource.View.CurrentPosition > 0 Then
       OrdersViewSource.View.MoveCurrentToPrevious()
   End If
   

   if (ordersViewSource.View.CurrentPosition > 0)
       ordersViewSource.View.MoveCurrentToPrevious();
   

3. Vuelva al diseñador y haga doble clic en el botón >.

   Visual Studio abre el archivo de código subyacente y crea un nuevo controlador de eventos nextButton_Click para el evento Click.

4. Reemplace el controlador de eventos nextButton_Click generado por el código siguiente.

   If OrdersViewSource.View.CurrentPosition < CType(OrdersViewSource.View, CollectionView).Count - 1 Then
       OrdersViewSource.View.MoveCurrentToNext()
   End If
   

   if (ordersViewSource.View.CurrentPosition < ((CollectionView)ordersViewSource.View).Count - 1)
   {
       ordersViewSource.View.MoveCurrentToNext();
   }
   

Guardar los cambios en los registros de ventas

Agregue código que permita a los usuarios ver y guardar los cambios realizados en los registros de ventas mediante el botón Guardar cambios.

Para agregar la capacidad de guardar los cambios en los registros de ventas

1. En el diseñador, haga doble clic en el botón Guardar cambios.

   Visual Studio abre el archivo de código subyacente y crea un nuevo controlador de eventos saveButton_Click para el evento Click.

2. Agregue el código siguiente al controlador de eventos saveButton_Click.

   Dim CurrentOrder As AdventureWorksService.SalesOrderHeader = CType(OrdersViewSource.View.CurrentItem, AdventureWorksService.SalesOrderHeader)
   
   DataServiceClient.UpdateObject(CurrentOrder)
   DataServiceClient.SaveChanges()
   

   AdventureWorksService.SalesOrderHeader currentOrder = (AdventureWorksService.SalesOrderHeader)ordersViewSource.View.CurrentItem;
   dataServiceClient.UpdateObject(currentOrder);
   dataServiceClient.SaveChanges();
   

Probar la aplicación

Compile y ejecute la aplicación para comprobar que puede ver y actualizar los registros del cliente.

Para probar la aplicación

1. En el menú Generar, haga clic en Generar solución. Compruebe que la solución se genera sin errores.

2. Presione CTRL+F5.

   Visual Studio inicia el proyecto AdventureWorksService sin depurarlo.

3. En el Explorador de soluciones, haga clic con el botón secundario en el proyecto AdventureWorksSalesEditor.

4. En el menú contextual, bajo Depurar, haga clic en Iniciar nueva instancia.

   La aplicación se ejecuta. Compruebe lo siguiente:

   • Los cuadros de texto muestran campos de datos diferentes del primer registro de ventas, que tiene el identificador de pedido de ventas 71774.

   • Puede hacer clic en los botones > o < para navegar por otros registros de ventas.

5. En uno de los registros de ventas, escriba texto en el cuadro Comentarios y, a continuación, haga clic en Guardar cambios.

6. Cierre la aplicación y, a continuación, iníciela de nuevo en Visual Studio.

7. Navegue al registro de ventas que cambió y compruebe que el cambio se conserva después de cerrar y volver a abrir la aplicación.

8. Cierre la aplicación.

Pasos siguientes

Después de completar este tutorial, puede realizar las siguientes tareas relacionadas:

• Aprender a usar la ventana Orígenes de datos de Visual Studio para enlazar controles WPF a otros tipos de orígenes de datos. Para obtener más información, vea Tutorial: Enlazar controles WPF a Entity Data Model y Tutorial: Enlazar controles WPF a un conjunto de datos.

• Aprender a usar la ventana Orígenes de datos de Visual Studio para mostrar datos relacionados (es decir, datos en una relación primaria-secundaria) en los controles WPF. Para obtener más información, vea Tutorial: Mostrar datos relacionados en una aplicación WPF.

Vea también

Tareas

Cómo: Enlazar controles WPF a datos en Visual Studio

Tutorial: Enlazar controles WPF a Entity Data Model

Tutorial: Enlazar controles WPF a un conjunto de datos

Conceptos

Enlazar controles WPF a datos en Visual Studio

Información general sobre WPF y Silverlight Designer

Información general sobre el enlace de datos

Otros recursos

ADO.NET Data Services Framework Overview

Data Model

Entity Data Model

Introducing the Entity Framework