Raccolte ed elenchiCollections and lists

Raccolte ed elenchi fanno entrambi riferimento alla rappresentazione di più elementi di dati correlati che vengono visualizzati insieme.Collections and lists both refer to the representation of multiple related data items that appear together. Le raccolte possono essere rappresentate in più modi, con controlli di raccolta diversi (possono essere definite anche visualizzazioni Raccolta).Collections can be represented in multiple ways, by different collection controls (also may be referred to as collection views). I controlli di raccolta visualizzano e abilitano le interazioni con contenuto basato su raccolte, ad esempio un elenco di contatti, un elenco di date, una raccolta di immagini e così via.Collection controls display and enable interactions with collection-based content, such as a list of contacts, a list of dates, a collection of images, and so on.

API importanti : classe ListView, classe GridView, classe FlipView, classe TreeView, classe ItemsRepeaterImportant APIs : ListView class, GridView class, FlipView class, TreeView class, ItemsRepeater class

I controlli descritti in questo articolo includono:The controls covered in this article include:

  • Visualizzazioni elenco, usate soprattutto per visualizzare raccolte di contenuti con molto testoList views, which are primarily used to display text-heavy content collections
  • Visualizzazioni griglia, usate soprattutto per visualizzare raccolte di contenuti con molte immaginiGrid views, which are primarily used to display image-heavy content collections
  • Visualizzazioni miniature, usate soprattutto per visualizzare raccolte di contenuto con molte immagini per le quali è necessario che lo stato attivo sia impostato per un solo elemento alla voltaFlip views, which are primarily used to display image-heavy content collections that require exactly one item to be in focus at a time
  • Visualizzazioni albero, usate soprattutto per visualizzare raccolte di contenuto con molto testo all'interno di una specifica gerarchiaTree views, which are primarily used to display text-heavy content collections in a specific hierarchy
  • ItemsRepeater, un blocco predefinito personalizzabile per creare controlli di raccolta personalizzatiItemsRepeater, which is a customizable building block to create custom collection controls

Per ogni controllo sono riportati di seguito esempi, funzionalità e linee guida per la progettazione.Design guidelines, features, and examples are given below for each control.

Ognuno di questi controlli, ad eccezione di ItemsRepeater, fornisce uno stile e un'interazione predefiniti.Each of these controls (with the exception of ItemsRepeater) provide built-in styling and interaction. Tuttavia, per personalizzare ulteriormente l'aspetto visivo della tua raccolta e degli elementi inclusi, si usa un oggetto DataTemplate.However, to further customize the visual look of your collection view and the items inside it, a DataTemplate is used. Per informazioni dettagliate sui modelli di dati e sulla personalizzazione dell'aspetto di una visualizzazione Raccolta, consulta la pagina Modelli e contenitori di elementi.Detailed information on data templates and customizing the look of a collection view can be found on the Item containers and templates page.

Ognuno di questi controlli, ad eccezione di ItemsRepeater, ha anche un comportamento predefinito per consentire la selezione di uno o più elementi.Each of these controls (with the exception of ItemsRepeater) also have built-in behavior to allow for the selection of single or multiple items. Per altre informazioni, vedi Panoramica sulla modalità di selezione.See Selection modes overview to learn more.

Uno degli scenari non trattati in questo articolo è la visualizzazione di raccolte in una tabella o in più colonne.One of the scenarios not covered in this article is displaying collections in a table or across multiple columns. Se stai cercando di visualizzare una raccolta in questo formato, considera la possibilità di usare il controllo DataGrid incluso in Windows Community Toolkit.If you're looking to display a collection in this format, consider using the DataGrid control from the Windows Community Toolkit.

