Modello elenco/dettagli

  • Articolo

Il modello Elenco-dettagli è composto da un riquadro elenco (in genere con una visualizzazione elenco) e da un riquadro dettagli per il contenuto. Quando si seleziona un elemento nell'elenco, il riquadro dettagli viene aggiornato. Questo modello viene spesso usato per l'e-mail e le rubriche.

API importanti: classe ListView, classe SplitView

Example of list-details pattern

Suggerimento

Se vuoi un controllo XAML che implementi automaticamente questo modello, ti consigliamo di usare il controllo XAML ListDetailsView da Windows Community Toolkit.

È il modello corretto?

Il modello elenco-dettagli è l'ideale se vuoi:

  • Creare un'app per l'e-mail, una rubrica o una qualsiasi app basata su un layout elenco/dettagli.
  • Individuare e assegnare priorità a una raccolta di contenuti di grandi dimensioni.
  • Consentire l'aggiunta e la rimozione rapide di elementi da un elenco mentre ci si sposta tra diversi contesti.

Scegli lo stile giusto

Per l'implementazione del modello elenco-dettagli, ti consigliamo di usare lo stile in pila o lo stile affiancato, a seconda della quantità di spazio disponibile sullo schermo.

Larghezza della finestra disponibile Stile consigliato
320 epx-640 epx In pila
641 epx o superiore Affiancato

Stile in pila

Nello stile in pila è visibile una solo riquadro alla volta: l'elenco o i dettagli.

A list detail in stacked mode

L'utente parte dal riquadro elenco ed esegue il drill-down al riquadro dettagli selezionando un elemento nell'elenco. Dal punto di vista dell'utente, è come se le visualizzazioni elenco e dettagli fossero in due pagine separate.

Creare un modello elenco-dettagli in pila

Un modo per creare il modello elenco-dettagli in pila consiste nell'usare pagine separate per il riquadro elenco e il riquadro dettagli. Posizionare la visualizzazione elenco in una pagina e il riquadro dei dettagli in un'altra pagina.

Parts for the stacked-style list detail

Per la pagina di visualizzazione elenco è consigliata una visualizzazione elenco per la presentazione di elenchi che possono contenere testo e immagini.

Per la pagina di visualizzazione dei dettagli, usare l'elemento di contenuto più appropriato. Se sono presenti molti campi distinti, prendere in considerazione l'uso di un layout a griglia per disporre gli elementi in un modulo.

Per lo spostamento tra le pagine, vedi Cronologia di spostamento e spostamento indietro per le app di Windows.

Stile affiancato

Nello stile affiancato, i riquadri elenco e dettagli sono visibili contemporaneamente.

The list/detail pattern

L'elenco nel riquadro elenco usa un oggetto visivo di selezione per indicare l'elemento attualmente selezionato. La selezione di un nuovo elemento nell'elenco aggiorna il riquadro dettagli.

Creare un modello elenco-dettagli affiancato

Un modo per creare un modello elenco-dettagli affiancato consiste nell'usare il controllo doppia visualizzazione. Posizionare la visualizzazione elenco nel riquadro della doppia visualizzazione e la visualizzazione dei dettagli nel contenuto della doppia visualizzazione.

list detail split view parts

Per il riquadro elenco, una visualizzazione elenco è consigliata per la presentazione di elenchi che possono contenere testo e immagini.

Per il contenuto dei dettagli, usare l'elemento di contenuto più appropriato. Se sono presenti molti campi distinti, prendere in considerazione l'uso di un layout a griglia per disporre gli elementi in un modulo.

Layout adattivo

Per implementare un modello elenco-dettagli per schermi di qualsiasi dimensione, creare un'interfaccia utente reattiva con un layout adattivo.

adaptive list detail layout

Creare un modello elenco-dettagli adattivo

Per creare un layout adattivo, definire VisualStates diversi per l'interfaccia utente e dichiarare i punti di interruzione per i vari stati con AdaptiveTriggers.

Scaricare il codice di esempio

Gli esempi seguenti implementano il modello elenco-dettagli con layout adattivi e mostrano il data binding per le risorse statico, di database e online:

Suggerimento

Se vuoi un controllo XAML che implementi automaticamente questo modello, ti consigliamo di usare il controllo XAML ListDetailsView da Windows Community Toolkit.