Tutorial: Enlazar controles WPF a Entity Data Model

En este tutorial, creará una aplicación de WPF que contiene controles enlazados a datos. Los controles se enlazan a registros del cliente encapsulados en un Entity Data Model. También agregará botones que los clientes pueden usar para navegar por los registros del cliente y guardar los cambios en los registros.

En este tutorial se muestran las tareas siguientes:

• Crear una aplicación de WPF y un Entity Data Model generado con datos de la base de datos de ejemplo AdventureWorksLT.

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

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

• Crear un botón que guarde los cambios de los controles en el Entity Data Model 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 y la configuración que esté usando 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:

• 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

Cree un nuevo proyecto de WPF para mostrar los registros del cliente.

Para crear el proyecto

1. Inicie Visual Studio.

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

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

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

5. En el cuadro Nombre, escriba AdventureWorksCustomerEditor y, a continuación, haga clic en Aceptar.

   Visual Studio crea el proyecto AdventureWorksCustomerEditor.

Crear un Entity Data Model para la aplicación

Para poder crear controles enlazados a datos, se debe definir un modelo de datos para la aplicación y se debe agregar a la ventana Orígenes de datos. En este tutorial, creará un Entity Data Model.

Para crear un Entity Data Model

1. En el menú Datos, haga clic en Agregar nuevo origen de datos para abrir el Asistente para la configuración de orígenes de datos.

2. En la página Elegir un tipo de origen de datos, haga clic en Base de datos y luego en Siguiente.

3. En la página Elegir un modelo de base de datos, haga clic en Entity Data Model y, a continuación, haga clic en Siguiente.

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

5. En la página Elegir la conexión de datos, realice una de las acciones siguientes:

   • 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.

   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.

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

7. Haga clic en Finalizar.

   El archivo Model1.edmx se abre en el diseñador.

8. Compile el proyecto.

Definir la interfaz de usuario de la ventana

Agregue botones a la ventana; modifique, para ello, el XAML en WPF Designer.

Para definir la interfaz de usuario de la ventana

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="425" />
   </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 controles enlazados a datos

Para crear controles que muestren los registros del cliente, se arrastran los objetos de la ventana Orígenes de datos hasta WPF Designer.

Para crear controles enlazados a datos

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

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

3. Expanda el nodo Customers.

4. 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:

   • NameStyle

   • PasswordHash

   • PasswordSalt

   • rowGuid

   • ModifiedDate

5. Arrastre el nodo Customers desde la ventana Orígenes de datos hasta el área situada debajo de los botones.

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

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

8. Compile el proyecto.

Navegar por los registros del cliente

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

Para permitir a los usuarios navegar por los registros del cliente

1. En el diseñador, haga doble clic en el botón control <.

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

2. Modifique el controlador de eventos Window_Loaded de manera que CustomersViewSource y AdventureWorksLTEntities queden fuera del método y estén accesibles para todo el formulario. Simplemente declárelos como globales para el formulario; asígnelos dentro del controlador de eventos Window_Loaded como se muestra a continuación:

   Dim CustomersViewSource As System.Windows.Data.CollectionViewSource
   Dim AdventureWorksLTEntities As AdventureWorksCustomerEditor.AdventureWorksLTEntities
   
   
   Private Sub Window_Loaded(ByVal sender As System.Object, ByVal e As System.Windows.RoutedEventArgs) Handles MyBase.Loaded
       CustomersViewSource = CType(Me.FindResource("CustomersViewSource"), System.Windows.Data.CollectionViewSource)
       AdventureWorksLTEntities = New AdventureWorksCustomerEditor.AdventureWorksLTEntities()
       'Load data into Customers. You can modify this code as needed.
       Dim CustomersQuery As System.Data.Objects.ObjectQuery(Of AdventureWorksCustomerEditor.Customer) = Me.GetCustomersQuery(AdventureWorksLTEntities)
       CustomersViewSource.Source = CustomersQuery.Execute(System.Data.Objects.MergeOption.AppendOnly)
   End Sub
   

   private System.Windows.Data.CollectionViewSource customersViewSource;
   private AdventureWorksCustomerEditor.AdventureWorksLTEntities adventureWorksLTEntities;
   
   private void Window_Loaded(object sender, RoutedEventArgs e)
   {
       adventureWorksLTEntities = new AdventureWorksCustomerEditor.AdventureWorksLTEntities();
       // Load data into Customers. You can modify this code as needed.
       customersViewSource = ((System.Windows.Data.CollectionViewSource)(this.FindResource("customersViewSource")));
       System.Data.Objects.ObjectQuery<AdventureWorksCustomerEditor.Customer> customersQuery = this.GetCustomersQuery(adventureWorksLTEntities);
       customersViewSource.Source = customersQuery.Execute(System.Data.Objects.MergeOption.AppendOnly);
   }
   

3. Agregue el código siguiente al controlador de eventos backButton_Click:

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

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

4. 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.

5. Agregue el código siguiente al controlador de eventos nextButton _Click:

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

   if (customersViewSource.View.CurrentPosition < ((CollectionView)customersViewSource.View).Count - 1)
       customersViewSource.View.MoveCurrentToNext();
   

Punto de control

Compile y ejecute su proyecto para asegurarse de que el código se compila y que puede navegar por los registros del cliente.

Para probar la aplicación

• Presione F5.

  La aplicación se compila y se ejecuta. Compruebe lo siguiente:

  • Se muestran los datos del cliente.

  • Puede hacer clic en los botones > o < para navegar por los registros del cliente.

Guardar los cambios en los registros del cliente

Agregue código que permita a los usuarios guardar los cambios en los registros del cliente mediante el botón Guardar cambios.

Para agregar la capacidad de guardar los cambios en los registros del cliente

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.

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

   AdventureWorksLTEntities.SaveChanges()
   

   adventureWorksLTEntities.SaveChanges();
   

Probar la aplicación

Compile y ejecute la aplicación para comprobar que muestra los registros del cliente y permite guardar los cambios realizados en ellos.

Para probar la aplicación

1. Presione F5.

2. Edite uno de los registros del cliente y, a continuación, haga clic en Guardar cambios.

3. Cierre la aplicación y, a continuación, vuelva a iniciarla con la tecla F5.

4. Navegue hasta el registro del cliente que cambió y compruebe que el cambio se ha guardado.

5. 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 de WPF a otros tipos de orígenes de datos. Para obtener más información, vea Tutorial: Enlazar controles de WPF a un servicio de datos de WCF 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 un conjunto de datos

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

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

Entity Data Model

Introducing the Entity Framework