Compartir a través de

Tutorial: Enlazar a datos en aplicaciones híbridas

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 Windows Forms como WPF. Este tutorial muestra cómo puede utilizar el enlace de datos en aplicaciones híbridas que incluyan tanto controles Windows Forms como controles 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 utilizando interoperatividad.

  • Agregar el origen de datos al proyecto.

  • Establecer el enlace con el origen de datos.

Para obtener una lista de código completa de las tareas ilustradas en este tutorial, vea Data Binding in Hybrid Applications Sample.

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

Requisitos previos

Necesita los componentes siguientes para completar este tutorial:

  • Visual Studio 2010.

  • Acceso a la base de datos de ejemplo Northwind ejecutándose en SQL Server.

Crear el proyecto

Para crear y configurar el proyecto

  1. Cree un proyecto Aplicación WPF denominado WPFWithWFAndDatabinding.

  2. En el Explorador de soluciones, agregue referencias a los ensamblados siguientes.

    • WindowsFormsIntegration

    • System.Windows.Forms

  3. Abra MainWindow.xaml en WPF Designer.

  4. En el elemento Window, agregue la siguiente asignación de espacio de nombres Windows Forms.

    xmlns:wf="clr-namespace:System.Windows.Forms;assembly=System.Windows.Forms"

  5. Nombre el elemento Grid mainGrid predeterminado asignando 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 ItemTemplate del control ListBox.

Para definir la plantilla de datos

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

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

Para mostrar datos en el control DataGridView

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

  1. En el menú Datos, seleccione Agregar nuevo origen de datos.

  2. En el Asistente para la configuración de orígenes de datos, cree una conexión a la base de datos Northwind utilizando un conjunto de datos. Para obtener más información, vea Cómo: Conectarse a los datos de una base de datos.

  3. Cuando se lo pida el Asistente para la configuración de orígenes de datos, guarde la cadena de conexión como NorthwindConnectionString.

  4. Cuando le pidan que elija los objetos de base de datos, seleccione las tablas Customers y Orders, y asigne el nombre NorthwindDataSet al conjunto de datos generado.

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

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

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

    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();

  3. Copie el código siguiente en el constructor.

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

  4. Abra MainWindow.xaml.

  5. En la vista de diseño o en la vista XAML, seleccione el elemento Window.

  6. En la ventana Propiedades, haga clic en la pestaña Eventos.

  7. Haga doble clic en el evento Loaded.

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

    Este código asigna el componente BindingSource como el contexto de datos y rellena los objetos de adaptador Customers y Orders.

    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

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

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

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

  10. Presione F5 para compilar y ejecutar la aplicación.

Vea también

Referencia

ElementHost

WindowsFormsHost

Conceptos

Tutorial: Hospedar un control compuesto de formularios Windows Forms en WPF

Tutorial: Hospedar un control compuesto de WPF en formularios Windows Forms

Otros recursos

WPF Designer

Data Binding in Hybrid Applications Sample

Historial de cambios

Fecha

Historial

Motivo

Agosto de 2010

Se ha actualizado para Visual Studio 2010.

Comentarios de los clientes.