Windows 10 Fall Creators Update - Modifica del comportamento Per impostazione predefinita, invece di eseguire la selezione, la penna attiva consente ora lo scorrimento di un elenco nelle app di Windows, ad esempio tocco, touchpad e penna passiva.Windows 10 Fall Creators Update - Behavior change By default, instead of performing selection, an active pen now scrolls/pans a list in Windows apps (like touch, touchpad, and passive pen). Se l'app dipende dal comportamento precedente, puoi ignorare lo scorrimento della penna e ripristinare il comportamento precedente.If your app depends on the previous behavior, you can override pen scrolling and revert to the previous behavior. Per altri dettagli, vedi l'argomento relativo alle informazioni di riferimento API per la classe ScrollViewer.For details, see the API reference topic for the Scroll Viewer Class.

EsempiExamples

Raccolta di controlli XAMLXAML Controls Gallery
XAML controls gallery

Se è installata l'app XAML Controls Gallery, puoi vedere ListView, GridView, FlipView, TreeView e ItemsRepeater in azione.If you have the XAML Controls Gallery app installed, see the ListView, GridView, FlipView, TreeView, and ItemsRepeater in action.

Visualizzazioni elencoList views

Le visualizzazioni elenco rappresentano elementi con molto testo, in genere all'interno di un layout verticale a colonna singola.List views represent text-heavy items, typically in a single-column, vertically-stacked layout. Consentono di categorizzare gli elementi e assegnare intestazioni di gruppo, trascinare gli elementi selezionati, curare il contenuto e riordinare gli elementi.They let you categorize items and assign group headers, drag and drop items, curate content, and reorder items.

È il controllo giusto?Is this the right control?

Usa una visualizzazione elenco per:Use a list view to:

  • Visualizzare una raccolta costituita principalmente da elementi basati su testo, in cui tutti gli elementi devono avere lo stesso comportamento a livello visivo e di interazione.Display a collection that primarily consists of text-based items, where all of the items should have the same visual and interaction behavior.
  • Rappresentare una raccolta di contenuto singola o organizzata per categorie.Represent a single or categorized collection of content.
  • Supportare un'ampia gamma di casi d'uso, tra cui i più comuni sono:Accommodate a variety of use cases, including the following common ones:
    • Creazione di un elenco di messaggi o di un log di messaggi.Create a list of messages or message log.
    • Creazione di un elenco di contatti.Create a contacts list.
    • Creare il riquadro master nel modello master/dettagli.Create the master pane in the master/details pattern. Un modello master/dettagli è spesso usato nelle app per l'email, in cui un riquadro (il master) contiene un elenco di elementi selezionabili e l'altro riquadro (dettagli) contiene una visualizzazione dettagliata dell'elemento selezionato.A master/details pattern is often used in email apps, in which one pane (the master) has a list of selectable items while the other pane (details) has a detailed view of the selected item.

Nota

Se è necessario gestire gli eventi del puntatore per un UIElement in una visualizzazione scorrevole (ad esempio ScrollViewer o ListView), è necessario disabilitare in modo esplicito il supporto per gli eventi di manipolazione sull'elemento nella vista chiamando UIElement.CancelDirectmanipulation().If you need to handle pointer events for a UIElement in a scrollable view (such as a ScrollViewer or ListView), you must explicitly disable support for manipulation events on the element in the view by calling UIElement.CancelDirectmanipulation(). Per riabilitare gli eventi di manipolazione nella vista chiamare UIElement.TryStartDirectManipulation().To re-enable manipulation events in the view, call UIElement.TryStartDirectManipulation().

EsempiExamples

Ecco una visualizzazione elenco semplice che contiene un elenco di contatti e raggruppa gli elementi di dati in ordine alfabetico.Here's a simple list view that shows a contacts list, and groups the data items alphabetically. Le intestazioni di gruppo (in questo esempio le lettere dell'alfabeto) possono anche essere personalizzate in modo da rimanere fisse, poiché verranno sempre visualizzate nella parte superiore della visualizzazione elenco durante lo scorrimento.The group headers (each letter of the alphabet in this example) can also be customized to stay "sticky", as in they will always appear at the top of the ListView while scrolling.

