Procedura dettagliata: associazione ai dati in applicazioni ibride

Articolo
10/18/2023

L'associazione di un'origine dati a un controllo è essenziale per fornire agli utenti l'accesso ai dati sottostanti, indipendentemente dal fatto che si usi Windows Form o WPF. Questa procedura dettagliata illustra come usare il data binding nelle applicazioni ibride che includono sia controlli Windows Form che WPF.

Le attività illustrate nella procedura dettagliata sono le seguenti:

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

Per un listato di codice completo delle attività illustrate in questa procedura dettagliata, vedere Esempio di associazione dati in applicazioni ibride.

Al termine, si conosceranno le funzionalità di associazione dati nelle applicazioni ibride.

Prerequisiti

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

Visual Studio.
Accesso al database di esempio Northwind eseguito su Microsoft SQL Server.

Creazione del progetto

Per creare e impostare il progetto

Creare un progetto di applicazione WPF denominato WPFWithWFAndDatabinding.
In Esplora soluzioni aggiungere riferimenti agli assembly seguenti.
- WindowsFormsIntegration
- System.Windows.Forms
Aprire MainWindow.xaml nella finestra di progettazione WPF.
Nell'elemento Window aggiungere il mapping degli spazi dei nomi Windows Form seguente.
```
xmlns:wf="clr-namespace:System.Windows.Forms;assembly=System.Windows.Forms"
```
Assegnare un nome all'elemento mainGrid predefinito Grid assegnando la Name proprietà .
```
<Grid x:Name="mainGrid">
```

Definizione del modello dati

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

Per definire il modello di dati

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

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

Specifica del layout del form

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

Per impostare il layout Grid

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

<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 impostare i controlli Label

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

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

Specifica delle associazioni dati

L'elenco principale dei clienti viene visualizzato in un ListBox controllo . L'oggetto associato ListItemsTemplate associa un TextBlock controllo al ContactName campo dal database.

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

Per specificare le associazioni dati

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

La Binding classe associa i TextBox controlli ai campi appropriati nel 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'interoperabilità

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

Per visualizzare i dati nel controllo DataGridView

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

<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

Con Visual Studio è possibile aggiungere facilmente un'origine dati al progetto. Con questa procedura vengono aggiunti dati fortemente tipizzati al progetto. Vengono anche aggiunte altre classi di supporto, ad esempio adattatori di tabelle.

Per aggiungere l'origine dati

Scegliere Aggiungi nuova origine dati dal menu Dati.
In Configurazione guidata origine dati creare una connessione al database Northwind utilizzando un set di dati. Per altre informazioni, vedere Procedura: Connettersi ai dati in un database.
Quando richiesto dalla Configurazione guidata origine dati, salvare la stringa di connessione come NorthwindConnectionString.
Quando viene richiesto di scegliere gli oggetti di database, selezionare le Customers tabelle e Orders e denominare il set NorthwindDataSetdi dati generato.

Associazione all'origine dati

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

Per associare l'origine dati

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

Copiare il codice seguente nella definizione della MainWindow classe.

Questo codice dichiara il BindingSource componente e le classi helper associate che si connettono al database.

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

Copiare il seguente codice nel costruttore.

Questo codice crea e inizializza il BindingSource componente.

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

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

Copiare il codice seguente nel Loaded gestore eventi.

Questo codice assegna il BindingSource componente come contesto dati e popola gli Customers oggetti adapter e Orders .

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

Copiare il codice seguente nella definizione della MainWindow classe.

Questo metodo gestisce l'evento CurrentChanged e aggiorna l'elemento corrente del data binding.

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

Premere F5 per compilare ed eseguire l'applicazione.

Vedi anche