Compartir a través de

Enlazar controles de WPF a un servicio de datos de WCF

  • Artículo

En este tutorial, se creará una aplicación de WPF que contiene controles enlazados a datos. Los controles se enlazan a los registros de clientes que se encapsulan 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 que se genera a partir de los datos de la base de datos de ejemplo AdventureWorksLT.

  • Crear una instancia de WCF Data Service que exponga los datos de Entity Data Model a una aplicación de WPF.

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

  • Crear botones que naveguen hacia adelante y hacia atrás por los registros de clientes.

  • Crear un botón que guarde los cambios a los datos de los controles en WCF Data Service y en el origen de datos subyacente.

Nota

Es posible que el equipo muestre nombres o ubicaciones diferentes para algunos de los elementos de la interfaz de usuario de Visual Studio en este artículo. Puede que esté usando una edición diferente de Visual Studio u otra configuración del entorno. Para obtener más información, vea Personalizar el IDE.

Requisitos previos

Necesitará los componentes siguientes para completar este tutorial:

  • Visual Studio

  • Acceder a una instancia en ejecución de SQL Server o SQL Server Express que tenga asociada la base de datos de ejemplo AdventureWorksLT. Para descargar la base de datos, consulte Bases de datos de ejemplo de AdventureWorks.

El conocimiento previo de los siguientes conceptos es útil, aunque no necesario, para completar el tutorial:

Creación del proyecto del servicio

  1. Para iniciar este tutorial, cree un proyecto de aplicación web ASP.NET en C# o Visual Basic. Asigne al proyecto el nombre AdventureWorksService.

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

Creación de una instancia de Entity Data Model para el servicio

Para exponer datos en una aplicación mediante WCF Data Services, es preciso definir un modelo de datos para el servicio. WCF Data Services admite dos tipos de modelos de datos: Entity Data Model y modelos de datos personalizados definidos mediante objetos Common Language Runtime (CLR) que implementan la interfaz IQueryable<T>. En este tutorial, se crea un Entity Data Model para el modelo de datos.

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

  2. En la lista Plantillas instaladas, haga clic en Datos y 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 del modelo, haga clic en Generar desde la base de datos y después 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.

    • 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 la opción Guardar configuración de conexión de la entidad en App.Config como está seleccionada y haga clic en Siguiente.

  7. En la página Elija los objetos de base de datos, expanda el nodo Tablas y seleccione la tabla SalesOrderHeader.

  8. Haga clic en Finalizar

Creación del servicio

Cree una instancia de WCF Data Services  que exponga los datos de Entity Data Model en una aplicación de WPF:

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

  2. En la lista Plantillas instaladas, haga clic en Web y seleccione el elemento de proyecto Servicio de datos de WCF.

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

    Visual Studio agrega AdventureWorksService.svc al proyecto.

Configuración del servicio

Debe configurar el servicio para trabajar con el Entity Data Model que ha creado:

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

    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 derive de un DataService<T> que opera en la clase de contexto de objeto AdventureWorksLTEntities en su Entity Data Model. También actualiza el método InitializeService para que los clientes del servicio tengan acceso completo de lectura y escritura a la entidad SalesOrderHeader.

  2. Compile el proyecto y compruebe que se compila sin errores.

Creación de la aplicación cliente de WPF

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

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

  2. En el cuadro de diálogo Nuevo proyecto, expanda Visual Basic o Visual C# y después expanda 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 configuración de orígenes de datos.

  7. En la página Elija un tipo de origen de datos del asistente, seleccione Servicio y 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 en el cuadro Servicios.

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

  10. En el cuadro Servicios, haga clic en AdventureWorksService.svc y haga clic en Aceptar.

    Visual Studio descarga la información del servicio y después vuelve al Asistente para 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

Agregue varios botones a la ventana modificando el código XAML en WPF Designer. Más adelante en este tutorial, agregará código que permite a los usuarios ver y actualizar los registros de ventas usando estos botones.

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

    La ventana se abre 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"><</Button>
<Button HorizontalAlignment="Left" Margin="116,20,0,24" Name="nextButton" Width="75">></Button>
<Button HorizontalAlignment="Right" Margin="0,21,46,24" Name="saveButton" Width="110">Save changes</Button>

  3. Compile el proyecto.

Creación de los controles enlazados a datos

Cree controles que muestren registros de clientes, arrastrando el nodo SalesOrderHeaders desde la ventana Orígenes de datos hasta el diseñador de WPF.

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

  2. Expanda el nodo SalesOrderHeaders.

  3. En este ejemplo no se mostrarán algunos campos; por lo tanto, haga clic en la lista desplegable junto a los siguientes nodos y seleccione Ninguno:

    • CreditCardApprovalCode

    • ModifiedDate

    • OnlineOrderFlag

    • RevisionNumber

    • rowguid

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

  4. Desde la ventana Orígenes de datos, arrastre el nodo SalesOrderHeaders a la fila de la cuadrícula situada debajo de la fila que contiene los botones.

    Visual Studio genera el código XAML que crea un conjunto de controles que están enlazados a los datos de la tabla Producto. Para más información sobre el código y XAML generado, consulte Enlace de controles de WPF a datos en Visual Studio.

  5. En el diseñador, haga clic en el cuadro de texto junto a 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

    • Id. del pedido de ventas

    • Número de pedido de ventas

Cargar los datos del servicio

Use el objeto de proxy de servicio para cargar los datos de ventas del servicio. Después, asigne los datos devueltos al origen de datos para CollectionViewSource en la ventana de WPF.

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

  2. Reemplace el controlador de evento con el código siguiente: Asegúrese de reemplazar la dirección localhost en este código por la dirección del host local de su equipo de desarrollo.

    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("http://localhost:45899/AdventureWorksService.svc"));
    salesQuery = dataServiceClient.SalesOrderHeaders;

    ordersViewSource = ((CollectionViewSource)(this.FindResource("salesOrderHeadersViewSource")));
    ordersViewSource.Source = salesQuery.Execute();
    ordersViewSource.View.MoveCurrentToFirst();
}

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

  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 evento backButton_Click para el evento Click.

  2. Agregue el código siguiente al controlador de evento backButton_Click generado:

    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 evento nextButton_Click para el evento Click.

  4. Agregue el código siguiente al controlador de evento nextButton_Click generado:

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

Guardar cambios en los registros de ventas

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

  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 evento saveButton_Click para el evento Click.

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

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

Prueba de la aplicación

Compile y ejecute la aplicación para comprobar que puede ver y actualizar los registros de clientes:

  1. En el menú Compilar, haga clic en Compilar solución. Compruebe que la solución se compila 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 derecho en el proyecto AdventureWorksSalesEditor.

  4. En el que aparece al hacer clic con el botón derecho (menú contextual), en Depurar, haga clic en Iniciar nueva instancia.

    La aplicación se ejecuta. Verifique lo siguiente:

    • Los cuadros de texto muestran campos de datos diferentes de los 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 algún texto en el cuadro Comentario y haga clic en Guardar cambios.

  6. Cierre la aplicación y vuelva a iniciarla en Visual Studio.

  7. Vaya al registro de ventas que ha cambiado 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

Una vez completado este tutorial, puede realizar las siguientes tareas relacionadas:

Contenido relacionado