Tutorial: Enlazar controles WPF a un conjunto de datos

En este tutorial, creará una aplicación WPF que contiene controles enlazados a datos. Los controles estarán enlazados a registros de productos encapsulados en un conjunto de datos. También agregará botones para examinar los productos y guardar los cambios realizados en los registros de productos.

En este tutorial se muestran las tareas siguientes:

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

• Crear un conjunto de controles enlazados a datos arrastrando una tabla de datos 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 de productos.

• Crear un botón que guarda los cambios que los usuarios realizan en los registros de productos en la tabla de datos 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:

• Conjuntos de datos y objetos TableAdapter. Para obtener más información, vea Trabajar con los conjuntos de datos en Visual Studio y Información general sobre TableAdapter.

• 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. El proyecto mostrará registros de productos.

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 AdventureWorksProductsEditor y haga clic en Aceptar.

   Visual Studio crea el proyecto AdventureWorksProductsEditor.

Crear un conjunto de datos 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 conjunto de datos para usarlo como modelo de datos.

Para crear un conjunto de datos

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

   Se abre la ventana Orígenes de datos.

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

3. En la página Elegir un tipo de origen de datos, seleccione Base de datos y, a continuación, haga clic en Siguiente.

4. En la página Elegir un modelo de base de datos, seleccione Conjunto de datos y, a continuación, haga clic en Siguiente.

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

   • Si hay una conexión de datos con la base de datos de ejemplo AdventureWorksLT disponible en la lista desplegable, selecciónela y, a continuación, haga clic en Siguiente.

     O bien

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

6. En la página Guardar cadena de conexión en el archivo de config. de la aplicación, active la casilla Sí, guardar la conexión 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 Product (SalesLT).

8. Haga clic en Finalizar.

   Visual Studio agrega un nuevo archivo AdventureWorksLTDataSet.xsd al proyecto y agrega el elemento AdventureWorksLTDataSet correspondiente a la ventana Orígenes de datos. El archivo AdventureWorksLTDataSet.xsd define un conjunto de datos con tipo denominado AdventureWorksLTDataSet y un objeto TableAdapter denominado ProductTableAdapter. Más adelante en este tutorial usará ProductTableAdapter para rellenar con datos el conjunto de datos y guardará los cambios en la base de datos.

9. Compile el proyecto.

Editar el método Fill predeterminado de TableAdapter

Para llenar con datos el conjunto de datos, use el método Fill de ProductTableAdapter. De forma predeterminada, el método Fill llena el objeto ProductDataTable de AdventureWorksLTDataSet con todas las filas de datos de la tabla Product. Puede modificar este método de manera que devuelva solo un subconjunto de las filas. Para este tutorial, modifique el método Fill de modo que devuelva solo las filas de los productos que contengan fotos.

Para cargar las filas de productos que tengan fotos

1. En el Explorador de soluciones, haga doble clic en el archivo AdventureWorksLTDataSet.xsd.

   Se abrirá el Diseñador de DataSet.

2. En el diseñador, haga clic con el botón secundario en la consulta Fill,GetData() y seleccione Configurar.

   Se abrirá el Asistente para la configuración de TableAdapter.

3. En la página Escriba una instrucción SQL, agregue la siguiente cláusula WHERE después de la instrucción SELECT en el cuadro de texto.

   WHERE ThumbnailPhotoFileName <> 'no_image_available_small.gif'
   

4. Haga clic en Finalizar.

Definir la interfaz de usuario

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 permita a los usuarios desplazarse por los cambios realizados en los registros de productos y guardarlos mediante estos botones.

Para definir la interfaz de usuario 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="625" />
   </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

Cree controles que muestren los registros del cliente; para ello, arrastre la tabla Product desde la ventana Orígenes de datos hasta WPF Designer.

Para crear controles enlazados a datos

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

2. Expanda el nodo Product.

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:

   • ProductCategoryID

   • ProductModelID

   • ThumbnailPhotoFileName

   • rowguid

   • ModifiedDate

4. Haga clic en el menú desplegable situado al lado del nodo ThumbNailPhoto y seleccione Imagen.

   Nota

   De forma predeterminada, los elementos de la ventana Orígenes de datos que representan las imágenes tienen su control predeterminado establecido en Ninguno. Esto se debe a que las imágenes se almacenan como matrices de bytes en las bases de datos, y las matrices de bytes pueden contener desde una simple matriz de bytes hasta el archivo ejecutable de una gran aplicación.

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

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

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

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

