Condividi tramite

Creare un'associazione dati elenco-dettagli

  • Articolo

Una progettazione di tipo elenco-dettagli è composta da due parti:

  • Una visualizzazione elenco in cui viene visualizzato un elenco di elementi, generalmente un insieme di dati.

  • Una visualizzazione dettagli in cui vengono visualizzati i dettagli relativi all'elemento selezionato nell'elenco.

Questo manuale dell'utente è un esempio di progettazione elenco-dettagli in cui il sommario rappresenta la visualizzazione elenco e l'argomento visualizzato la visualizzazione dettagli.

Microsoft Expression Blend consente di aggiungere con facilità dati alla tavola da disegno in una progettazione elenco-dettagli fornendo due modalità per il panello Dati:

  • Nella modalità Elenco gli elementi trascinati dal pannello Dati consentono di creare la visualizzazione elenco. È possibile trascinare gli elementi in un controllo ListBox, DataGrid o TreeView. Se gli elementi vengono trascinati in un'area vuota della tavola da disegno, verrà creato automaticamente un controllo ListBox.

  • Nella modalità Dettagli, gli elementi trascinati dal pannello Dati consentono di creare la visualizzazione dettagli in un pannello di layout Grid. In alternativa, è possibile creare un pannello di layout diverso (ad esempio un pannello di layout Canvas) e trascinarvi gli elementi all'interno.

Expression Blend consente di configurare automaticamente, senza interventi da parte dell'utente, la relazione tra la visualizzazione elenco e la visualizzazione dettagli, impostando la proprietà DataContext dell'oggetto Grid nella proprietà SelectedItem dell'oggetto che consente di visualizzare la visualizzazione elenco. In alternativa, la relazione può essere configurata manualmente.

tip noteSuggerimento:

In Expression Blend è disponibile un esempio che illustra una progettazione elenco-dettagli semplice e consente di personalizzare l'aspetto degli oggetti elenco e dettagli. Per visualizzare l'esempio in Expression Blend, fare clic su Schermata iniziale nel menu ?, selezionare la scheda Esempi, quindi fare clic su ColorSwatchSL.

