Esercitazione: visualizzare i dati da un database SQL di esempio

In Microsoft Expression Blend è possibile utilizzare origini dati XML e origini dati oggetto CLR (Common Language Runtime). Le origini dati XML sono semplici da utilizzare mentre le origini dati oggetto CLR sono molto più complesse. Nelle procedure seguenti viene illustrato come visualizzare i dati di un'origine dati oggetto CLR in un'applicazione Expression Blend. Le prime due attività prevedono il recupero dei dati da un database di esempio e la conversione di questi ultimi in un formato che può essere utilizzato in Expression Blend per creare un'associazione dati. La terza attività prevede la creazione di un progetto di Expression Blend contenente oggetti associati ai dati.

[!NOTA]

Per informazioni sulle applicazioni Microsoft Silverlight, vedere Associazione dati  su MSDN.

[!NOTA]

Per eseguire le procedure illustrate in questo argomento esattamente come sono descritte, è necessario che nel computer in uso siano installati Microsoft Visual Studio 2010 e Microsoft SQL Server 2008 con il database di esempio AdventureWorks. Per ulteriori informazioni su come ottenere il database di esempio AdventureWorks, vedere Installazione dei database di esempio AdventureWorks e degli esempi  su MSDN.

Se lo si desidera, è possibile creare un oggetto DataTable o DataSet utilizzando un altro database. In questo caso è possibile modificare le prime due attività di questo argomento in base ai dati disponibili. I principi saranno gli stessi, purché si utilizzi un'origine dati CLR o Microsoft .NET Framework.

Per definire e riempire un oggetto DataTable

Nella procedura seguente viene illustrato come creare una libreria di classi in Visual Studio 2010 per popolare un'istanza di un oggetto DataTable con i dati del database di esempio AdventureWorks.

1. Scegliere Nuovo dal menu File di Visual Studio 2010 e quindi Progetto.

2. Nella finestra di dialogo Nuovo progetto fare clic su Visual C# in Tipi di progetto. In Modelli fare clic su Libreria di classi. Assegnare il nome AWDataSource al nuovo progetto e quindi fare clic su OK.

   In Visual Studio verrà generato il codice per il nuovo progetto Libreria di classi e verrà aperto il file Class1.cs per la modifica.

3. Nel file Class1.cs modificare il nome della definizione della classe pubblica da Class1 a ProductPhotosCollection, che è più descrittivo.

4. In Esplora soluzioni fare clic con il pulsante destro del mouse sul nome del progetto, AWDataSource, e quindi scegliere Nuovo elemento dal menu Aggiungi.

5. Nella finestra di dialogo Aggiungi nuovo elemento selezionare DataSet nell'elenco dei modelli, assegnare all'elemento il nome ProductPhotos.xsd e quindi fare clic su Aggiungi.

   Al progetto verranno aggiunti un DataSet, sotto forma di file di schema, e alcuni file di classi di supporto. Il file di schema verrà inoltre aperto per la modifica.

   [!NOTA]

   Un DataSet è un oggetto che contiene tabelle dati che è possibile utilizzare per archiviare temporaneamente dati in memoria durante l'esecuzione dell'applicazione. Per ulteriori informazioni, vedere Cenni preliminari sui dataset in Visual Studio  su MSDN.

6. In Esplora server fare clic con il pulsante destro del mouse su Connessioni dati e quindi scegliere Aggiungi connessione.

7. Nella finestra di dialogo Scegli origine dati, nel campo Origine dati dovrebbe già essere visualizzata l'opzione Microsoft SQL Server (SqlClient).

   Suggerimento:
   Se non si desidera utilizzare un database di SQL Server, fare clic su Modifica e selezionare un'origine dati alternativa. I passaggi seguenti non corrispondono a quanto visualizzato nella finestra di dialogo Scegli origine dati di Visual Studio.

8. Nel campo Nome server immettere il nome dell'istanza di SQL Server in cui è installato il database AdventureWorks.

   Suggerimento:
   Se si desidera utilizzare un database di SQL Server diverso da AdventureWorks, selezionare il nome del server in cui è installato il database di SQL Server desiderato.

