Partager via

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

  • Article

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

Composants requis

Pour exécuter cette procédure pas à pas, vous devez disposer des composants suivants :

  • Visual Studio 2010.

  • 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

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

  2. Dans l'Explorateur de solutions, ajoutez une référence 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. NommezGrid l'élément mainGrid par défaut en attribuant la propriété Name.

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

Pour paramétrer 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 paramétrer 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 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 XAML suivant dans la déclaration de l'é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>

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

  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 dataset. Pour plus d'informations, consultez Comment : établir une connexion à des données d'une base de données.

  3. Lorsque vous êtes invités par l'Assistant Configuration de source de données, enregistrez la chaîne de connexion en tant que NorthwindConnectionString.

  4. Lorsque vous êtes invité à choisir vos objets de base de données, sélectionnez les tables Customers et Orders, puis 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

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

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

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

  3. Copiez le code suivant dans le constructeur.

    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 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. Ouvrez MainWindow.xaml.

  5. En mode Design ou 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 composant BindingSource en tant que contexte de données et remplit les objets d'adaptateur Customers et 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. Copiez le code suivant dans la définition de classe MainWindow.

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

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

Voir aussi

Référence

ElementHost

WindowsFormsHost

Concepts

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

Autres ressources

Concepteur WPF

Liaison de données dans des applications hybrides, exemple

Historique des modifications

Date

Historique

Motif

Août 2010

Mise à niveau pour Visual Studio 2010.

Commentaires client.