Navegar por los registros de productos

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

Para permitir a los usuarios navegar por los registros de productos

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. Modifique el controlador de eventos Window_Loaded de manera que ProductViewSource, AdventureWorksLTDataSet y AdventureWorksLTDataSetProductTableAdapter 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 ProductViewSource As System.Windows.Data.CollectionViewSource
   Dim AdventureWorksLTDataSet As AdventureWorksProductsEditor.AdventureWorksLTDataSet
   Dim AdventureWorksLTDataSetProductTableAdapter As AdventureWorksProductsEditor.AdventureWorksLTDataSetTableAdapters.ProductTableAdapter
   
   Private Sub Window_Loaded(ByVal sender As System.Object, ByVal e As System.Windows.RoutedEventArgs) Handles MyBase.Loaded
       AdventureWorksLTDataSet = CType(Me.FindResource("AdventureWorksLTDataSet"), AdventureWorksProductsEditor.AdventureWorksLTDataSet)
       'Load data into the table Product. You can modify this code as needed.
       AdventureWorksLTDataSetProductTableAdapter = New AdventureWorksProductsEditor.AdventureWorksLTDataSetTableAdapters.ProductTableAdapter()
       AdventureWorksLTDataSetProductTableAdapter.Fill(AdventureWorksLTDataSet.Product)
       ProductViewSource = CType(Me.FindResource("ProductViewSource"), System.Windows.Data.CollectionViewSource)
       ProductViewSource.View.MoveCurrentToFirst()
   End Sub
   

   private AdventureWorksProductsEditor.AdventureWorksLTDataSet AdventureWorksLTDataSet;
   private AdventureWorksProductsEditor.AdventureWorksLTDataSetTableAdapters.ProductTableAdapter adventureWorksLTDataSetProductTableAdapter;
   private System.Windows.Data.CollectionViewSource productViewSource;
   
   private void Window_Loaded(object sender, RoutedEventArgs e)
   {
       AdventureWorksLTDataSet = ((AdventureWorksProductsEditor.AdventureWorksLTDataSet)(this.FindResource("adventureWorksLTDataSet")));
       // Load data into the table Product. You can modify this code as needed.
       adventureWorksLTDataSetProductTableAdapter = new AdventureWorksProductsEditor.AdventureWorksLTDataSetTableAdapters.ProductTableAdapter();
       adventureWorksLTDataSetProductTableAdapter.Fill(AdventureWorksLTDataSet.Product);
       productViewSource = ((System.Windows.Data.CollectionViewSource)(this.FindResource("productViewSource")));
       productViewSource.View.MoveCurrentToFirst();
   }
   

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

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

   if (productViewSource.View.CurrentPosition > 0)
   {
       productViewSource.View.MoveCurrentToPrevious();
   }
   

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

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

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

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

Guardar los cambios en los registros de productos

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

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

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:

   AdventureWorksLTDataSetProductTableAdapter.Update(AdventureWorksLTDataSet.Product)
   

   adventureWorksLTDataSetProductTableAdapter.Update(AdventureWorksLTDataSet.Product);
   

   Nota

   En este ejemplo, se usa el método Save de TableAdapter para guardar los cambios. En este tutorial es correcto, ya que solo se cambia una tabla de datos. Si necesita guardar los cambios en varias tablas de datos, alternativamente puede usar el método UpdateAll de TableAdapterManager que Visual Studio genera con su conjunto de datos. Para obtener más información, vea Información general sobre TableAdapterManager.

Probar la aplicación

Genere y ejecute la aplicación. Compruebe que puede ver y actualizar los registros de productos.

Para probar la aplicación

1. Presione F5.

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

   • Los cuadros de texto muestran los datos del primer registro de productos que tiene una foto. Este producto tiene el identificador 713 y el nombre Long-Sleeve Logo Jersey, S.

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

2. En uno de los registros de productos, cambie el valor Size y, a continuación, haga clic en Guardar cambios.

3. Cierre la aplicación y, a continuación, reiníciela presionando F5 en Visual Studio.

4. Navegue hasta el registro de productos que cambió y compruebe que se ha conservado el cambio.

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 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 Entity Data Model.

• 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 de WPF a un servicio de datos de WCF

Conceptos

Enlazar controles WPF a datos en Visual Studio

Trabajar con los conjuntos de datos en Visual Studio

Información general sobre WPF y Silverlight Designer

Información general sobre el enlace de datos