Procedura dettagliata: associazione ai dati in applicazioni ibride

Articolo
08/11/2011

L'associazione di un'origine dati a un controllo è fondamentale per fornire agli utenti l'accesso ai dati sottostanti, sia che si utilizzi Windows Forms o WPF. In questa procedura dettagliata viene illustrato come utilizzare l’associazione dati in applicazioni ibride che includono controlli Windows Forms e controlli WPF.

Di seguito vengono elencate le attività illustrate nella procedura dettagliata:

Creazione del progetto.
Definizione del modello di dati.
Definizione del layout del form.
Definizione delle associazioni dati.
Visualizzazione dei dati utilizzando l'interoperabilità.
Aggiunta dell'origine dati al progetto.
Associazione all'origine dati.

Per un elenco di codice completo delle attività illustrate in questa procedura dettagliata, vedere Esempio di associazione dati in applicazioni ibride (la pagina potrebbe essere in inglese).

Questa procedura consente di approfondire le funzionalità dell'associazione dati nelle applicazioni ibride.

Prerequisiti

Per completare la procedura dettagliata, è necessario disporre dei componenti seguenti:

Visual Studio 2010.
Accedere al database di esempio Northwind eseguito in Microsoft SQL Server.

Creazione del progetto

Per creare e configurare il progetto

Creare un progetto di applicazione WPF denominato WPFWithWFAndDatabinding.
In Esplora soluzioni aggiungere riferimenti agli assembly indicati di seguito.
- WindowsFormsIntegration
- System.Windows.Forms
Aprire MainWindow.xaml in WPF Designer.
Nell'elemento Window aggiungere il mapping degli spazi dei nomi Windows Forms seguente.
```
xmlns:wf="clr-namespace:System.Windows.Forms;assembly=System.Windows.Forms"
```
Denominare l'elemento Grid predefinito mainGrid assegnando la proprietà Name.
```
    <Grid x:Name="mainGrid">
```

Definizione del modello di dati

L'elenco principale di clienti viene visualizzato in un controllo ListBox. Nell'esempio di codice riportato di seguito viene definito un oggetto DataTemplate denominato ListItemsTemplate che controlla la struttura ad albero visuale del controllo ListBox. Questo oggetto DataTemplate viene assegnato alla proprietà ItemTemplate del controllo ListBox.

Per definire il modello di dati

Copiare il codice XAML seguente nella dichiarazione dell'elemento Grid.

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

Definizione del layout del form

Il layout del form è definito da una griglia con tre righe e tre colonne. I controlli Label sono forniti per identificare ogni colonna nella tabella Customers.

Per impostare il layout della griglia

Copiare il codice XAML seguente nella dichiarazione dell'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>

Per configurare i controlli Label

Copiare il codice XAML seguente nella dichiarazione dell'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>

Definizione delle associazioni dati

L'elenco principale di clienti viene visualizzato in un controllo ListBox. L'oggetto ListItemsTemplate collegato associa un controllo TextBlock al campo ContactName del database.

I dettagli di ogni record cliente vengono visualizzati in molti controlli TextBox.

Per definire le associazioni dati

Copiare il codice XAML seguente nella dichiarazione dell'elemento Grid.

La classe Binding associa i controlli TextBox ai campi appropriati del database.

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

Visualizzazione dei dati utilizzando l'interazione

Gli ordini corrispondenti al cliente selezionato vengono visualizzati in un controllo System.Windows.Forms.DataGridView denominato dataGridView1. Il controllo dataGridView1 è associato all'origine dati nel file code-behind. Un controllo WindowsFormsHost è l'elemento padre di questo controllo Windows Forms.

Per visualizzare dati nel controllo DataGridView

Copiare il codice XAML seguente nella dichiarazione dell'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>

Aggiunta dell'origine dati al progetto

In Visual Studio è possibile aggiungere con facilità un'origine dati al progetto. Tramite questa procedura viene aggiunto un dataset fortemente tipizzato al progetto. Vengono inoltre aggiunte altre classi di supporto, ad esempio adattatori di tabella per ognuna delle tabelle scelte.

Per aggiungere l'origine dati

Scegliere Aggiungi nuova origine dati dal menu Dati.
Nella Configurazione guidata origine dati creare una connessione al database Northwind utilizzando un dataset. Per ulteriori informazioni, vedere Procedura: connettersi ai dati di un database.
Quando viene richiesto da Configurazione guidata origine dati, salvare la stringa di connessione come NorthwindConnectionString.
Quando viene richiesto di scegliere gli oggetti di database, selezionare le tabelle Customers e Orders e denominare il dataset generato NorthwindDataSet.

Associazione all'origine dati

Il componente System.Windows.Forms.BindingSource fornisce un'interfaccia uniforme per l'origine dati dell'applicazione. L'associazione all'origine dati è implementata nel file code-behind.

Per eseguire l'associazione all'origine dati

Aprire il file code-behind denominato MainWindow.xaml.vb o MainWindow.xaml.cs.

Copiare il codice riportato di seguito nella definizione della classe MainWindow.

In questo codice viene dichiarato il componente BindingSource e classi di supporto associate per la connessione al database.

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

Copiare il codice riportato di seguito nel costruttore.

Tramite questo codice viene creato e inizializzato il 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;
}

Aprire MainWindow.xaml.
In visualizzazione Progettazione o XAML selezionare l'elemento Window.
Nella finestra Proprietà fare clic sulla scheda Eventi.
Fare doppio clic sull'evento Loaded.

Copiare il codice riportato di seguito nel gestore eventi Loaded:

Mediante questo codice viene assegnato il componente BindingSource come contesto dati e vengono compilati gli oggetti adattatore Customers e 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);
}

Copiare il codice riportato di seguito nella definizione della classe MainWindow.

Questo metodo gestisce l'evento CurrentChanged e aggiorna l'elemento corrente dell'associazione dati.

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

Premere F5 per compilare ed eseguire l'applicazione.

Vedere anche

Riferimenti

WindowsFormsHost

Concetti

Procedura dettagliata: hosting di controlli Windows Form compositi in WPF

Procedura dettagliata: hosting di controlli compositi di WPF in Windows Form

Altre risorse

Esempio di associazione dati in applicazioni ibride

Cronologia delle modifiche

Agosto 2010

Aggiornamento per Visual Studio 2010

Commenti e suggerimenti dei clienti.