9. In Accesso al server selezionare il metodo di autenticazione necessario per l'accesso all'istanza di SQL Server desiderata. Per ottenere questa informazione è necessario contattare l'amministratore del server. Per l'Autenticazione di Windows vengono utilizzate le credenziali di accesso correnti. Per l'Autenticazione SQL Server sono necessari il nome utente e la password dell'account configurato per l'accesso al database.

10. In Connessione al database selezionare il database AdventureWorks, che viene visualizzato solo se le credenziali di accesso sono corrette, se il database AdventureWorks è installato nel computer in uso e se tale computer esegue SQL Server.

11. Fare clic su Test connessione. Se il test di connessione ha esito negativo, contattare l'amministratore di SQL Server per richiedere assistenza.

12. Per completare la creazione della connessione dati, fare clic su OK. Nel nodo Connessioni dati di Esplora server verrà visualizzata una nuova connessione dati denominata <servername>.AdventureWorks.dbo, dove <servername> è il nome del server in uso.

13. In Esplora server espandere il nodo della nuova connessione, <servername>.AdventureWorks.dbo, espandere il nodo Tabelle e quindi individuare la tabella ProductPhoto. Con il file ProductPhotos.xsd aperto nell'area di progettazione, trascinare la tabella ProductPhoto da Esplora server all'area di progettazione. A questo punto è disponibile un dataset tipizzato che consente di connettersi al database AdventureWorks e di restituire il contenuto della tabella ProductPhoto.

14. Nel file Class1.cs aggiungere il metodo seguente nella classe ProductPhotosCollection:

    private void GetData()
        {
            ProductPhotosTableAdapters.ProductPhotoTableAdapter da =
                new ProductPhotosTableAdapters.ProductPhotoTableAdapter();
            ProductPhotos.ProductPhotoDataTable dt = da.GetData();
        }
    

    Lo spazio dei nomi ProductPhotosTableAdapters è definito nel file ProductPhotos.Designer.cs, generato da Visual Studio durante la creazione di ProductPhotos DataSet. A questo punto si dispone di un metodo che consente di caricare dati in un'istanza di un oggetto ProductPhotos DataTable durante l'esecuzione dell'applicazione.

15. Generare il progetto (CTRL+MAIUSC+B) per verificare che non contenga errori.

Per adattare l'insieme di dati a un insieme WPF

Nella procedura seguente viene illustrato come creare una libreria di classi in Visual Studio 2010 per convertire dati da un oggetto DataTable in un oggetto ObservableCollection, in modo da consentire la creazione di associazioni dati da parte di Expression Blend o qualsiasi applicazione che utilizza Windows Presentation Foundation (WPF). Sarà necessario definire una classe ProductPhoto per rappresentare i dati in una riga di tabella, aggiungere un insieme di oggetti ProductPhotos a ProductPhotosCollection come membro privato e quindi aggiungere una funzione di accesso pubblica, costituita da un metodo get, per consentire l'accesso alla classe da parte di codice esterno.

Suggerimento:
Se è stata eseguita la procedura precedente di questo argomento, a questo punto è disponibile un'istanza DataTable che contiene dati della tabella ProductPhoto del database AdventureWorks. Se si dispone di un oggetto DataTable o DataSet contenente dati di un'altra origine, nei passaggi successivi è possibile modificare il nome della tabella dati e dei campi in base ai dati disponibili.

1. In Visual Studio 2010 fare clic con il pulsante destro del mouse sul nome del progetto in Esplora soluzioni e quindi scegliere Aggiungi riferimento. Nella scheda .NET selezionare l'assembly WindowsBase. Se l'assembly WindowsBase non è presente nell'elenco, fare clic sulla scheda Sfoglia e individuare l'assembly WindowsBase.dll nella cartella %SystemDrive%\Programmi\Reference Assemblies\Microsoft\Framework\v3.0.

2. Fare clic su OK. L'assembly WindowsBase implementa la classe System.Collections.Object.ObservableCollection.

3. All'inizio del file Class1.cs aggiungere l'istruzione seguente:

   using System.Collections.ObjectModel;
   

4. Sempre nel file Class1.cs aggiungere la definizione seguente della classe ProductPhoto allo spazio dei nomi AWDataSource, per avere a disposizione una classe da utilizzare:

   public class ProductPhoto { }
   

