Tutorial: Enlazar a datos en aplicaciones híbridas

Artículo
11/24/2024

Es esencial enlazar un origen de datos a un control para proporcionar a los usuarios acceso a los datos subyacentes, tanto si se usa Windows Forms como WPF. En este tutorial se muestra cómo se puede usar el enlace de datos en aplicaciones híbridas que incluyen controles de Windows Forms y WPF.

Las tareas ilustradas en este tutorial incluyen:

Crear el proyecto.
Definir la plantilla de datos.
Especificar el diseño del formulario.
Especificar los enlaces de datos.
Mostrar los datos mediante la interoperación.
Agregar el origen de datos al proyecto.
Enlazar al origen de datos.

Para obtener una lista de código completa de las tareas ilustradas en este tutorial, vea Ejemplo de enlace de datos en aplicaciones híbridas.

Cuando acabe, entenderá mejor las características de enlace de datos en aplicaciones híbridas.

Requisitos previos

Necesitará los componentes siguientes para completar este tutorial:

Visual Studio.
Acceso a la base de datos de ejemplo Northwind que se ejecuta en Microsoft SQL Server.

Crear el proyecto

Para crear y configurar el proyecto

Cree un proyecto de aplicación WPF denominado WPFWithWFAndDatabinding.
En el Explorador de soluciones, agregue referencias a los ensamblados siguientes.
- WindowsFormsIntegration
- System.Windows.Forms
Abra MainWindow.xaml en WPF Designer.
En el elemento Window, agregue la siguiente asignación de espacio de nombres de Windows Forms.
```
xmlns:wf="clr-namespace:System.Windows.Forms;assembly=System.Windows.Forms"
```
Asigne el nombre Grid al elemento mainGrid predeterminado mediante la asignación de la propiedad Name.
```
<Grid x:Name="mainGrid">
```

Definir la plantilla de datos

La lista maestra de clientes se muestra en un control ListBox. En el ejemplo de código siguiente se define un objeto DataTemplate denominado ListItemsTemplate que controla el árbol visual del control ListBox. Este objeto DataTemplate se asigna a la propiedad ListBox del control ItemTemplate.

Para definir la plantilla de datos

Copie el código XAML siguiente en la declaración del elemento Grid.

<Grid.Resources>
    <DataTemplate x:Key="ListItemsTemplate">
        <TextBlock Text="{Binding Path=ContactName}"/>
    </DataTemplate>
</Grid.Resources>

Especificar el diseño del formulario

El diseño del formulario se define mediante una cuadrícula con tres filas y tres columnas. Se proporcionan controles Label para identificar cada columna de la tabla de clientes.

Para configurar el diseño de cuadrícula

Copie el código XAML siguiente en la declaración del elemento Grid.

<Grid.RowDefinitions>
    <RowDefinition Height="Auto"/>
    <RowDefinition Height="Auto"/>
    <RowDefinition Height="Auto"/>
</Grid.RowDefinitions>

<Grid.ColumnDefinitions>
    <ColumnDefinition Width="Auto"/>
    <ColumnDefinition Width="Auto"/>
    <ColumnDefinition Width="Auto"/>
</Grid.ColumnDefinitions>

Para configurar los controles de etiqueta

Copie el código XAML siguiente en la declaración del elemento Grid.

<StackPanel Orientation="Vertical" Grid.Row="0" Grid.Column="1">
    <Label Margin="20,38,5,2">First Name:</Label>
    <Label Margin="20,0,5,2">Company Name:</Label>
    <Label Margin="20,0,5,2">Phone:</Label>
    <Label Margin="20,0,5,2">Address:</Label>
    <Label Margin="20,0,5,2">City:</Label>
    <Label Margin="20,0,5,2">Region:</Label>
    <Label Margin="20,0,5,2">Postal Code:</Label>
</StackPanel>

Especificar los enlaces de datos

La lista maestra de clientes se muestra en un control ListBox. El objeto ListItemsTemplate adjunto enlaza un control TextBlock al campo ContactName de la base de datos.

Los detalles de cada registro de cliente se muestran en varios controles TextBox.

Para especificar los enlaces de datos

Copie el código XAML siguiente en la declaración del elemento Grid.

La clase Binding enlaza los controles TextBox a los campos pertinentes de la base de datos.

<StackPanel Orientation="Vertical" Grid.Row="0" Grid.Column="0">
    <Label Margin="20,5,5,0">List of Customers:</Label>
    <ListBox x:Name="listBox1" Height="200" Width="200" HorizontalAlignment="Left" 
       ItemTemplate="{StaticResource ListItemsTemplate}" IsSynchronizedWithCurrentItem="True" Margin="20,5,5,5"/>