Per creare automaticamente un'associazione dati elenco-dettagli

  1. Se non si ha a disposizione un'origine dati, creare un'origine dati di esempio e attivarla per l'utilizzo in fase di esecuzione.

    Per ulteriori informazioni, vedere Generare dati di esempio.

  2. Nel pannello Dati, fare clic su Modalità elenco Ee341499.9ad55afc-08ac-4f9a-ab3a-d55d0cf184d3(it-it,Expression.40).png.

    tip noteSuggerimento:

    Nella Modalità elenco, gli elementi dei dati trascinati nella tavola da disegno devono essere associazioni dati autonome o far parte di una visualizzazione elenco. Questa è la modalità predefinita del pannello Dati.

  3. Nel pannello Dati trascinare una o più proprietà dall'interno di un insieme di dati sulla tavola da disegno (per creare un oggetto ListBox) oppure su un oggetto ListBox Ee341499.ffd7a7c3-6bcd-4ed3-a59e-1f28d06ec4ae(it-it,Expression.40).png, DataGrid Ee341499.55bfb0df-05d2-4b58-8312-24a3aed103e3(it-it,Expression.40).png o TreeView Ee341499.7ecbf7de-e46f-44e9-b931-98c8c12c0b2a(it-it,Expression.40).png esistente.

    [!NOTA]

    Se viene visualizzata la finestra di dialogo Crea associazione dati, è possibile che, anziché la Modalità elenco, sia attiva la Modalità dettagli.

    L'oggetto consente di visualizzare l'insieme di dati per ciascuna proprietà.

    Trascinamento dei dati contenuti nella Modalità elenco in un oggetto ListBox

    Ee341499.86a5a839-015a-4510-8617-94487f4adb09(it-it,Expression.40).png

    Trascinamento dei dati contenuti nella Modalità elenco in un oggetto DataGrid

    Ee341499.8a772e67-9d6e-434d-8b39-fd3b69858e94(it-it,Expression.40).png

    Trascinamento dei dati contenuti nella Modalità elenco in un oggetto TreeView

    Ee341499.2677bde8-9d64-4d15-8877-517d0a66ea14(it-it,Expression.40).png

  4. Nel pannello Dati, fare clic su Modalità dettagliEe341499.7786ee28-da1d-41b2-93fd-b4caeb75ab98(it-it,Expression.40).png.

    tip noteSuggerimento:

    Nella Modalità dettagli, si presume che gli elementi dei dati trascinati nella tavola da disegno facciano parte della visualizzazione dettagli. Viene creato un oggetto Grid per visualizzare gli oggetti figlio per ciascun elemento dei dati. L'oggetto Grid viene configurato automaticamente per utilizzare il contesto di dati e l'elemento selezionato dell'ultimo oggetto creato nella Modalità elenco.

  5. Nel pannello Dati, trascinare una o più proprietà dall'interno di un insieme di dati sulla tavola da disegno (per creare un pannello di layout Grid) oppure su un pannello di layout esistente.

    Il pannello di layout consente di visualizzare un controllo TextBlock per il nome e il valore di ciascuna proprietà.

    Trascinamento dei dati nella Modalità dettagli dopo aver creato l'associazione ListBox

    Ee341499.50bc24c3-45a6-46cc-8baa-fe8e1640b245(it-it,Expression.40).png

    Trascinamento dei dati nella Modalità dettagli dopo aver creato l'associazione DataGrid

    Ee341499.7f71870f-8b3d-4de9-8ddf-258893b424a5(it-it,Expression.40).png

    Trascinamento dei dati nella Modalità dettagli dopo aver creato l'associazione TreeView

    Ee341499.b668febc-be6f-456f-8ad7-969d88f7aaea(it-it,Expression.40).png

  6. Premere F5 per provare l'applicazione. Fare clic sugli elementi nella visualizzazione elenco per visualizzare l'aggiornamento della visualizzazione dettagli.

    Selezione degli elementi nei controlli elenco per aggiornare la relativa visualizzazione dettagli

    Ee341499.6c17e27b-5c6f-45c8-a961-fd177406042d(it-it,Expression.40).png

Nella procedura viene illustrato come creare una visualizzazione elenco-dettagli che presenta due livelli. È inoltre possibile creare una visualizzazione di tipo elenco-dettagli che presenta tre livelli.

Per ulteriori informazioni, vedere Esercitazione: creare un'associazione elenco-dettagli con tre livelli di profondità.