5. Aggiungere il membro seguente alla classe ProductPhotosCollection:

   private ObservableCollection<ProductPhoto> productPhotos =
       new ObservableCollection<ProductPhoto>();
   

6. Aggiungere il seguente metodo della funzione di accesso alla classe ProductPhotosCollection:

   public ObservableCollection<ProductPhoto> ProductPhotos
   { get { return this.productPhotos; } }
   

   Nei passaggi successivi verranno copiati l'ID, la data di modifica e le due foto dall'oggetto DataTable nell'oggetto ObservableCollection.

7. In Esplora soluzioni fare clic con il pulsante destro del mouse sul nome del progetto e quindi scegliere Aggiungi riferimento. Aggiungere un riferimento all'assembly PresentationCore.

8. All'inizio del file Class1.cs aggiungere le istruzioni seguenti:

   using System.Windows.Media;
   using System.Windows.Media.Imaging;
   

9. Aggiungere i membri alla classe ProductPhoto, in modo che abbia un aspetto simile al seguente:

   public class ProductPhoto
       {
           // Public Accessors to the private properties.
           public int ID { get { return id; } }
           public ImageSource ThumbNailPhoto { get { return thumbNailPhoto; } }
           public ImageSource LargePhoto { get { return largePhoto; } }
           public DateTime ModifiedDate { get { return modifiedDate; } }
   
           // Constructor.
           public ProductPhoto(int id, byte[] thumbNailPhoto, byte[] largePhoto,
               DateTime modifiedDate)
           {
               this.id = id;
               this.thumbNailPhoto = ByteArrayToImageSource(thumbNailPhoto);
               this.largePhoto = ByteArrayToImageSource(largePhoto);
               this.modifiedDate = modifiedDate;
           }
   
           // Private properties.
           private int id;
           private ImageSource thumbNailPhoto;
           private ImageSource largePhoto;
           private DateTime modifiedDate;
   
           // Supporting method.
           private ImageSource ByteArrayToImageSource(byte[] data)
           {
               BitmapImage image = null;
               if (null != data)
               {
                   image = new BitmapImage();
                   image.BeginInit();
                   image.StreamSource = new System.IO.MemoryStream(data);
                   image.EndInit();
               }
               return image;
           }
       }
   

10. Aggiungere il codice seguente alla classe ProductPhotosCollection, alla fine del metodo GetData, affinché copi l'oggetto DataTable nell'insieme ObservableCollection:

    productPhotos.Clear();
       foreach (ProductPhotos.ProductPhotoRow row in dt)
       {
           productPhotos.Add(new ProductPhoto(
               row.ProductPhotoID,
               row.ThumbNailPhoto,
               row.LargePhoto,
               row.ModifiedDate));
       }
    

    A questo punto è possibile implementare un oggetto Command per attivare facilmente il metodo ProductsPhotosCollection.GetData.

11. Scegliere Nuovo elemento dal menu File. Nella casella Nuovo elemento fare clic su Classe. Nella casella Nome digitare DelegateCommand.cs.

12. Nella nuova pagina premere CTRL+A per selezionare tutto il contenuto e quindi premere CANC. Copiare e incollare nella pagina appena creata il codice riportato di seguito.

    namespace AWDataSource
    {
        using System;
        using System.Windows.Input;
    
        ///
        /// DelegateCommand is a simplified version of ICommand in WPF. You can wrap one of these around any method,
        /// and thus bind any command on any WPF object to your method.
        ///
        /// DelegateCommand also supports an IsEnabled property that you can use to turn the command on and off.
        ///
        public sealed class DelegateCommand : ICommand
        {
            // Type signature of the method that DelegateCommand works with - returns void, no arguments.
            public delegate void SimpleEventHandler();
    
            // Remember the method so that it can be called at the right time.
            private SimpleEventHandler handler;
    
            // Maintain the enabled state.
            private bool isEnabled = true;
    
            // Simple constructor: Pass in the method that needs to be called when the command executes.
            public DelegateCommand(SimpleEventHandler handler)
            {
    this.handler = handler;
            }
    
            #region ICommand implementation
    
            // Executing the command is as simple as calling the method.
            void ICommand.Execute(object arg)
            {
     this.handler();
            }
    
            // Saying whether the command can be executed.
    ICommand.CanExecute(object arg)
            {
                return this.IsEnabled;
            }
    
            // This is the event that the command architecture of WPF listens to so it knows when to update
            // the UI on command enable/disable.
            public event EventHandler CanExecuteChanged;
            #endregion
    
            // Public visibility of the isEnabled flag - note that when it is set, the event must be raised
            // so that WPF knows to update any UI that uses this command.
            public bool IsEnabled
            {
                get { return this.isEnabled; }
                set
                {
    this.isEnabled = value;
     this.OnCanExecuteChanged();
                }
            }
    
            // Simple event propagation that makes sure that someone is listening to the event before raising it.
            private void OnCanExecuteChanged()
            {
                if (this.CanExecuteChanged != null)
                {
     this.CanExecuteChanged(this, EventArgs.Empty);
                }
            }
        }
    }
    

    Scegliere Salva dal menu File.

    Il codice contenuto nel file DelegateCommand.cs consente di associare qualsiasi comando al metodo.