</StackPanel>

<StackPanel Orientation="Vertical" Grid.Row="0" Grid.Column="2">
    <TextBox Margin="5,38,5,2" Width="200" Text="{Binding Path=ContactName}"/>
    <TextBox Margin="5,0,5,2" Width="200" Text="{Binding Path=CompanyName}"/>
    <TextBox Margin="5,0,5,2" Width="200" Text="{Binding Path=Phone}"/>
    <TextBox Margin="5,0,5,2" Width="200" Text="{Binding Path=Address}"/>
    <TextBox Margin="5,0,5,2" Width="200" Text="{Binding Path=City}"/>
    <TextBox Margin="5,0,5,2" Width="30" HorizontalAlignment="Left" Text="{Binding Path=Region}"/>
    <TextBox Margin="5,0,5,2" Width="50" HorizontalAlignment="Left" Text="{Binding Path=PostalCode}"/>
</StackPanel>

Mostrar los datos mediante la interoperación

Los pedidos correspondientes al cliente seleccionado se muestran en un control System.Windows.Forms.DataGridView denominado dataGridView1. El control dataGridView1 se enlaza al origen de datos en el archivo de código subyacente. Un control WindowsFormsHost es el elemento primario de este control de Windows Forms.

Para mostrar los datos en el control DataGridView

Copie el código XAML siguiente en la declaración del elemento Grid.

<WindowsFormsHost Grid.Row="1" Grid.Column="0" Grid.ColumnSpan="3" Margin="20,5,5,5" Height="300">
    <wf:DataGridView x:Name="dataGridView1"/>
</WindowsFormsHost>

Agregar el origen de datos al proyecto

Con Visual Studio puede agregar fácilmente un origen de datos al proyecto. Este procedimiento agrega un conjunto de datos fuertemente tipados a su proyecto. También se agregan otras clases de compatibilidad, como adaptadores de tabla para cada una de las tablas elegidas.

Para agregar el origen de datos

En el menú Datos, seleccione Agregar nuevo origen de datos.
En el Asistente para configuración de orígenes de datos, cree una conexión a la base de datos Northwind mediante un conjunto de datos. Para obtener más información, consulta How to: Connect to Data in a Database.
Cuando se lo pida el Asistente para configuración de orígenes de datos, guarde la cadena de conexión como NorthwindConnectionString.

Importante

Almacenar información confidencial, como una contraseña, en la cadena de conexión puede afectar a la seguridad de la aplicación. El uso de la autenticación de Windows (también conocida como seguridad integrada) es un modo más seguro de controlar el acceso a una base de datos. Para más información, consulte Proteger la información de conexión.
Cuando se le pida que elija los objetos de base de datos, seleccione las tablas Customers y Orders, y asigne el nombre NorthwindDataSet al conjunto de datos generado.

Enlazar al origen de datos

El componente System.Windows.Forms.BindingSource proporciona una interfaz uniforme para el origen de datos de la aplicación. El enlace al origen de datos se implementa en el archivo de código subyacente.

Para enlazar al origen de datos

Abra el archivo de código subyacente, denominado MainWindow.xaml.vb o MainWindow.xaml.cs.

Copie el código siguiente en la definición de la clase MainWindow.

En este código se declara el componente BindingSource y las clases del asistente asociadas que se conectan a la base de datos.

private System.Windows.Forms.BindingSource nwBindingSource;
private NorthwindDataSet nwDataSet;
private NorthwindDataSetTableAdapters.CustomersTableAdapter customersTableAdapter =
    new NorthwindDataSetTableAdapters.CustomersTableAdapter();
private NorthwindDataSetTableAdapters.OrdersTableAdapter ordersTableAdapter =
    new NorthwindDataSetTableAdapters.OrdersTableAdapter();

Private nwBindingSource As System.Windows.Forms.BindingSource
Private nwDataSet As NorthwindDataSet
Private customersTableAdapter As New NorthwindDataSetTableAdapters.CustomersTableAdapter()
Private ordersTableAdapter As New NorthwindDataSetTableAdapters.OrdersTableAdapter()

Copie el siguiente código en el constructor.

En este código se crea e inicializa el componente BindingSource.

public MainWindow()
{
    InitializeComponent();

    // Create a DataSet for the Customers data.
    this.nwDataSet = new NorthwindDataSet();
    this.nwDataSet.DataSetName = "nwDataSet";

    // Create a BindingSource for the Customers data.
    this.nwBindingSource = new System.Windows.Forms.BindingSource();
    this.nwBindingSource.DataMember = "Customers";
    this.nwBindingSource.DataSource = this.nwDataSet;
}

