Procédure pas à pas : liaison de données dans des applications hybrides

Article
08/22/2008

Mise à jour : novembre 2007

La liaison d'une source de données à un contrôle est essentielle pour fournir aux utilisateurs l'accès aux données sous-jacentes, que vous utilisiez Windows Forms ou WPF. Cette procédure pas à pas montre comment vous pouvez utiliser la liaison de données dans les applications hybrides qui incluent à la fois des contrôles Windows Forms et WPF.

Cette procédure pas à pas illustre les tâches suivantes :

Création du projet.
Définition du modèle de données.
Spécification de la disposition du formulaire.
Spécification des liaisons de données.
Affichage de données en utilisant l'interopérabilité.
Ajout de la source de données au projet.
Liaison à la source de données.

Pour obtenir l'intégralité du code correspondant aux tâches illustrées dans cette procédure pas à pas, consultez Liaison de données dans des applications hybrides, exemple.

Lorsque vous avez terminé, vous disposerez de connaissances relatives aux fonctionnalités de liaison de données dans les applications hybrides.

Remarque :
Selon vos paramètres actifs ou votre édition, les boîtes de dialogue et les commandes de menu que vous voyez peuvent différer de celles qui sont décrites dans l'aide. Pour modifier vos paramètres, choisissez Importation et exportation de paramètres dans le menu Outils. Pour plus d'informations, consultez Paramètres Visual Studio.

Composants requis

Vous avez besoin des composants suivants pour accomplir cette procédure pas à pas :

Visual Studio 2008.
Accès à la base de données Northwind exécutée sur Microsoft SQL Server..

Création du projet

Pour créer et paramétrer le projet

Créez un projet d'application WPF nommé WPFWithWFAndDatabinding.
Dans l'Explorateur de solutions, ajoutez une référence à l'assembly WindowsFormsIntegration nommé WindowsFormsIntegration.dll.
Dans l'Explorateur de solutions, ajoutez une référence à l'assembly Windows Forms nommé System.Windows.Forms.dll.
Ouvrez Window1.xaml dans le Concepteur WPF.

Au démarrage du fichier, mappez les espaces de noms Windows Forms avec le code suivant.

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

NommezGrid l'élément mainGrid par défaut en attribuant la propriété Name.
```
<Grid x:Name="mainGrid">
```
```
 <Grid x:Name="mainGrid">
```

Définition du modèle de données

La liste principale des clients est affichée dans un contrôle ListBox. L'exemple de code suivant définit un objet DataTemplate nommé ListItemsTemplate qui contrôle l'arborescence d'éléments visuels du contrôle ListBox. Ce DataTemplate est attribué à la propriété ItemTemplate du contrôle ListBox.

Pour définir le modèle de données

Copiez le code suivant dans la déclaration d'élément 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>

Spécification de la disposition du formulaire

La disposition du formulaire est définie par une grille avec trois lignes et trois colonnes. Les contrôles Label sont fournis pour identifier chaque colonne dans le tableau Clients.

Pour paramétrer la disposition de la grille

Copiez le code suivant dans la déclaration d'élément 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>

Pour paramétrer les contrôles Label

Copiez le code suivant dans la déclaration d'élément 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>

Spécification des liaisons de données

La liste principale des clients est affichée dans un contrôle ListBox. Le ListItemsTemplate attaché lie un contrôle TextBlock au champ ContactName de la base de données.

Les détails de chaque enregistrement client sont affichés dans plusieurs contrôles TextBox.

Pour spécifier des liaisons de données

Copiez le code suivant dans la déclaration d'élément Grid.

La classe Binding lie les contrôles TextBox aux champs appropriés dans la base de données.

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

Affichage de données en utilisant l'interopérabilité

Les ordres qui correspondent au client sélectionné sont affichés dans un contrôle System.Windows.Forms.DataGridView nommé dataGridView1. Le contrôle dataGridView1 est lié à la source de données dans le fichier code-behind. Un contrôle WindowsFormsHost est le parent de ce contrôle Windows Forms.

Pour afficher des données dans le contrôle DataGridView

Copiez le code suivant dans la déclaration d'élément 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>

Ajout de la source de données au projet

Avec Visual Studio, vous pouvez ajouter facilement une source de données à votre projet. Cette procédure ajoute un groupe de données fortement typé à votre projet. Plusieurs autres classes de prise en charge, telles que les adaptateurs de table pour chacune des tables choisies, sont également ajoutées.

Pour ajouter la source de données

Dans le menu Projet, sélectionnez Ajouter une nouvelle source de données....
Dans l'Assistant Configuration de source de données, cliquez sur Nouvelle connexion pour créer votre connexion à la base de données Northwind. Pour plus d'informations, consultez Comment : établir une connexion à des données d'une base de données.
Lorsque vous êtes invités par l'Assistant Configuration de source de données, enregistrez la chaîne de connexion en tant que NorthwindConnectionString.
Sélectionnez les tables Clients et Commandes et nommez le groupe de données généré NorthwindDataSet.

Liaison à la source de données

Le composant System.Windows.Forms.BindingSource fournit une interface uniforme pour la source de données de l'application. La liaison à la source de données est implémentée dans le fichier code-behind.

Pour effectuer la liaison à la source de données

Ouvrez le fichier code-behind, nommé Window1.xaml.cs ou Window1.xaml.vb.

Copiez le code suivant dans la définition de classe Window1.

Ce code déclare le composant BindingSource et les classes d'assistance associées qui se connectent à la base de données.

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

Copiez le code suivant dans le constructeur Window1, en suivant immédiatement l'appel à la méthode InitializeComponent.

Ce code crée et initialise le composant 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;
}

Copiez le code suivant dans la définition de classe Window1, après le constructeur.

Ce code définit le gestionnaire d'événements Loaded, qui attribue le composant BindingSource comme contexte de données et renseigne les objets d'adaptateur Customers et 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);
}

Copiez le code suivant dans la définition de classe Window1, après la méthode WindowLoaded.

Cette méthode gère l'événement CurrentChanged et met à jour l'élément actuel de la liaison de données.

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

Appuyez sur F5 pour générer et exécuter l'application.

Voir aussi

Partager via

Procédure pas à pas : liaison de données dans des applications hybrides

Composants requis

Création du projet

Pour créer et paramétrer le projet

Définition du modèle de données

Pour définir le modèle de données

Spécification de la disposition du formulaire

Pour paramétrer la disposition de la grille

Pour paramétrer les contrôles Label

Spécification des liaisons de données

Pour spécifier des liaisons de données

Affichage de données en utilisant l'interopérabilité

Pour afficher des données dans le contrôle DataGridView

Ajout de la source de données au projet

Pour ajouter la source de données

Liaison à la source de données

Pour effectuer la liaison à la source de données

Voir aussi

Tâches

Concepts

Référence

Autres ressources

Ressources supplémentaires