13. Nel file Class1.cs aggiungere il metodo seguente alla classe ProductPhotosCollection:

    private DelegateCommand getDataCommand;
    

14. Aggiungere il costruttore seguente alla classe ProductPhotosCollection per inizializzare il comando:

    public ProductPhotosCollection()
        {
            getDataCommand = new DelegateCommand(delegate() { GetData(); });
        }
    

15. Esporre infine il comando aggiungendo il seguente metodo della funzione di accesso alla classe ProductPhotosCollection:

    public DelegateCommand GetDataCommand { get { return getDataCommand; } }
    

16. Generare il progetto (F5) per verificare che non contenga errori. A questo punto è disponibile una classe che può essere utilizzata come origine dati in un'applicazione Expression Blend o in qualsiasi applicazione WPF. Tale classe può essere ProductPhotosCollection o una classe equivalente definita dall'utente.

Per associare procedure all'origine dati in Expression Blend

Nella procedura seguente viene illustrato come creare un'applicazione Expression Blend molto semplice, che include un controllo ListBox associato all'origine dati. Per l'applicazione viene utilizzato un modello comune di progettazione dell'interfaccia utente noto come visualizzazione elenco-dettagli. Nel riquadro sinistro, denominato riquadro elenco, viene visualizzato l'elenco dei prodotti. Se si seleziona un prodotto in tale riquadro, i dettagli relativi verranno visualizzati nel riquadro destro, denominato riquadro dei dettagli. L'aggiornamento del contenuto di un riquadro quando viene selezionato un oggetto nell'altro riquadro avviene tramite sincronizzazione dei dati tra i controlli.

1. In Expression Blend scegliere Nuovo progetto dal menu File.

2. Nella finestra di dialogo Nuovo progetto selezionare il tipo di progetto Applicazione WPF. Verrà creato il progetto di un'applicazione Windows che sarà possibile generare ed eseguire direttamente in fase di progettazione. L'opzione alternativa è un progetto Libreria di controlli WPF, che è possibile utilizzare in fase di progettazione dei controlli da utilizzare in altre applicazioni Windows.

3. Nella casella di testo Nome digitare AWProductPhoto. In Linguaggio mantenere l'impostazione predefinita, poiché la procedura non prevede l'immissione manuale di codice.

4. Scegliere OK. Il nuovo progetto verrà caricato e visualizzato per la modifica da Expression Blend.

   Suggerimento:
   Se è già presente un altro progetto aperto, verrà richiesto se si desidera salvare o ignorare il progetto corrente prima di aprire il nuovo progetto.

5. Dopo il caricamento in memoria del nuovo progetto, salvarlo su disco scegliendo Salva tutto dal menu File. Nella casella di testo Nome è già visualizzato il nome AWProductPhotos. Fare clic su OK.

   Attenzione:
   Quando si lavora in Expression Blend le modifiche non vengono salvate automaticamente sull'unità disco rigido. È quindi consigliabile salvare spesso i file manualmente, sin dall'inizio. Per ulteriori informazioni, vedere Gestione di soluzione, progetti e file.

6. Scegliere Aggiungi riferimento dal menu Progetto.

7. Nella finestra di dialogo Aggiungi riferimento cercare e selezionare il file AWDataSource.dll file generato al termine della seconda attività di questo argomento, per aggiungere un riferimento a tale file. Il file AWDataSource.dll si trova nella cartella bin/Debug del progetto AWDataSource.