Visualizzazione elenco con dati raggruppati

La visualizzazione elenco seguente è stata invertita in modo che i messaggi più recenti nel log visualizzato compaiano in fondo.This is a ListView that has been inverted to display a log of messages, with the newest messages appearing at the bottom. Con una visualizzazione elenco invertita, gli elementi vengono visualizzati in fondo alla schermata con un'animazione incorporata.With an inverted ListView, items appear at the bottom of the screen with a built-in animation.

Visualizzazione elenco invertita

ArgomentoTopic DescriptionDescription

Visualizzazione elenco e visualizzazione grigliaList view and grid view

Apprendi le nozioni fondamentali sull'uso di una visualizzazione elenco o di una visualizzazione griglia nella tua app.Learn the essentials of using a list view or grid view in your app.

Modelli e contenitori di elementiItem containers and templates

Gli elementi che visualizzi in una visualizzazione elenco o griglia possono influire notevolmente sull'aspetto generale della tua app.The items you display in a list or grid view can play a major role in the overall look of your app. Per rendere l'app accattivante, personalizza l'aspetto degli elementi della tua raccolta modificando i modelli dei controlli e i modelli di dati.Make your app look great by customizing the look of your collection items through modifying control templates and data templates.

Modelli di elementi per la visualizzazione elencoItem templates for list view

Usa questi modelli di elementi di esempio per ListView per ottenere l'aspetto dei tipi comuni di app.Use these example item templates for a ListView to get the look of common app types.

Elenchi invertitiInverted lists

Negli elenchi invertiti i nuovi elementi vengono aggiunti nella parte inferiore, come in un'app di chat.Inverted lists have new items added at the bottom, like in a chat app. Segui le indicazioni fornite in questo articolo per usare un elenco invertito nella tua app.Follow this article's guidance to use an inverted list in your app.

Aggiornamento tramite trascinamento verso il bassoPull-to-refresh

Il meccanismo di aggiornamento tramite trascinamento verso il basso consente a un utente di trascinare verso il basso un elenco di dati tramite tocco per recuperare altri dati.The pull-to-refresh mechanism lets a user pull down on a list of data using touch in order to retrieve more data. Usa questo articolo per implementare l'aggiornamento tramite trascinamento verso il basso nella tua visualizzazione elenco.Use this article to implement pull-to-refresh in your list view.

Interfaccia utente annidataNested UI

L'interfaccia utente annidata è un tipo di interfaccia utente che espone controlli su cui è possibile eseguire azioni, racchiusi in un contenitore che supporta anch'esso azioni da parte dell'utente.Nested UI is a user interface (UI) that exposes actionable controls enclosed inside a container that a user can also take action on. Ad esempio, potresti avere un elemento della visualizzazione elenco che contiene un pulsante e l'utente può selezionare l'elemento dell'elenco oppure fare clic sul pulsante annidato al suo interno.For example, you might have list view item that contains a button, and the user can select the list item, or press the button nested within it. Segui queste procedure consigliate per garantire agli utenti un'esperienza ottimale con un'interfaccia utente annidata.Follow these best practices to provide the best nested UI experience for your users.

Visualizzazioni grigliaGrid views

Le visualizzazioni griglia servono per disporre ed esplorare le raccolte di contenuti basati su immagini.Grid views are suited for arranging and browsing image-based content collections. Un layout visualizzazione griglia scorre verticalmente e offre una panoramica orizzontale.A grid view layout scrolls vertically and pans horizontally. Gli elementi vanno a capo, poiché sono visualizzati in ordine di lettura da sinistra a destra e quindi dall'alto verso il basso.Items are in a wrapped layout, as they appear in a left-to-right, then top-to-bottom reading order.

È il controllo giusto?Is this the right control?