Per creare manualmente un'associazione dati elenco-dettagli

  1. Se non si ha a disposizione un'origine dati, creare un'origine dati di esempio e attivarla per l'utilizzo in fase di esecuzione.

    Per ulteriori informazioni, vedere Generare dati di esempio.

  2. Nella Nel pannello Strumenti selezionare un controllo che si desidera utilizzare per la visualizzazione elenco, ad esempio un controllo ComboBox Ee341499.b174a511-dd12-4a45-a986-034de7693de9(it-it,Expression.40).png, e trascinarlo nella tavola da disegno.

  3. Nel pannello Oggetti e sequenza temporale, fare clic con il pulsante destro del mouse sul nuovo oggetto, fare clic su Rinomina, digitare un nuovo nome e premere INVIO.

    tip noteSuggerimento:

    Quando un oggetto viene creato, non dispone di un nome esplicito. Rinominando l'oggetto, viene creato un nome a cui la proprietà DataContext dell'oggetto visualizzazione dettagli può fare riferimento.

  4. Nella Nel pannello Dati fare clic su Modalità elenco Ee341499.9ad55afc-08ac-4f9a-ab3a-d55d0cf184d3(it-it,Expression.40).png.

  5. Nella Nel pannello Dati trascinare una o più proprietà da un insieme di dati a un oggetto elenco.

    Trascinamento dei dati contenuti nella Modalità elenco in un oggetto ComboBox

    Ee341499.ef9cdd5e-ebce-419a-afaa-86e2e4f8e4ac(it-it,Expression.40).png

  6. Nella Nel pannello Dati fare clic su Modalità dettagli Ee341499.7786ee28-da1d-41b2-93fd-b4caeb75ab98(it-it,Expression.40).png.

  7. Nella pannello Dati, trascinare una o più proprietà dall'interno di un insieme di dati sulla tavola da disegno (per creare un pannello di layout Grid) oppure su un pannello di layout esistente.

    Il pannello di layout consente di visualizzare un controllo TextBlock per il nome e il valore di ciascuna proprietà.

    Trascinamento dei dati in Modalità dettagli dopo aver creato l'associazione ComboBox

    Ee341499.96269f5b-09d6-4e4a-8fdb-c8f5fd3240f2(it-it,Expression.40).png

  8. Premere F5 per provare l'applicazione. Se la selezione di un diverso elemento nell'oggetto elenco non consente di aggiornare la visualizzazione dettagli, eseguire il passaggio seguente.

  9. Selezionare il pannello di layout (generalmente un oggetto Grid) che rappresenta la visualizzazione dettagli.

  10. Nella Nel pannello Proprietà, accanto alla proprietà DataContext, fare clic su Opzioni avanzate Ee341499.12e06962-5d8a-480d-a837-e06b84c545bb(it-it,Expression.40).png, quindi fare clic su Associazione dati.

  11. Nella finestra di dialogo Crea associazione dati fare clic sulla scheda Proprietà elemento.

  12. In Elementi della scena selezionare l'oggetto elenco, quindi in Proprietà selezionare la proprietà SelectedItem.

    Creazione di una relazione tra l'oggetto dettagli e l'oggetto elenco

    Ee341499.ab312546-3416-42c8-83e5-610590939041(it-it,Expression.40).png

  13. Fare clic su OK per chiudere la finestra di dialogo Crea associazione dati.

    Tutti gli elementi figlio nel pannello di layout dettagli utilizzeranno il contesto di dati dell'elemento selezionato dell'oggetto elenco.

  14. Verificare che gli elementi figlio del pannello di layout dettagli siano associati alle proprietà dei dati appropriate. Alcuni elementi figlio non sono associati ai dati perché consentono di visualizzare solo il nome di una proprietà dei dati. Gli altri elementi figlio devono essere associati ai dati perché consentono di visualizzare i dati associati all'elemento selezionato nell'oggetto elenco. Ad esempio, selezionare uno degli elementi figlio TextBlock che non consentono di visualizzare il nome di una proprietà dei dati, quindi nel pannello Proprietà cercare la proprietà Text. Se non viene visualizzato alcun rettangolo di selezione giallo attorno alla proprietà, l'oggetto TextBlock non è associato ai dati. Per associare l'oggetto TextBlock:

    1. Fare clic su Opzioni avanzate Ee341499.12e06962-5d8a-480d-a837-e06b84c545bb(it-it,Expression.40).png accanto alla proprietà Text, quindi fare clic su Associazione dati.

    2. Nella finestra di dialogo Crea associazione dati, fare clic sulla scheda Contesto dati esplicito.

    3. In Campi, espandere la Collection, quindi selezionare la proprietà dei dati che si desidera visualizzare nell'oggetto TextBlock.

      Ee341499.e7cf00b9-285a-45ab-a4d6-5b94881917fa(it-it,Expression.40).png

    4. Fare clic su OK per chiudere la finestra di dialogo Crea associazione dati.

      Attorno alla proprietà Text viene visualizzato un rettangolo di selezione giallo per indicare che la proprietà è associata ai dati.

      Ee341499.9712d7c9-c15b-4fed-a816-881fa0809a61(it-it,Expression.40).png

  15. Premere F5 per provare l'applicazione.

Vedere anche

Attività

Utilizzare il controllo DataGrid
Utilizzare il controllo TreeView

Concetti

Applicare uno stile a un controllo che visualizza dati

Copyright © 2011 Microsoft Corporation. Tutti i diritti riservati.