8. Fare clic su OK. Il file AWDataSource.dll verrà inserito nel progetto. Se si espande il nodo Riferimenti all'interno del pannello Progetti, verrà visualizzato un riferimento al file AWDataSource.dll.

9. Nel pannello Dati fare clic su Crea origine dati  e quindi su Crea origine dati oggetto.

10. Nella finestra di dialogo Crea origine dati oggetto espandere il nodo AWDataSource, selezionare ProductPhotosCollection e quindi fare clic su OK.

    Nel pannello Dati, verrà aggiunta un'origine dati denominata ProductPhotosCollectionDS al progetto. L'origine dati ProductPhotosCollectionOD rappresenta la struttura di un'istanza della classe CLR a cui si fa riferimento. Espandere ProductPhotosCollectionOD e ProductPhotosCollection per visualizzarne la struttura. In un passaggio successivo di questa attività sarà necessario trascinare i dati dal pannello Dati alla tavola da disegno per creare nuovi controlli.

11. Nel pannello Oggetti e sequenza temporale fare clic su LayoutRoot per attivarlo. Quando si attiva l'oggetto, attorno al nome viene visualizzato un riquadro ombreggiato.

    Suggerimento:

    Se si desidera aggiungere oggetti figlio a un oggetto o eseguire altre operazioni particolari, fare doppio clic sull'oggetto padre nel pannello Oggetti e sequenza temporale e quindi aggiungere l'oggetto figlio. Questa azione è detta attivazione. L'oggetto attivato è identificato da un riquadro ombreggiato visualizzato attorno al nome. Se si desidera modificare le proprietà di un oggetto, fare clic sul relativo nome nel pannello Oggetti e sequenza temporale. Questa azione è detta selezione. L'oggetto selezionato è identificato da un colore di sfondo evidenziato. È possibile selezionare un oggetto senza attivarlo.

12. Nel pannello Strumenti fare clic su Selezione. Sulla tavola da disegno spostare il puntatore sull'area spessa del righello nella parte superiore di LayoutRoot. Un righello verticale seguirà il puntatore per indicare il punto in cui è possibile inserire un nuovo divisore di colonna facendo clic con il mouse.

13. Fare clic per creare un nuovo divisore di colonna, in modo che le colonne destra e sinistra abbiano approssimativamente la stessa larghezza. Nella colonna sinistra verrà visualizzato un elenco di foto in miniatura dei prodotti, mentre in quella destra verrà visualizzata la foto ingrandita dell'elemento selezionato nell'elenco a sinistra. All'interno di LayoutRoot verrà visualizzato un divisore di colonna.

    Suggerimento:
    Per visualizzare interamente l'oggetto LayoutRoot sulla tavola da disegno, può essere necessario eseguire uno zoom indietro. A tale scopo, immettere un valore di zoom nella casella di testo disponibile sotto la tavola da disegno , fare clic sulla freccia accanto al valore di zoom o ruotare la rotellina del mouse tenendo premuto CTRL.

14. Sulla tavola da disegno spostare il puntatore sull'area spessa del righello nel lato sinistro di LayoutRoot. Fare clic per creare un nuovo divisore di riga. La riga superiore deve essere alta abbastanza da contenere un pulsante. Fare clic sull'icona del lucchetto aperto visualizzata accanto alla riga superiore per bloccare l'altezza della riga.

    Suggerimento:

    Per verificare l'effetto dell'azione descritta al passaggio precedente, fare clic con il pulsante destro del mouse su LayoutRoot nel pannello Oggetti e sequenza temporale e scegliere Visualizza XAML per visualizzare il codice XAML (Extensible Application Markup Language). Questa operazione consente di passare alla visualizzazione XAML della tavola da disegno con il codice di LayoutRoot evidenziato. Per una visualizzazione ottimale, scegliere Nascondi pannelli dal menu Finestra oppure premere F4 o TAB. All'oggetto <Grid>, che rappresenta LayoutRoot, sono state aggiunte le sezioni <Grid.ColumnDefinitions> e <Grid.RowDefinitions>. Gli attributi Width e Height utilizzano il ridimensionamento proporzionato con asterischi. Questo significa che le dimensioni delle colonne sono proporzionate. Se ad esempio la proprietà Width è impostata su 2*, la larghezza della colonna risultante sarà il doppio rispetto a una colonna con larghezza pari a *. Per la riga bloccata questa funzionalità non è disponibile, poiché l'altezza della riga è fissa. Dopo avere esaminato il codice XAML tornare alla visualizzazione Progettazione e visualizzare nuovamente i pannelli, premendo F4 o TAB.

