Procedura dettagliata: associazione di controlli WPF a un dataset

Articolo
08/11/2011

In questa procedura dettagliata, verrà creata un'applicazione WPF contenente controlli associati a dati. I controlli vengono associati a record di prodotto incapsulati in un dataset. Si aggiungeranno inoltre pulsanti per scorrere i prodotti e salvare le modifiche ai record di prodotto.

Vengono illustrate le attività seguenti:

Creazione di un'applicazione WPF e di un dataset generato dai dati nel database di esempio AdventureWorksLT.
Creazione di un set di controlli associati a dati tramite trascinamento di una tabella dati dalla finestra Origini dati a una finestra di Progettazione WPF.
Creazione di pulsanti per spostarsi avanti e indietro tra i record di prodotto.
Creazione di un pulsante che consente di salvare le modifiche apportate dagli utenti ai record di prodotto nella tabella dati e nell'origine dati sottostante.

Nota

Il computer potrebbe mostrare nomi o percorsi diversi per alcuni elementi dell'interfaccia utente di Visual Studio nelle istruzioni seguenti. L'edizione di Visual Studio in uso e le impostazioni utilizzate determinano questi elementi. Per ulteriori informazioni, vedere Gestione delle impostazioni.

Prerequisiti

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

Visual Studio 2010.
Istanza in esecuzione di SQL Server o SQL Server Express a cui è collegato il database di esempio AdventureWorksLT e cui è possibile accedere. Tale database può essere scaricato dal sito Web CodePlex (informazioni in lingua inglese).

Per completare la procedura dettagliata è inoltre consigliabile conoscere già i concetti riportati di seguito:

Dataset e TableAdapter. Per ulteriori informazioni, vedere Utilizzo di dataset in Visual Studio e Cenni preliminari sugli oggetti TableAdapter.
Utilizzo di Progettazione WPF. Per ulteriori informazioni, vedere Cenni preliminari su WPF e Silverlight Designer.
Associazione dati WPF. Per ulteriori informazioni, vedere Data Binding Overview.

Creazione del progetto

Creare un nuovo progetto WPF. Il progetto visualizzerà i record di prodotto.

Per creare il progetto

Avviare Visual Studio.
Scegliere Nuovo dal menu File, quindi Progetto.
Espandere Visual Basic o Visual C#, quindi selezionare Finestre.
Selezionare il modello di progetto Applicazione WPF.
Nella casella Nome digitare AdventureWorksProductsEditor, quindi fare clic su OK.

Visual Studio crea il progetto AdventureWorksProductsEditor.

Creazione di un dataset per l'applicazione

Prima di poter creare i controlli associati a dati, è necessario definire un modello di dati per l'applicazione e aggiungerlo alla finestra Origini dati. In questa procedura dettagliata, si crea un dataset da utilizzare come modello di dati.

Per creare un dataset

Scegliere Mostra origini dati dal menu Dati.

Verrà visualizzata la finestra Origini dati.
Nella finestra Origini dati fare clic su Aggiungi nuova origine dati.

Verrà avviata la Configurazione guidata origine dati.
Nella pagina Seleziona un tipo di origine dati selezionare Database, quindi fare clic su Avanti.
Nella pagina Scegli modello database selezionare DataSet e scegliere Avanti.
Nella pagina Seleziona connessione dati selezionare una delle seguenti opzioni:
- Selezionare la connessione dati al database di esempio AdventureWorksLT nell'elenco a discesa, se presente, quindi scegliere Avanti.
  
  oppure
- Fare clic su Nuova connessione e creare una connessione al database AdventureWorksLT.
Nella pagina Salva la stringa di connessione nel file di configurazione applicazione selezionare la casella di controllo Sì, salva la connessione con nome, quindi scegliere Avanti.
Nella pagina Seleziona oggetti di database espandere il nodo Tabelle, quindi selezionare la tabella Product (SalesLT).
Scegliere Fine.

Vengono aggiunti un nuovo file AdventureWorksLTDataSet.xsd al progetto e un elemento AdventureWorksLTDataSet corrispondente alla finestra Origini dati. Il file AdventureWorksLTDataSet.xsd definisce un dataset tipizzato denominato AdventureWorksLTDataSet e un TableAdapter denominato ProductTableAdapter. Più avanti in questa procedura dettagliata, si utilizzerà ProductTableAdapter per riempire il dataset con i dati e salvare nuovamente le modifiche nel database.
Compilare il progetto.

Modifica del metodo di riempimento predefinito del TableAdapter

Per riempire il dataset con i dati, utilizzare il metodo Fill di ProductTableAdapter. Per impostazione predefinita, il metodo Fill riempie ProductDataTable in AdventureWorksLTDataSet con tutte le righe di dati della tabella Product. È possibile modificare questo metodo in modo da restituire solo un sottoinsieme delle righe. Per questa procedura dettagliata, modificare il metodo Fill in modo da restituire solo le righe relative ai prodotti che dispongono di foto.

Per caricare le righe dei prodotti che dispongono di foto

