Guía: Vinculación a datos en aplicaciones híbridas

2025-05-07

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

Las tareas que se muestran en este tutorial incluyen:

Creación del proyecto.
Definición de la plantilla de datos.
Especificar el diseño del formulario.
Especificar vinculaciones de datos.
Mostrar datos mediante interoperación.
Agregar el origen de datos al proyecto.
Vinculación al origen de datos.

Para obtener una lista completa de código de las tareas que se ilustran en esta guía paso a paso, consulte Vinculación de Datos en el ejemplo de aplicaciones híbridas.

Cuando haya terminado, comprenderá las características de enlace de datos en las aplicaciones híbridas.

Prerrequisitos

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.

Creación del proyecto

Para crear y configurar el proyecto

Cree un proyecto de aplicación de 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 espacios de nombres de Windows Forms.
```
xmlns:wf="clr-namespace:System.Windows.Forms;assembly=System.Windows.Forms"
```
Asigna al elemento Grid el nombre predeterminado mainGrid mediante la propiedad Name.
```
<Grid x:Name="mainGrid">
```

Definición de la plantilla de datos

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

Para definir la plantilla de datos

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

<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. Label se proporcionan controles para identificar cada columna de la tabla Customers.

Para configurar el diseño de cuadrícula

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

<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 Grid declaración del elemento.

<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 enlaces de datos

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

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

Para especificar enlaces de datos

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

La Binding clase enlaza los TextBox controles a los campos adecuados 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 datos mediante interoperación

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

Para mostrar datos en el control DataGridView

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

<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 tipado a tu proyecto. Se agregan también otras clases de soporte, como adaptadores de tablas 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 la Configuración del Origen de Datos, cree una conexión a la base de datos Northwind mediante un conjunto de datos. Para obtener más información, vea Cómo: conectarse a datos en una base de datos.
Cuando lo solicite el Asistente para configuración del origen de datos, guarde la cadena de conexión como NorthwindConnectionString.

Importante

Almacenar información confidencial, como una contraseña, dentro de la cadena de conexión puede afectar a la seguridad de la aplicación. El uso de la autenticación de Windows, también conocido como seguridad integrada, es una manera más segura de controlar el acceso a una base de datos. Para obtener más información, consulte Protección de la información de conexión.
Cuando se le pida que elija los objetos de base de datos, seleccione las Customers tablas y Orders y asigne un nombre al conjunto NorthwindDataSetde datos generado.

Vinculación a la fuente de datos

El System.Windows.Forms.BindingSource componente 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 con el origen de datos

Abra el archivo de código subyacente, que se denomina MainWindow.xaml.vb o MainWindow.xaml.cs.

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

Este código declara el BindingSource componente y las clases auxiliares 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 código siguiente en el constructor.

Este código crea e inicializa el BindingSource componente.

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 Diseño o 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 Loaded eventos.

Este código asigna el BindingSource componente como contexto de datos y rellena los Customers objetos de adaptador 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 clase MainWindow .

Este método controla el CurrentChanged evento 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.

Consulte también