15. Nel pannello Dati trascinare GetDataCommand da ProductPhotosCollection nella cella superiore sinistra della griglia sulla tavola da disegno.

16. Nel pannello Strumenti fare doppio clic su Pulsante per disegnare un pulsante sulla tavola da disegno. Nell'elenco a discesa visualizzato selezionare Button.

17. Nel menu a discesaProprietà di, nella finestra di dialogo Crea associazione dati, selezionare Command, quindi fare clic su OK. Verrà creato un nuovo pulsante associato al metodo della funzione di accesso GetDataCommand nella classe AWDataSource. Quando in fase di esecuzione viene fatto clic sul pulsante, verrà eseguita la funzione GetDataCommand sull'origine dati ProductPhotosCollection e, come illustrato nella seconda attività di questo argomento, l'implementazione del comando chiamerà il metodo GetData.

    Suggerimento:

    È possibile spostare e ridimensionare il nuovo pulsante nella tavola da disegno facendo clic sullo strumento Selezione nel pannello Strumenti, selezionando il nuovo pulsante nella tavola da disegno o nel pannello Oggetti e sequenza temporale e quindi utilizzando gli Adorner visualizzati nella tavola da disegno. Per ulteriori informazioni, vedere Riposizionare o traslare un oggetto e Ridimensionare o modificare la scala di un oggetto.

    Suggerimento:
    È possibile accedere alle associazioni dati nel pannello Proprietà. Per riaprire la finestra di dialogo Crea associazione dati dopo la creazione di un'associazione dati, selezionare il controllo Button nel pannello Oggetti e sequenza temporale. In Varie nel pannello Proprietà fare clic su Opzioni avanzate accanto alla proprietà Command e quindi su Associazione dati.

18. Dopo aver selezionato l'oggetto [Button] nel pannello Oggetti e sequenza temporale, cercare la proprietà Content nella categoria Proprietàcomuni**** del pannello Proprietà. Impostare la proprietà Content immettendo il testo Visualizza foto prodotti e quindi premere INVIO.

19. Spostare e ridimensionare l'oggetto [Button] facendo clic sullo strumento Selezione nel pannello Strumenti e quindi utilizzando gli Adorner sulla tavola da disegno. Adattare l'oggetto [Button] alla cella superiore sinistra della griglia quindi, nella categoria Layout del pannello Proprietà, impostare le proprietà seguenti:

    • Impostare le proprietà Width e Height su Auto.

    • Impostare le proprietà Margin su 0.

    • Impostare le proprietà HorizontalAlignment e VerticalAlignment su Center.

    Queste impostazioni garantiscono che il pulsante avrà una larghezza proporzionata al testo della proprietà Content e verrà centrato nella cella della griglia.

20. Nel pannello Dati, trascinare ProductPhotos (matrice) nella cella inferiore sinistra della griglia nella tavola da disegno.

21. Nell'elenco a discesa Proprietà di della finestra di dialogo Crea associazione dati selezionare ItemsSource e quindi fare clic su OK.

    Suggerimento:

    Un modello di dati è una struttura ad albero di oggetti dell'interfaccia utente che possono contenere associazioni a dati. Quando è necessario visualizzare dati di un tipo specifico, viene selezionato il modello di dati appropriato, che formatta una nuova copia della struttura di oggetti contenente i dati aggiornati da visualizzare all'utente. Ogni elemento visualizzato all'interno dell'oggetto ListBox è un oggetto di tipo ProductPhoto implementato nella seconda attività di questo argomento.

