Condividi tramite

Procedura dettagliata: associazione ai dati in applicazioni ibride

Aggiornamento: novembre 2007

L'associazione di un'origine dati a un controllo è fondamentale per fornire agli utenti l'accesso ai dati sottostanti, che si utilizzi Windows Form o WPF. In questa procedura dettagliata viene illustrato come utilizzare l’associazione dati in applicazioni ibride che includono controlli Windows Form 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.

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

Nota

Le finestre di dialogo e i comandi di menu visualizzati potrebbero non corrispondere a quelli descritti nella Guida in linea in quanto dipendono dall'edizione o dalle impostazioni in uso. Per modificare le impostazioni, scegliere Importa/esporta impostazioni dal menu Strumenti. Per ulteriori informazioni, vedere Impostazioni di Visual Studio.

Prerequisiti

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

  • Visual Studio 2008.

  • Accedere al database di esempio Northwind eseguito in Microsoft SQL Server.

Creazione del progetto

Per creare e configurare il progetto

  1. Creare un progetto di applicazione WPF denominato WPFWithWFAndDatabinding.

  2. In Esplora soluzioni, aggiungere un riferimento all'assembly WindowsFormsIntegration, denominato WindowsFormsIntegration.dll.

  3. In Esplora soluzioni, aggiungere un riferimento all'assembly Windows Form, denominato System.Windows.Forms.dll.

  4. Aprire Window1.xaml in WPF Designer.

  5. All'inizio del file eseguire il mapping degli spazi dei nomi Windows Form al codice riportato di seguito.

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

  6. Denominare l'elemento Grid predefinito mainGrid assegnando la proprietà Name.

    <Grid x:Name="mainGrid">

     <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 seguente nella dichiarazione dell'elemento 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>

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

         <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 riportato di seguito 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>

         <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 riportato di seguito 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>

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

Per visualizzare dati nel controllo DataGridView

  • Copiare il codice riportato di seguito 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>

         <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

  1. Scegliere Aggiungi nuova origine dati dal menu Progetto.

  2. Nella Configurazione guidata origine dati fare clic su Nuova connessione per creare una connessione al database Northwind. Per ulteriori informazioni, vedere Procedura: connettersi ai dati di un database.

  3. Quando viene richiesto da Configurazione guidata origine dati, salvare la stringa di connessione come NorthwindConnectionString.

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

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

  2. Copiare il codice riportato di seguito nella definizione della classe Window1.

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

  3. Copiare il codice riportato di seguito nel costruttore Window1, immediatamente dopo la chiamata al metodo InitializeComponent.

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

  4. Copiare il codice riportato di seguito nella definizione della classe Window1, dopo il costruttore.

    In questo codice viene definito il gestore eventi Loaded che assegna il componente BindingSource come contesto dati e compila gli oggetti adattatore Customers e 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);
}

  5. Copiare il codice riportato di seguito nella definizione della classe Window1, dopo il metodo WindowLoaded.

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

  6. Premere F5 per compilare ed eseguire l'applicazione.

Vedere anche

Attività

Esempio di associazione dati in applicazioni ibride

Concetti

Procedura dettagliata: hosting di controlli Windows Form compositi in Windows Presentation Foundation

Procedura dettagliata: hosting di controlli di Windows Presentation Foundation in Windows Form

Riferimenti

ElementHost

WindowsFormsHost

Altre risorse

Progettazione WPF

Procedure relative a migrazione e interoperabilità

  • Last updated on