Usa una visualizzazione griglia per:Use a grid view to:

  • Visualizzare una raccolta di contenuto in cui il punto focale di ogni elemento è costituito da un'immagine e ogni elemento deve avere lo stesso comportamento a livello visivo e di interazione.Display a content collection in which the focal point of each item is an image, and each item should have the same visual and interaction behavior.
  • Visualizzare raccolte di contenuti.Display content libraries.
  • Formattare le due visualizzazioni del contenuto con lo zoom semantico.Format the two content views associated with semantic zoom.
  • Supportare un'ampia gamma di casi d'uso, tra cui i più comuni sono:Accommodate a variety of use cases, including the following common ones:
    • Interfaccia utente di tipo vetrina, ad esempio per l'esplorazione di app, canzoni e prodottiStorefront-type user interface (i.e. browsing apps, songs, products)
    • Librerie di foto interattiveInteractive photo libraries

Nota

Se è necessario gestire gli eventi del puntatore per un UIElement in una visualizzazione scorrevole (ad esempio ScrollViewer o ListView), è necessario disabilitare in modo esplicito il supporto per gli eventi di manipolazione sull'elemento nella vista chiamando UIElement.CancelDirectmanipulation().If you need to handle pointer events for a UIElement in a scrollable view (such as a ScrollViewer or ListView), you must explicitly disable support for manipulation events on the element in the view by calling UIElement.CancelDirectmanipulation(). Per riabilitare gli eventi di manipolazione nella vista chiamare UIElement.TryStartDirectManipulation().To re-enable manipulation events in the view, call UIElement.TryStartDirectManipulation().

EsempiExamples

Questo esempio mostra un tipico layout visualizzazione griglia, in questo caso per esplorare le app.This example shows a typical grid view layout, in this case for browsing apps. I metadati per gli elementi della visualizzazione griglia di solito si limitano ad alcune righe di testo e a una valutazione elementi.Metadata for grid view items is usually restricted to a few lines of text and an item rating.

Esempio di layout della visualizzazione griglia

Una visualizzazione griglia è la soluzione ideale per una raccolta contenuto, che spesso viene usata per presentare elementi multimediali come immagini e video.A grid view is an ideal solution for a content library, which is often used to present media such as pictures and videos. In una raccolta di contenuto, gli utenti si aspettano di poter toccare un elemento per richiamare un'azione.In a content library, users expect to be able to tap an item to invoke an action.

Esempio di una raccolta di contenuto

ArgomentoTopic DescriptionDescription

Visualizzazione elenco e visualizzazione grigliaList view and grid view

Apprendi le nozioni fondamentali sull'uso di una visualizzazione elenco o di una visualizzazione griglia nella tua app.Learn the essentials of using a list view or grid view in your app.

Modelli e contenitori di elementiItem containers and templates

Gli elementi che visualizzi in una visualizzazione elenco o griglia possono influire notevolmente sull'aspetto generale della tua app.The items you display in a list or grid view can play a major role in the overall look of your app. Per rendere l'app accattivante, personalizza l'aspetto degli elementi della tua raccolta modificando i modelli dei controlli e i modelli di dati.Make your app look great by customizing the look of your collection items through modifying control templates and data templates.

Modelli di elementi per la visualizzazione grigliaItem templates for grid view

Usa questi modelli di elementi di esempio per GridView per ottenere l'aspetto dei tipi comuni di app.Use these example item templates for GridView to get the look of common app types.

Interfaccia utente annidataNested UI

L'interfaccia utente annidata è un tipo di interfaccia utente che espone controlli su cui è possibile eseguire azioni, racchiusi in un contenitore che supporta anch'esso azioni da parte dell'utente.Nested UI is a user interface (UI) that exposes actionable controls enclosed inside a container that a user can also take action on. Ad esempio, un elemento della visualizzazione griglia potrebbe contenere un pulsante e l'utente può selezionare l'elemento della griglia oppure fare clic sul pulsante annidato al suo interno.For example, you might have grid view item that contains a button, and the user can select the grid item, or press the button nested within it. Segui queste procedure consigliate per garantire agli utenti un'esperienza ottimale con un'interfaccia utente annidata.Follow these best practices to provide the best nested UI experience for your users.

