Enlazar controles WPF a un conjunto de datos en aplicaciones .NET Framework

  • Artículo

Nota:

Los conjuntos de datos y las clases relacionadas son tecnologías heredadas de .NET Framework de principios de la década de 2000 que permiten a las aplicaciones trabajar con datos en memoria mientras están desconectadas de la base de datos. Las tecnologías son especialmente útiles para las aplicaciones que permiten a los usuarios modificar los datos y conservar los cambios en la base de datos. Aunque los conjuntos de datos han demostrado ser una tecnología de gran éxito, se recomienda que las nuevas aplicaciones de .NET usen Entity Framework Core. Entity Framework proporciona una manera más natural de trabajar con datos tabulares como modelos de objetos y tiene una interfaz de programación más sencilla.

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

En este tutorial se muestran las tareas siguientes:

  • Crear una aplicación de WPF y un conjunto de datos que se genera a partir de los 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 a una ventana de WPF Designer.

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

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

  • Para completar este tutorial, necesita que las cargas de trabajo de desarrollo de escritorio de .NET y de almacenamiento y procesamiento de datos estén instaladas en Visual Studio. Para instalarlas, abra el Instalador de Visual Studio y elija Modificar (o Más>modificar) junto a la versión de Visual Studio que desea modificar. Vea Modificación de 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 AdventureWorks Light (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

Cree un nuevo proyecto de WPF para mostrar los registros de productos.

  1. Abra Visual Studio.

  2. En la ventana de inicio, elija Crear un proyecto nuevo.

  3. Busque la plantilla de proyecto Aplicación WPF de C# y siga los pasos para crear el proyecto, asignando al proyecto el nombre AdventureWorksProductsEditor.

    Visual Studio crea el proyecto AdventureWorksProductsEditor.

Crear un conjunto de datos para la aplicación

Antes de crear controles enlazados a datos, debe definir un modelo de datos para la aplicación y agregarlo a la ventana Orígenes de datos. En este tutorial, se crea un conjunto de datos que se usará como modelo 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 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, seleccione Siguiente.

  4. En la página Elegir un modelo de base de datos, seleccione Conjunto de datos y después seleccione Siguiente.

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

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

    • 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 configuración de la aplicación, active la casilla Sí, guardar la conexión como y seleccione Siguiente.

  7. En la página Elija los objetos de base de datos, expanda el nodo Tablas y 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 tipado llamado AdventureWorksLTDataSet y un TableAdapter llamado ProductTableAdapter. Más adelante, en este tutorial, usará ProductTableAdapter para rellenar con datos el conjunto de datos y guardar los cambios de nuevo en la base de datos.

  9. Compile el proyecto.

Editar el método de llenado predeterminado de TableAdapter

Para rellenar con datos el conjunto de datos, use el método Fill de ProductTableAdapter. De forma predeterminada, el método Fill rellena la tabla ProductDataTable del AdventureWorksLTDataSet con todas las filas de datos de la tabla Product. Puede modificar este método para que devuelva solo un subconjunto de las filas. Para este tutorial, modifique el método Fill para que devuelva solo las filas de productos que tengan fotos.

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

    Se abre el diseñador de DataSet.

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

    Se abre el Asistente para la configuración de TableAdapter.

  3. En la página Escriba una instrucción SQL, agrega 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 modificando el código XAML en WPF Designer. Más adelante en este tutorial, agregará código que permite a los usuarios desplazarse por los registros de productos y guardar cambios 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="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 registros de clientes, arrastrando la tabla Product desde la ventana Orígenes de datos hasta WPF Designer.

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

  2. Expanda el nodo Product.

  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:

    • ProductCategoryID

    • ProductModelID

    • ThumbnailPhotoFileName

    • rowguid

    • ModifiedDate

  4. Haga clic en el menú de lista desplegable junto al nodo ThumbNailPhoto y seleccione Imagen.

    Nota:

    De forma predeterminada, los elementos de la ventana Orígenes de datos que representan imágenes tienen sus controles predeterminados establecidos 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 matriz de bytes simple al archivo ejecutable de una aplicación grande.

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

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

  6. En el diseñador, haga clic en el cuadro de texto junto a la etiqueta Product ID.

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

Agregue código que permita a los usuarios desplazarse por los registros de productos 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. Modifique el controlador de evento Window_Loaded para que ProductViewSource, AdventureWorksLTDataSet y AdventureWorksLTDataSetProductTableAdapter estén fuera del método y sean accesibles para todo el formulario. Declárelos solo como globales para el formulario y asígnelos dentro del controlador de evento Window_Loaded de forma similar a la siguiente:

    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)
{
    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 < ((CollectionView)productViewSource.View).Count - 1)
{
    productViewSource.View.MoveCurrentToNext();
}

Guardar cambios en los registros de productos

Agregue código que permita a los usuarios guardar cambios en los registros de productos 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 :

    adventureWorksLTDataSetProductTableAdapter.Update(AdventureWorksLTDataSet.Product);

    Nota

    En este ejemplo se usa el método Save de TableAdapter para guardar los cambios. Esto es apropiado en este tutorial, porque solo se está cambiando una tabla de datos. Si tiene que guardar cambios en varias tablas de datos, puede usar también el método UpdateAll de TableAdapterManager que Visual Studio genera con el conjunto de datos. Para obtener más información, consulte TableAdapters.

Prueba de la aplicación

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

  1. Presione F5.

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

    • Los cuadros de texto muestran datos del primer registro de producto 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 Tamaño y seleccione Guardar cambios.

  3. Cierre la aplicación y presione F5 en Visual Studio para reiniciarla.

  4. Navegue al registro de producto que ha cambiado y compruebe que el cambio se conserva.

  5. Cierre la aplicación.

Pasos siguientes

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

Contenido relacionado