In Esplora soluzioni fare doppio clic sul file AdventureWorksLTDataSet.xsd.

Verrà aperto Progettazione DataSet.
Nella finestra di progettazione fare clic con il pulsante destro del mouse sulla query Fill,GetData() e scegliere Configura.

Verrà avviata la Configurazione guidata TableAdapter.
Nella pagina Immettere un'istruzione SQL aggiungere la clausola WHERE seguente dopo l'istruzione SELECT nella casella di testo.
```
WHERE ThumbnailPhotoFileName <> 'no_image_available_small.gif'
```
Scegliere Fine.

Definizione dell'interfaccia utente

Aggiungere alcuni pulsanti alla finestra modificando il codice XAML in Progettazione WPF. Più avanti in questa procedura dettagliata, si aggiungerà il codice che consente agli utenti di scorrere e salvare le modifiche ai record dei prodotti tramite questi pulsanti.

Per definire l'interfaccia utente della finestra

In Esplora soluzioni fare doppio clic su MainWindow.xaml.

La finestra verrà aperta in Progettazione WPF.

Nella visualizzazione XAML della finestra di progettazione aggiungere il codice seguente tra i tag <Grid>:

<Grid.RowDefinitions>
    <RowDefinition Height="75" />
    <RowDefinition Height="625" />
</Grid.RowDefinitions>
<Button HorizontalAlignment="Left" Margin="22,20,0,24" Name="backButton" Width="75">&lt;</Button>
<Button HorizontalAlignment="Left" Margin="116,20,0,24" Name="nextButton" Width="75">&gt;</Button>
<Button HorizontalAlignment="Right" Margin="0,21,46,24" Name="saveButton" Width="110">Save changes</Button>

Compilare il progetto.

Creazione di controlli con associazione a dati

Creare controlli che consentono di visualizzare i record cliente tramite trascinamento della tabella Product dalla finestra Origini dati a Progettazione WPF.

Per creare controlli associati a dati

Nella finestra Origini dati fare clic sul menu a discesa relativo al nodo Product, quindi selezionare Dettagli.
Espandere il nodo Product.
Poiché per questo esempio alcuni campi non verranno visualizzati, fare clic sul menu a discesa accanto ai nodi seguenti e selezionare Nessuno:
- ProductCategoryID
- ProductModelID
- ThumbnailPhotoFileName
- rowguid
- ModifiedDate
Fare clic sul menu a discesa accanto al nodo ThumbNailPhoto e selezionare Image.

Nota

Per impostazione predefinita, il controllo predefinito degli elementi nella finestra Origini dati che rappresentano immagini è impostato su Nessuno, dal momento che le immagini vengono archiviate come matrici byte nei database e le matrici byte possono contenere qualsiasi elemento, da una matrice semplice di byte al file eseguibile di un'applicazione di grandi dimensioni.
Dalla finestra Origini dati trascinare il nodo Product nella riga della griglia sotto la riga contenente i pulsanti.

Visual Studio genera il codice XAML che definisce un set di controlli associati a dati nella tabella Products. Genera inoltre il codice che carica i dati. Per ulteriori informazioni sul linguaggio XAML e sul codice generati, vedere Associazione di controlli WPF ai dati in Visual Studio.
Nella finestra di progettazione fare clic sulla casella di testo accanto all'etichetta ID prodotto.
Nella finestra Proprietà selezionare la casella di controllo accanto alla proprietà IsReadOnly.

Esplorazione dei record di prodotto

Aggiungere il codice che consente agli utenti di scorrere i record di prodotto utilizzando i pulsanti < e >.

Per consentire agli utenti di esplorare i record di prodotto

Nella finestra di progettazione fare doppio clic sul pulsante < nell'area della finestra.

In Visual Studio viene aperto il file code-behind e creato un nuovo gestore dell'evento backButton_Click per l'evento Click.

Modificare il gestore dell'evento Window_Loaded in modo che ProductViewSource, AdventureWorksLTDataSet e AdventureWorksLTDataSetProductTableAdapter siano esterni al metodo e accessibili all'intero form. Dichiararli come globali per il form e assegnarli all'interno del gestore dell'evento Window_Loaded analogo al seguente:

Dim ProductViewSource As System.Windows.Data.CollectionViewSource
Dim AdventureWorksLTDataSet As AdventureWorksProductsEditor.AdventureWorksLTDataSet
Dim AdventureWorksLTDataSetProductTableAdapter As AdventureWorksProductsEditor.AdventureWorksLTDataSetTableAdapters.ProductTableAdapter

Private Sub Window_Loaded(ByVal sender As System.Object, ByVal e As System.Windows.RoutedEventArgs) Handles MyBase.Loaded
    AdventureWorksLTDataSet = CType(Me.FindResource("AdventureWorksLTDataSet"), AdventureWorksProductsEditor.AdventureWorksLTDataSet)
    'Load data into the table Product. You can modify this code as needed.
    AdventureWorksLTDataSetProductTableAdapter = New AdventureWorksProductsEditor.AdventureWorksLTDataSetTableAdapters.ProductTableAdapter()
    AdventureWorksLTDataSetProductTableAdapter.Fill(AdventureWorksLTDataSet.Product)
    ProductViewSource = CType(Me.FindResource("ProductViewSource"), System.Windows.Data.CollectionViewSource)
    ProductViewSource.View.MoveCurrentToFirst()