Visualizzazioni miniatureFlip views

Le visualizzazioni miniature sono adatte per l'esplorazione di raccolte di contenuto basate su immagini, in particolare quando si vuole visualizzare una sola immagine alla volta.Flip views are suited for browsing image-based content collections, specifically where the desired experience is for only one image to be visible at a time. Una visualizzazione miniature consente all'utente di spostare o "scorrere" gli elementi della raccolta (in modo verticale o orizzontale), in modo che venga visualizzato un elemento alla volta dopo l'interazione dell'utente.A flip view allows the user to move or "flip" through the collection items (either vertically or horizontally), having each item appear one at a time after the user interaction.

È il controllo giusto?Is this the right control?

Usa una visualizzazione miniature per:Use a flip view to:

  • Visualizzare una raccolta di dimensioni medio-piccole (meno di 25 elementi), costituita da immagini prive o quasi di metadati.Display a small to medium (less than 25 items) collection, where the collection is made up of images with little to no metadata.
  • Visualizzare gli elementi uno alla volta e consentire all'utente finale di scorrere gli elementi al ritmo desiderato.Display items one at a time, and allow the end-user to flip through the items at their own pace.
  • Supportare un'ampia gamma di casi d'uso, tra cui i più comuni sono:Accommodate a variety of use cases, including the following common ones:
    • Raccolte di fotoPhoto galleries
    • Raccolte di prodotti o presentazioniProduct galleries or showcases

EsempiExamples

I due esempi seguenti illustrano una visualizzazione miniature che scorre, rispettivamente, in modo orizzontale e verticale.The following two examples show a FlipView that flips horizontally and vertically, respectively.

Visualizzazione miniature orizzontale

Visualizzazione miniature verticale

ArgomentoTopic DescriptionDescription

Visualizzazione miniatureFlip view

Apprendi le nozioni fondamentali sull'uso di una visualizzazione miniature nella tua app e impara a personalizzare l'aspetto degli elementi all'interno di una visualizzazione miniature.Learn the essentials of using a flip view in your app, along with how to customize the look of your items within a flip view.

Visualizzazioni alberoTree views

Le visualizzazioni albero sono adatte per le raccolte basate su testo con una gerarchia importante da presentare.Tree views are suited for displaying text-based collections that have an important hierarchy that needs to be showcased. Gli elementi della visualizzazione albero sono comprimibili e/o espandibili, sono visualizzati in una gerarchia visiva, possono essere accompagnati da icone e possono essere selezionati e trascinati da una visualizzazione albero all'altra.Tree view items are collapsible/expandable, are shown in a visual hierarchy, can be supplmented with icons, and can be dragged and dropped between tree views. Le visualizzazioni albero consentono l'annidamento di livello N.Tree views allow for N-level nesting.

È il controllo giusto?Is this the right control?

Usa una visualizzazione albero per:Use a tree view to:

  • Visualizzare una raccolta di elementi annidati il cui contesto e significato dipendono da una gerarchia o da una catena organizzativa specifica.Display a collection of nested items whose context and meaning is dependent on a hierarchy or specific organizational chain.
  • Supportare un'ampia gamma di casi d'uso, tra cui i più comuni sono:Accommodate a variety of use cases, including the following common ones:
    • Visualizzatore fileFile browser
    • Organigramma aziendaleCompany organizational chart

EsempiExamples

L'esempio di visualizzazione albero riportato di seguito rappresenta una finestra di esplorazione di file e visualizza molti elementi annidati diversi, accompagnati da icone.Here is an example of a tree view that represents a file explorer, and displays many different nested items supplemented by icons.

Visualizzazione albero con icone

ArgomentoTopic DescriptionDescription

Visualizzazione ad alberoTree view

