Tutorial: Enlazar controles WPF a un conjunto de datos
Publicado: abril de 2016
En este tutorial, se 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 tu 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 se tenga y la configuración que se utilice determinan estos elementos. Para obtener más información, vea Personalizar el IDE.
Requisitos previos
Necesita 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. Puede descargar la base de datos AdventureWorksLT del sitio web de CodePlex.
El conocimiento previo de los siguientes conceptos es útil, aunque no necesario, para completar el tutorial:
objetos DataSet y TableAdapter. Para obtener más información, vea Trabajar con los conjuntos de datos en Visual Studio y Información general sobre TableAdapter.
Trabajar con WPF Designer. Para obtener más información, vea Información general sobre WPF y Silverlight Designer.
Enlace a 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
Inicie Visual Studio.
En el menú Archivo, elija Nuevo y haga clic en Proyecto.
Expanda Visual Basic o Visual C# y, después, seleccione Windows.
Seleccione la plantilla de proyecto Aplicación WPF.
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
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.
Para crear un conjunto de datos
En el menú Datos, haga clic en Mostrar orígenes de datos.
Se abre la ventana Orígenes de datos.
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.
En la página Elegir un tipo de origen de datos, seleccione Base de datos y, a continuación, haga clic en Siguiente.
En la página Elegir un modelo de base de datos, seleccione Conjunto de datos y, a continuación, haga clic en Siguiente.
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 haga clic en Siguiente.
O bien
Haga clic en Nueva conexión y cree una conexión a la base de datos AdventureWorksLT.
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 haga clic en Siguiente.
En la página Elija los objetos de base de datos, expanda el nodo Tablas y seleccione la tabla Product (SalesLT).
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 llamadoProductTableAdapter
. 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.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.
Para cargar filas de productos que tengan fotos
En el Explorador de soluciones, haga doble clic en el archivo AdventureWorksLTDataSet.xsd.
Se abre el diseñador de DataSet.
En el diseñador, haga clic con el botón secundario en la consulta Fill,GetData() y seleccione Configurar.
Se abre el Asistente para la configuración de TableAdapter.
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'
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.
Para definir la interfaz de usuario de la ventana
En el Explorador de soluciones, haga doble clic en MainWindow.xaml.
La ventana se abre en WPF Designer.
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"><</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>
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.
Para crear controles enlazados a datos
En la ventana Orígenes de datos, haga clic en el menú desplegable del nodo Product y seleccione Detalles.
Expanda el nodo Product.
En este ejemplo no se mostrarán algunos campos; por lo tanto, haga clic en el menú desplegable junto a los siguientes nodos y seleccione Ninguno:
ProductCategoryID
ProductModelID
ThumbnailPhotoFileName
rowguid
ModifiedDate
Haga clic en el menú desplegable junto al nodo ThumbNailPhoto y seleccione Image.
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.
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 el XAML generado, vea Enlazar controles WPF a datos en Visual Studio.
En el diseñador, haga clic en el cuadro de texto junto a la etiqueta Product ID.
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 usando los botones < y >.
Para que los usuarios puedan navegar por los registros de productos
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.Modifique el controlador de evento
Window_Loaded
para queProductViewSource
,AdventureWorksLTDataSet
yAdventureWorksLTDataSetProductTableAdapter
estén fuera del método y sean accesibles para todo el formulario. Declárelos como globales para el formulario y asígnelos dentro del controlador de eventoWindow_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(); }
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
Agregue el código siguiente al controlador de eventos
backButton_Click
:if (productViewSource.View.CurrentPosition > 0) { productViewSource.View.MoveCurrentToPrevious(); }
If ProductViewSource.View.CurrentPosition > 0 Then ProductViewSource.View.MoveCurrentToPrevious() End If
Vuelva al diseñador y haga doble clic en el botón >.
Agregue el código siguiente al controlador de eventos
nextButton_Click
:if (productViewSource.View.CurrentPosition < ((CollectionView)productViewSource.View).Count - 1) { productViewSource.View.MoveCurrentToNext(); }
If ProductViewSource.View.CurrentPosition < CType(ProductViewSource.View, CollectionView).Count - 1 Then ProductViewSource.View.MoveCurrentToNext() End If
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 Save changes.
Para agregar la posibilidad de guardar cambios en los registros de productos
En el diseñador, haga doble clic en el botón Save Changes.
Visual Studio abre el archivo de código subyacente y crea un nuevo controlador de evento
saveButton_Click
para el evento Click.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
deTableAdapter
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étodoUpdateAll
deTableAdapterManager
que Visual Studio genera con el conjunto de datos. Para obtener más información, vea Información general sobre TableAdapterManager.
Probar la aplicación
Compile y ejecute la aplicación. Compruebe que puede ver y actualizar los registros de productos.
Para probar la aplicación
Presione F5.
La aplicación se compila y se ejecuta. Compruebe 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.
En uno de los registros de productos, cambie el valor Size y haga clic en Save changes.
Cierre la aplicación y presione F5 en Visual Studio para reiniciarla.
Navegue al registro de producto que ha cambiado y compruebe que el cambio se conserva.
Cierre la aplicación.
Pasos siguientes
Una vez completado este tutorial, puede realizar las siguientes tareas relacionadas:
Aprenda cómo usar la ventana Orígenes de datos en 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.
Aprenda cómo usar la ventana Orígenes de datos en Visual Studio para mostrar datos relacionados (es decir, datos en una relación primario-secundario) en controles WPF. Para obtener más información, vea Tutorial: Mostrar datos relacionados en una aplicación WPF.
Vea también
Enlazar controles WPF a datos en Visual Studio
Cómo: 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