End Sub

private AdventureWorksProductsEditor.AdventureWorksLTDataSet AdventureWorksLTDataSet;
private AdventureWorksProductsEditor.AdventureWorksLTDataSetTableAdapters.ProductTableAdapter adventureWorksLTDataSetProductTableAdapter;
private System.Windows.Data.CollectionViewSource productViewSource;

private void Window_Loaded(object sender, RoutedEventArgs e)
{
    AdventureWorksLTDataSet = ((AdventureWorksProductsEditor.AdventureWorksLTDataSet)(this.FindResource("adventureWorksLTDataSet")));
    // Load data into the table Product. You can modify this code as needed.
    adventureWorksLTDataSetProductTableAdapter = new AdventureWorksProductsEditor.AdventureWorksLTDataSetTableAdapters.ProductTableAdapter();
    adventureWorksLTDataSetProductTableAdapter.Fill(AdventureWorksLTDataSet.Product);
    productViewSource = ((System.Windows.Data.CollectionViewSource)(this.FindResource("productViewSource")));
    productViewSource.View.MoveCurrentToFirst();
}

Aggiungere il codice seguente al gestore eventi backButton_Click:

If ProductViewSource.View.CurrentPosition > 0 Then
    ProductViewSource.View.MoveCurrentToPrevious()
End If

if (productViewSource.View.CurrentPosition > 0)
{
    productViewSource.View.MoveCurrentToPrevious();
}

Tornare alla finestra di progettazione e fare doppio clic sul pulsante >.

Aggiungere il codice seguente al gestore eventi nextButton_Click:

If ProductViewSource.View.CurrentPosition < CType(ProductViewSource.View, CollectionView).Count - 1 Then
    ProductViewSource.View.MoveCurrentToNext()
End If

if (productViewSource.View.CurrentPosition < ((CollectionView)productViewSource.View).Count - 1)
{
    productViewSource.View.MoveCurrentToNext();
}

Salvataggio delle modifiche ai record di prodotto

Aggiungere il codice che consente agli utenti di salvare le modifiche ai record di prodotto utilizzando il pulsante Salva modifiche.

Per aggiungere la possibilità di salvare le modifiche ai record di prodotto

Nella finestra di progettazione fare doppio clic sul pulsante Salva modifiche.

Visual Studio apre il file code-behind e crea un nuovo gestore eventi saveButton_Click per l'evento Click.
Aggiungere il codice seguente al gestore eventi saveButton_Click:
```
AdventureWorksLTDataSetProductTableAdapter.Update(AdventureWorksLTDataSet.Product)
```
```
adventureWorksLTDataSetProductTableAdapter.Update(AdventureWorksLTDataSet.Product);
```
Nota

Nell'esempio riportato di seguito viene utilizzato il metodo Save di TableAdapter per salvare le modifiche, adatto a questa procedura dettagliata, in quanto viene modificata una sola tabella dati. Se è necessario salvare modifiche a più tabelle dati, è possibile utilizzare in alternativa il metodo UpdateAll di TableAdapterManager generato da Visual Studio con il dataset. Per ulteriori informazioni, vedere Panoramica di TableAdapterManager.

Verifica dell'applicazione

Compilare ed eseguire l'applicazione. Verificare che sia possibile visualizzare e aggiornare record di prodotto.

Per eseguire il test dell'applicazione

Premere F5.

L'applicazione viene compilata ed eseguita. Verificare quanto segue:
- Nelle caselle di testo vengono visualizzati i dati dal primo record di prodotto che dispone di una foto. Questo prodotto dispone dell'ID prodotto 713 e del nome Long-Sleeve Logo Jersey, S.
- È possibile fare clic sui pulsanti > o < per spostarsi tra gli altri record di prodotto.
In uno dei record di prodotto modificare il valore Dimensione, quindi fare clic su Salva modifiche.
Chiudere l'applicazione, quindi riavviarla premendo F5 in Visual Studio.
Passare al record di prodotto modificato e verificare che la modifica persista.
Chiudere l'applicazione.

Passaggi successivi

Dopo avere completato questa procedura dettagliata, è possibile eseguire le attività correlate seguenti:

Imparare a utilizzare la finestra Origini dati in Visual Studio per associare i controlli WPF ad altri tipi di origini dati. Per ulteriori informazioni, vedere Procedura dettagliata: associazione di controlli WPF a un servizio dati WCF e Procedura dettagliata: associazione di controlli WPF a un Entity Data Model.
Imparare a utilizzare la finestra Origini dati in Visual Studio per visualizzare i dati correlati (ovvero, i dati in una relazione padre-figlio) nei controlli WPF. Per ulteriori informazioni, vedere Procedura dettagliata: visualizzazione dei dati correlati in un'applicazione WPF.