Apprendi le nozioni fondamentali sull'uso di una visualizzazione albero nella tua app e impara a personalizzare l'aspetto e il comportamento degli elementi a livello di interazione all'interno di una visualizzazione albero.Learn the essentials of using a tree view in your app, along with how to customize the look and interaction behavior of your items within a tree view.

ItemsRepeaterItemsRepeater

ItemsRepeater è diverso dagli altri controlli di raccolta illustrati in questa pagina perché non fornisce stili o interazioni predefiniti, ad esempio quando viene semplicemente posizionato in una pagina senza definire alcuna proprietà.ItemsRepeater is different from the rest of the collection controls shown on this page because it does not provide any styling or interaction out-of-box, i.e. when simply placed on a page without defining any properties. ItemsRepeater può essere considerato un blocco predefinito che uno sviluppatore può usare per creare un controllo di raccolta personalizzato, soprattutto se non può essere ottenuto con gli altri controlli descritti in questo articolo.ItemsRepeater is rather a building block that you as a developer can use to create your own custom collections control, specifically one that cannot be achieved by using the other controls in this article. ItemsRepeater è un pannello con prestazioni elevate basato su dati che può essere personalizzato in base alle tue specifiche esigenze.ItemsRepeater is a data-driven and high-performance panel that can be tailored to fit your exact needs.

È il controllo giusto?Is this the right control?

Usa un controllo ItemsRepeater se:Use an ItemsRepeater if:

  • Hai in mente un'interfaccia utente e un'esperienza utente specifiche che non possono essere create con i controlli di raccolta esistenti.You have a specific user interface and user experience in mind that cannot be created using existing collection controls.
  • Hai già un'origine dati per i tuoi elementi, ad esempio i dati estratti da Internet, un database o una raccolta preesistente nel code-behind.You have an existing data source for your items (such as data pulled from the internet, a database, or a pre-existing collection in your code-behind).

EsempiExamples

I tre esempi seguenti sono tutti controlli ItemsRepeater associati alla stessa origine dati, ovvero una raccolta di numeri.The following three examples are all ItemsRepeater controls that are bound to the same data source (a collection of numbers). La raccolta di numeri è rappresentata in tre modi e ognuno dei controlli ItemsRepeater seguenti usa un oggetto Layout e un oggetto ItemTemplate personalizzati diversi.The collection of numbers is represented in three ways, with each of the ItemsRepeaters below using a different custom Layout and a different custom ItemTemplate.

ItemsRepeater con barre orizzontali ItemsRepeater con barre verticali ItemsRepeater con rappresentazione circolareItemsRepeater with horizontal bars ItemsRepeater with vertical bars ItemsRepeater with circular representation

ArgomentoTopic DescriptionDescription

ItemsRepeaterItemsRepeater

Apprendi le nozioni fondamentali sull'uso di un controllo ItemsRepeater nella tua app e impara a implementare tutti i componenti visivi e di interazione necessari per la tua visualizzazione Raccolta.Learn the essentials of using an ItemsRepeater in your app, along with how to implement all of the necessary interaction and visual components for your collection view.

Elenco di controllo per globalizzazione e localizzazioneGlobalization and localization checklist

Ritorno a capoWrappingConsenti due righe per l'etichetta degli elenchi.Allow two lines for the list label.
Espansione orizzontaleHorizontal expansionAssicurati che i campi abbiano spazio per l'espansione del testo e siano scorrevoli.Make sure fields can accomdation text expansion and are scrollable.
Spaziatura verticaleVertical spacingPer la spaziatura verticale usa caratteri non latini per garantire una visualizzazione corretta degli alfabeti non latini.Use non-Latin characters for vertical spacing to ensure non-Latin scripts will display properly.

Scaricare il codice di esempioGet the sample code

Linee guida per la progettazione e UXDesign and UX Guidelines

Informazioni di riferimento sulle APIAPI reference