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

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

Cette procédure pas à pas décrit notamment 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 des données à l’aide de 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 des tâches illustrées dans cette procédure pas à pas, consultez Exemple de liaison de données dans les applications hybrides.

À l’issue de cette procédure, vous aurez une meilleure compréhension des fonctionnalités de liaison de données dans les applications hybrides.

Prérequis

Vous devez disposer des éléments suivants pour exécuter cette procédure pas à pas :

• Visual Studio.

• Accès à l'exemple de base de données Northwind s’exécutant dans Microsoft SQL Server.

Création du projet

Pour créer et configurer le projet

1. Créez un projet d’application WPF nommé WPFWithWFAndDatabinding.

2. Dans l’Explorateur de solutions, ajoutez des références aux assemblys suivants.

   • WindowsFormsIntegration

   • System.Windows.Forms

3. Ouvrez MainWindow.xaml dans le concepteur WPF.

4. Dans l’élément Window , ajoutez le mappage d’espaces de noms Windows Forms suivant.

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

5. Nommez l’élément Grid par défaut mainGrid en affectant la Name propriété.

   <Grid x:Name="mainGrid">
   

Définition du modèle de données

La liste principale des clients s’affiche dans un ListBox contrôle. L’exemple de code suivant définit un DataTemplate objet nommé ListItemsTemplate qui contrôle l’arborescence visuelle du ListBox contrôle. Cette propriété DataTemplate est affectée à la ListBox propriété du ItemTemplate contrôle.

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

• Copiez le code XAML suivant dans la déclaration de l’élément Grid .

  <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 de trois lignes et trois colonnes. Label les contrôles sont fournis pour identifier chaque colonne de la table Customers.

Pour configurer la disposition de la grille

• Copiez le code XAML suivant dans la déclaration de l’é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>
  

Pour configurer les contrôles Label

• Copiez le code XAML suivant dans la déclaration de l’é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>
  

Spécification des liaisons de données

La liste principale des clients s’affiche dans un ListBox contrôle. L’élément attaché ListItemsTemplate lie un TextBlock contrôle au ContactName champ de la base de données.

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

Pour spécifier des liaisons de données

• Copiez le code XAML suivant dans la déclaration de l’élément Grid .

  La Binding classe lie les TextBox contrôles 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>
  

Affichage des données à l’aide de l’interopérabilité

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

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

• Copiez le code XAML suivant dans la déclaration de l’é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>
  

Ajout de la source de données au projet

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

Pour ajouter la source de données

1. Dans le menu Données , sélectionnez Ajouter une nouvelle source de données.

2. Dans l’Assistant Configuration de source de données, créez une connexion à la base de données Northwind à l’aide d’un jeu de données. Pour plus d'informations, consultez How to: Connect to Data in a Database.

3. Quand vous y êtes invité par l’Assistant Configuration de source de données, enregistrez la chaîne de connexion comme NorthwindConnectionString.

   Important

   Le stockage d'informations sensibles (telles qu'un mot de passe) dans la chaîne de connexion peut affecter la sécurité de votre application. L’utilisation de l’authentification Windows, également appelée sécurité intégrée, est un moyen plus sécurisé de contrôler l’accès à une base de données. Pour plus d’informations, consultez Protection des informations de connexion.

4. Lorsque vous êtes invité à choisir vos objets de base de données, sélectionnez les Customers tables et Orders nommez le jeu NorthwindDataSetde données généré.

Liaison à la source de données

Le System.Windows.Forms.BindingSource composant 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

1. Ouvrez le fichier code-behind nommé MainWindow.xaml.vb ou MainWindow.xaml.cs.

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

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

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

3. Copiez le code suivant dans le constructeur.

   Ce code crée et initialise le BindingSource composant.

   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
   

4. Ouvrez MainWindow.xaml.

5. En mode Création ou en mode XAML, sélectionnez l’élément Window .

6. Dans la fenêtre Propriétés, cliquez sur l’onglet Événements.

7. Double-cliquez sur l’événement Loaded .

8. Copiez le code suivant dans le gestionnaire d’événements Loaded .

   Ce code affecte le BindingSource composant en tant que contexte de données et remplit les Customers objets et Orders adaptateurs.

   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
   

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

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

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

Voir aussi

• ElementHost
• WindowsFormsHost
• Concevoir en XAML dans Visual Studio
• Exemple de liaison de données dans les applications hybrides
• Procédure pas à pas : hébergement d'un contrôle composite Windows Forms dans WPF
• Procédure pas à pas : hébergement d’un contrôle composite WPF dans les Windows Forms