Tutorial: Enlazar a datos en aplicaciones híbridas

Artículo
08/24/2008

Actualización: noviembre 2007

Enlazar un origen de datos a un control es esencial para proporcionar a los usuarios acceso a los datos subyacentes, tanto si se está utilizando formularios Windows Forms como WPF. Este tutorial muestra cómo puede utilizar el enlace de datos en aplicaciones híbridas que incluyan tanto controles formularios Windows Forms como controles WPF.

Entre las tareas ilustradas en este tutorial se incluyen:

Crear el proyecto.
Definir la plantilla de datos.
Especificar el diseño del formulario.
Especificar los enlaces de datos.
Mostrar los datos utilizando interoperatividad.
Agregar el origen de datos al proyecto.
Establecer el enlace con el origen de datos.

Para ver una lista de código completa de las tareas ilustrada en este tutorial, vea Ejemplo Data Binding in Hybrid Applications.

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

Nota

Los cuadros de diálogo y los comandos de menú que se ven pueden diferir de los descritos en la Ayuda, dependiendo de los valores de configuración o de edición activos. Para cambiar la configuración, elija Importar y exportar configuraciones en el menú Herramientas. Para obtener más información, vea Valores de configuración de Visual Studio.

Requisitos previos

Necesita los componentes siguientes para completar este tutorial:

Visual Studio 2008.
Acceso a la base de datos de ejemplo Northwind ejecutándose en SQL Server.

Crear el proyecto

Para crear y configurar el proyecto

Cree un proyecto Aplicación WPF denominado WPFWithWFAndDatabinding.
En el Explorador de soluciones, agregue una referencia al ensamblado WindowsFormsIntegration, denominado WindowsFormsIntegration.dll.
En el Explorador de soluciones, agregue una referencia al ensamblado formularios Windows Forms, denominado System.Windows.Forms.dll.
Abra Window1.xaml en WPF Designer.

Al principio del archivo, asigne a los espacios de nombres formularios Windows Forms el código siguiente.

<Window x:Class="Window1"
    xmlns="https://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="https://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:wf="clr-namespace:System.Windows.Forms;assembly=System.Windows.Forms" 
    Title="WPFWithWFAndDatabinding"
    Loaded="WindowLoaded"
    >

<Window x:Class="WPFWithWFAndDatabinding.Window1"
    xmlns="https://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="https://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:wf="clr-namespace:System.Windows.Forms;assembly=System.Windows.Forms" 
    Title="WPFWithWFAndDatabinding"
    Loaded="WindowLoaded"
    >

Nombre el elemento GridmainGrid predeterminado asignando la propiedad Name.
```
<Grid x:Name="mainGrid">
```
```
 <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 ItemTemplate del control ListBox.

Para definir la plantilla de datos

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

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

     <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 lo define una cuadrícula con tres filas y tres columnas. Se proporcionan controles Label para identificar cada columna de la tabla Customers.

Para configurar el diseño de la cuadrícula

Copie el código 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>

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

     <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 control ListBox. El objeto ListItemsTemplate asociado 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 enlaces de datos

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

La clase Binding enlaza los controles TextBox 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>

     <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 utilizando interoperatividad.

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 formularios Windows Forms.

Para mostrar datos en el control DataGridView

Copie el código 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>

     <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 con facilidad un origen de datos al proyecto. Este procedimiento agrega un conjunto de datos con establecimiento inflexible de tipos al proyecto. También se agregan otras diversas clases de soporte, tales como adaptadores de tabla para cada una de las tablas elegidas.

Para agregar el origen de datos

En el menú Proyecto, seleccione Agregar nuevo origen de datos….
En el Asistente para la configuración del origen de datos, haga clic en Nueva conexión para crear una conexión con la base de datos Northwind. Para obtener más información, vea Cómo: Conectarse a los datos de una base de datos.
Cuando se lo pida el Asistente para la configuración de orígenes de datos, guarde la cadena de conexión como NorthwindConnectionString.
Seleccione las tablas Customers y Orders y denomine el conjunto de datos generado NorthwindDataSet.

Establecer el enlace con el 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 con el origen de datos

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

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

Este código declara el componente BindingSource y las clases auxiliares asociadas que conectan con la base de datos.

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

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

Copie el código siguiente en el constructor Window1, siguiendo inmediatamente la llamada al método InitializeComponent.

Este código crea e inicializa el componente BindingSource.

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

public Window1()
{
    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;
}

Copie el código siguiente en la definición de la clase Window1, a continuación del constructor.

Este código define el controlador de eventos Loaded, que asigna el componente BindingSource como contexto de datos y rellena los objetos adaptadores Customers y Orders.

Private Sub WindowLoaded( _
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

private void WindowLoaded(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);
}

Copie el código siguiente en la definición de la clase Window1, a continuación del método WindowLoaded.

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

' 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

// 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;
}

Presione F5 para generar y ejecutar la aplicación.

Vea también

Tutorial: Enlazar a datos en aplicaciones híbridas

Requisitos previos

Crear el proyecto

Para crear y configurar el proyecto

Definir la plantilla de datos

Para definir la plantilla de datos

Especificar el diseño del formulario

Para configurar el diseño de la cuadrícula

Para configurar los controles de etiqueta

Especificar enlaces de datos

Para especificar enlaces de datos

Mostrar datos utilizando interoperatividad.

Para mostrar datos en el control DataGridView

Agregar el origen de datos al proyecto

Para agregar el origen de datos

Establecer el enlace con el origen de datos

Para enlazar con el origen de datos

Vea también

Tareas

Conceptos

Referencia

Otros recursos

Recursos adicionales