22. Nella finestra di dialogo Crea modello di dati selezionare il pulsante di opzione Nuovo modello di dati e campi di visualizzazione. Questa opzione consente di definire la struttura del tipo di dati trascinato dal pannello Dati, ad esempio i singoli oggetti di un insieme di oggetti ProductPhoto. A questo punto è possibile creare un'associazione a qualsiasi parte della struttura di dati e definire così l'aspetto della struttura ad albero di oggetti del modello di dati. Accanto a ogni elemento di dati è disponibile un elenco a discesa che consente di determinare l'oggetto da utilizzare per la presentazione del campo dati, ovvero StackPanel oppure TextBlock. Accanto all'elenco a discesa è presente un'etichetta che indica a quale proprietà dell'oggetto verrà associato l'elemento di dati.

23. Deselezionare l'opzione LargePhoto perché l'elemento verrà visualizzato nel controllo ListBox.

24. Il campo dati ModifiedDate attualmente è di tipo StackPanel. È necessario modificare il controllo specificando un tipo di oggetto più appropriato per la visualizzazione del tipo di dati utilizzato. Nell'elenco a discesa accanto a ModifiedDate selezionare TextBlock. L'etichetta verrà modificata automaticamente in Text.

25. Il campo dati ThumbNailPhoto attualmente è di tipo ImageSource. È necessario modificare il controllo specificando un tipo di oggetto più appropriato per la visualizzazione del tipo di dati utilizzato. Nell'elenco a discesa accanto a ThumbNailPhoto selezionare Image. L'etichetta verrà modificata automaticamente in Source.

26. Fare clic su OK. Nel documento verrà inserito un nuovo controllo ListBox.

    Suggerimento:
    Un modello di dati è una risorsa. Per modificare il modello di dati ProductPhotosTemplate dopo averlo creato, espandere il nodo Window1.xaml nel pannello Risorse, espandere Window e quindi fare clic sul pulsante accanto a ProductPhotosTemplate.

27. Dopo aver selezionato l'oggetto [ListBox] nel pannello Oggetti e sequenza temporale, in Layout nel pannello Proprietà eseguire le seguenti operazioni:

    • Impostare le proprietà Width e Height su Auto.

    • Impostare la proprietà Margin su 8.

    • Impostare le proprietà HorizontalAlignment e VerticalAlignment su Center.

    Con queste impostazioni, il controllo ListBox riempie quasi completamente la cella inferiore sinistra della griglia.

28. Nel pannello Strumenti selezionare Image .

    Suggerimento:
    Se il controllo Image non è presente nel pannello Strumenti, è possibile fare clic su Asset  per individuarlo. Se si seleziona un controllo nella raccolta, la relativa icona verrà visualizzata nel pannello Strumenti, al di sotto del pulsante Asset.

29. Sulla tavola da disegno disegnare un nuovo controllo Image nella cella inferiore destra della griglia, riempiendola quasi completamente.

30. Dopo aver selezionato l'oggetto [Image] nel pannello Oggetti e sequenza temporale, cercare la proprietà Source nella categoria Proprietà comuni del pannello Proprietà. Fare clic sul nome della proprietà Source e quindi selezionare Associazione dati nell'elenco a discesa visualizzato.

31. Nella finestra di dialogo Crea associazione dati passare alla scheda Proprietà elemento perché si desidera associare i dati a una proprietà dell'oggetto [ListBox] .

32. In Elementi della scena espandere Window e LayoutRoot e quindi selezionare l'oggetto ListBox ([System.WIndows.Controls.ListBox]).

33. Nell'elenco a discesa Mostra selezionare Tutte le proprietà. Verranno visualizzate tutte le proprietà disponibili per l'associazione, non solo quelle con lo stesso tipo di dati della proprietà Source, ovvero String.

34. In Proprietà selezionare SelectedItem : (Object) .

35. Selezionare la casella di controllo Utilizzare un'espressione di tracciato personalizzata. L'espressione predefinita è SelectedItem. Sostituirla con SelectedItem.LargePhoto in modo da creare l'associazione al membro LargePhoto dell'oggetto ProductPhoto attualmente selezionato.

36. Fare clic su Fine.

37. Scegliere Test Progetto dal menu Progetto (o premere F5). All'avvio dell'applicazione, per eseguire il test fare clic su Visualizza foto prodotti. Quando i dati vengono caricati nella casella di riepilogo, scorrere gli elementi e verificare che nella colonna a destra venga visualizzata la foto ingrandita corrispondente.

L'applicazione completata

Copyright © 2011 Microsoft Corporation. Tutti i diritti riservati.