Public Sub New()
    InitializeComponent()

    ' Create a DataSet for the Customers data.
    Me.nwDataSet = New NorthwindDataSet()
    Me.nwDataSet.DataSetName = "nwDataSet"

    ' Create a BindingSource for the Customers data.
    Me.nwBindingSource = New System.Windows.Forms.BindingSource()
    Me.nwBindingSource.DataMember = "Customers"
    Me.nwBindingSource.DataSource = Me.nwDataSet

End Sub

Abra MainWindow.xaml.
En la vista de diseño o en la vista XAML, seleccione el elemento Window.
En la ventana Propiedades, haga clic en la pestaña Eventos.
Haga doble clic en el evento Loaded.

Copie el código siguiente en el controlador de eventos Loaded.

En este código se asigna el componente BindingSource como contexto de datos y se rellenan los objetos de adaptador Customers y Orders.

private void Window_Loaded(object sender, RoutedEventArgs e)
{
    // Fill the Customers table adapter with data.
    this.customersTableAdapter.ClearBeforeFill = true;
    this.customersTableAdapter.Fill(this.nwDataSet.Customers);

    // Fill the Orders table adapter with data.
    this.ordersTableAdapter.Fill(this.nwDataSet.Orders);

    // Assign the BindingSource to
    // the data context of the main grid.
    this.mainGrid.DataContext = this.nwBindingSource;

    // Assign the BindingSource to
    // the data source of the list box.
    this.listBox1.ItemsSource = this.nwBindingSource;

    // Because this is a master/details form, the DataGridView
    // requires the foreign key relating the tables.
    this.dataGridView1.DataSource = this.nwBindingSource;
    this.dataGridView1.DataMember = "FK_Orders_Customers";

    // Handle the currency management aspect of the data models.
    // Attach an event handler to detect when the current item
    // changes via the WPF ListBox. This event handler synchronizes
    // the list collection with the BindingSource.
    //

    BindingListCollectionView cv = CollectionViewSource.GetDefaultView(
        this.nwBindingSource) as BindingListCollectionView;

    cv.CurrentChanged += new EventHandler(WPF_CurrentChanged);
}

Private Sub Window_Loaded( _
ByVal sender As Object, _
ByVal e As RoutedEventArgs)

    ' Fill the Customers table adapter with data.
    Me.customersTableAdapter.ClearBeforeFill = True
    Me.customersTableAdapter.Fill(Me.nwDataSet.Customers)

    ' Fill the Orders table adapter with data.
    Me.ordersTableAdapter.Fill(Me.nwDataSet.Orders)

    ' Assign the BindingSource to 
    ' the data context of the main grid.
    Me.mainGrid.DataContext = Me.nwBindingSource

    ' Assign the BindingSource to 
    ' the data source of the list box.
    Me.listBox1.ItemsSource = Me.nwBindingSource

    ' Because this is a master/details form, the DataGridView
    ' requires the foreign key relating the tables.
    Me.dataGridView1.DataSource = Me.nwBindingSource
    Me.dataGridView1.DataMember = "FK_Orders_Customers"

    ' Handle the currency management aspect of the data models.
    ' Attach an event handler to detect when the current item 
    ' changes via the WPF ListBox. This event handler synchronizes
    ' the list collection with the BindingSource.
    '

    Dim cv As BindingListCollectionView = _
        CollectionViewSource.GetDefaultView(Me.nwBindingSource)

    AddHandler cv.CurrentChanged, AddressOf WPF_CurrentChanged

End Sub

Copie el código siguiente en la definición de la clase MainWindow.

Este método controla el evento CurrentChanged y actualiza el elemento actual del enlace de datos.

// This event handler updates the current item
// of the data binding.
void WPF_CurrentChanged(object sender, EventArgs e)
{
    BindingListCollectionView cv = sender as BindingListCollectionView;
    this.nwBindingSource.Position = cv.CurrentPosition;
}

' This event handler updates the current item 
' of the data binding.
Private Sub WPF_CurrentChanged(ByVal sender As Object, ByVal e As EventArgs)
    Dim cv As BindingListCollectionView = sender
    Me.nwBindingSource.Position = cv.CurrentPosition
End Sub

Presione F5 para compilar y ejecutar la aplicación.

Vea también

ElementHost
WindowsFormsHost
Diseño de XAML en Visual Studio
Data Binding in Hybrid Applications Sample (Ejemplo de cómo enlazar datos en aplicaciones híbridas)
Tutorial: Hospedar un control compuesto de formularios Windows Forms en WPF
Tutorial: Hospedar un control compuesto de WPF en formularios Windows Forms