Visualizzazione elenco e visualizzazione grigliaList view and grid view

La maggior parte delle applicazioni manipola e visualizza set di dati, ad esempio raccolte di immagini o set di messaggi e-mail.Most applications manipulate and display sets of data, such as a gallery of images or a set of email messages. Il framework dell'interfaccia utente XAML offre i controlli ListView e GridView che semplificano la visualizzazione e la manipolazione dei dati nella tua app.The XAML UI framework provides ListView and GridView controls that make it easy to display and manipulate data in your app.

API importanti: classe ListView, classe GridView, proprietà ItemsSource, proprietà ItemsImportant APIs: ListView class, GridView class, ItemsSource property, Items property

Nota

ListView e GridView derivano entrambi dalla classe ListViewBase, pertanto hanno le stesse funzionalità, ma visualizzano i dati in modo diverso.ListView and GridView both derive from the ListViewBase class, so they have the same functionality, but display data differently. Quando in questo articolo si fa riferimento alla visualizzazione elenco, le informazioni sono valide per entrambi i controlli ListView e GridView, se non diversamente specificato.In this article, when we talk about list view, the info applies to both the ListView and GridView controls unless otherwise specified. In qualsiasi riferimento a classi come ListView o ListViewItem, il prefisso List può essere sostituito con Grid per ottenere l'equivalente per la griglia (GridView o GridViewItem).We may refer to classes like ListView or ListViewItem, but the List prefix can be replaced with Grid for the corresponding grid equivalent (GridView or GridViewItem).

I controlli ListView e GridView offrono molti vantaggi per l'utilizzo delle raccolte.ListView and GridView provide many benefits for working with collections. Sono entrambi facili da implementare e forniscono un'interfaccia utente di base e funzionalità di interazione e scorrimento, oltre a essere facilmente personalizzabili.They are both easy to implement and provide basic UI; interaction; and scrolling while still being easily customizable. ListView e GridView possono essere associati a origini dati dinamiche esistenti o a dati hardcoded forniti nel codice XAML stesso o nel code-behind.ListView and GridView can be bound to existing dynamic data sources, or hard-coded data provided in the XAML itself/the code-behind.

Questi due controlli offrono numerose opportunità di applicazione, ma sono ideali per le raccolte, in cui tutti gli elementi devono avere lo stesso aspetto e la stessa struttura di base, nonché lo stesso comportamento interattivo, ovvero devono eseguire la stessa azione in risposta al clic (apertura di un collegamento, esplorazione e così via).These two controls are flexible to many use cases, but overall work best with collections in which all items should have the same basic structure and appearance, as well as the same interaction behavior - i.e. they should all perform the same action when clicked (open a link, navigate, etc).

Differenze tra ListView e GridViewDifferences between ListView and GridView

ListViewListView

Il controllo ListView visualizza i dati impilati verticalmente in una singola colonna.The ListView displays data stacked vertically in a single column. ListView è particolarmente adatto agli elementi costituiti principalmente da testo e alle raccolte di elementi che devono essere letti dall'alto verso il basso, ad esempio disposti in ordine alfabetico.ListView works better for items that have text as a focal point, and for collections that are meant to be read top to bottom (i.e. alphabetically ordered). Tra i casi d'uso comuni di ListView sono inclusi gli elenchi di messaggi e i risultati delle ricerche.A few common use cases for ListView include lists of messages and search results. Le raccolte che devono essere visualizzate in più colonne o in un formato simile a una tabella non devono usare ListView, ma devono invece esaminare l'uso di un controllo DataGrid.Collections that need to be displayed in multiple columns or in a table-like format should not use ListView, but should look into using a DataGrid instead.

Visualizzazione elenco con dati raggruppati

GridViewGridView

Il controllo GridView presenta una raccolta di elementi in righe e colonne che è possibile scorrere verticalmente.The GridView presents a collection of items in rows and columns that can scroll vertically. I dati sono impilati orizzontalmente fino a riempire le colonne, quindi continuano nella riga successiva.Data is stacked horizontally until it fills the columns, then continues with the next row. GridView è particolarmente adatto agli elementi costituiti principalmente da immagini e alle raccolte di elementi che devono essere letti uno accanto all'altro o che non sono disposti in un ordine specifico.GridView works better for items that have images as their focal point, and for collections that can be read from side-to-side or are not sorted in a specific order. Un caso d'uso comune di GridView consiste in una raccolta di foto o prodotti.A common use case for GridView is a photo or product gallery.

Esempio di una raccolta di contenuto

Quale controllo di raccolta usare?Which collection control should you use? Un confronto con ItemsRepeaterA Comparison with ItemsRepeater

ListView e GridView sono controlli pronti per l'uso che consentono la visualizzazione di qualsiasi raccolta, con un'interfaccia utente e un'esperienza utente predefinite.ListView and GridView are controls that work out-of-the-box to display any collection, with their own built-in UI and UX. Anche il controllo ItemsRepeater viene usato per visualizzare le raccolte, ma è stato progettato come blocco predefinito per la creazione di un controllo personalizzato in grado di soddisfare specifiche esigenze di interfaccia utente.The ItemsRepeater control also is used to display collections, but was created as a building block for creating a custom control that fits your exact UI needs. Di seguito sono riportate le differenze principali che determinano la scelta del controllo da usare:The most important differences that should impact which control you end up using are below:

  • ListView e GridView sono controlli ricchi di funzionalità che richiedono un intervento di personalizzazione limitato ma offrono molte opportunità d'uso.ListView and GridView are feature-rich controls that require little customization but offer plenty. ItemsRepeater è un blocco predefinito per creare un controllo di layout personalizzato e non include le stesse funzionalità predefinite. È compito dello sviluppatore implementare le funzionalità o le interazioni necessarie.ItemsRepeater is a building block to create your own layout control and does not have the same built in features and functionality - it requires you to implement any necessary features or interactions.
  • ItemsRepeater deve essere usato nel caso di un'interfaccia utente altamente personalizzata, che non può essere creata con ListView o GridView, o di un'origine dati che richiede un comportamento molto diverso per ogni elemento.ItemsRepeater should be used if you have a highly custom UI that you can’t create using ListView or GridView, or if you have a data source that requires highly different behavior for each item.

Per altre informazioni su ItemsRepeater, vedi le linee guida e le pagine della documentazione dell'API.Learn more about ItemsRepeater by reading its Guidelines and API Documentation pages.

EsempiExamples

Raccolta di controlli XAMLXAML Controls Gallery
XAML controls gallery

Se è installata l'app XAML Controls Gallery, fai clic qui per aprirla e vedere ListView o GridView in azione.If you have the XAML Controls Gallery app installed, click here to open the app and see the ListView or GridView in action.

Creare un controllo ListView o GridViewCreate a ListView or GridView

Entrambi i controlli ListView e GridView sono tipi ItemsControl e possono quindi contenere una raccolta di elementi di qualsiasi tipo.ListView and GridView are both ItemsControl types, so they can contain a collection of items of any type. Prima di poter visualizzare qualcosa sullo schermo, un controllo ListView o GridView deve includere elementi nella relativa raccolta Items.A ListView or GridView must have items in its Items collection before it can show anything on the screen. Per popolare la visualizzazione, puoi aggiungere elementi direttamente alla raccolta Items o impostare la proprietà ItemsSource su un'origine dati.To populate the view, you can add items directly to the Items collection, or set the ItemsSource property to a data source.

Importante

Per popolare l'elenco puoi usare Items o ItemsSource, ma non puoi usare entrambi questi oggetti contemporaneamente.You can use either Items or ItemsSource to populate the list, but you can't use both at the same time. Se imposti la proprietà ItemsSource e aggiungi un elemento in XAML, questo viene ignorato.If you set the ItemsSource property and you add an item in XAML, the added item is ignored. Se imposti la proprietà ItemsSource e aggiungi un elemento alla raccolta Items nel codice, viene generata un'eccezione.If you set the ItemsSource property and you add an item to the Items collection in code, an exception is thrown.

Per semplicità, molti degli esempi in questo articolo popolano la raccolta Items direttamente.Many of the examples in this article populate the Items collection directly for the sake of simplicity. Tuttavia, è più comune che gli elementi in un elenco provengano da un'origine dinamica, come un elenco di libri da un database online.However, it's more common for the items in a list to come from a dynamic source, like a list of books from an online database. A questo scopo, puoi usare la proprietà ItemsSource.You use the ItemsSource property for this purpose.

Aggiungere elementi a un controllo ListView o GridViewAdd Items to a ListView or GridView

Per aggiungere elementi alla raccolta Items di ListView o GridView puoi usare XAML o il codice.You can add items to the ListView or GridView's Items collection using XAML or code to yield the same result. XAML viene in genere usato se sono presenti pochi elementi che rimangono invariati e sono facilmente definiti oppure se gli elementi vengono generati nel codice in fase di esecuzione.You typically add items through XAML if you have a small number of items that don't change and are easily defined, or if you generate the items in code at run time.

Metodo 1: Aggiungere elementi alla raccolta ItemsMethod 1: Add items to the Items Collection

Opzione 1: Aggiungere elementi tramite XAMLOption 1: Add Items through XAML

<!-- No corresponding C# code is needed for this example. -->

<ListView x:Name="Fruits"> 
   <x:String>Apricot</x:String> 
   <x:String>Banana</x:String> 
   <x:String>Cherry</x:String> 
   <x:String>Orange</x:String> 
   <x:String>Strawberry</x:String> 
</ListView>  

Opzione 2: Aggiungere elementi tramite C#Option 2: Add Items through C#

Codice C#:C# Code:
// Create a new ListView and add content. 
ListView Fruits = new ListView(); 
Fruits.Items.Add("Apricot"); 
Fruits.Items.Add("Banana"); 
Fruits.Items.Add("Cherry"); 
Fruits.Items.Add("Orange"); 
Fruits.Items.Add("Strawberry");
 
// Add the ListView to a parent container in the visual tree (that you created in the corresponding XAML file).
FruitsPanel.Children.Add(Fruits); 
Codice XAML corrispondente:Corresponding XAML Code:
<StackPanel Name="FruitsPanel"></StackPanel>

Entrambe le opzioni precedenti hanno come risultato lo stesso controllo ListView, come illustrato di seguito:Both of the above options will result in the same ListView, which is shown below:

Screenshot di una visualizzazione elenco semplice contenente un elenco di frutti. Screenshot of a simple List View showing a list of fruits.
Metodo 2: Aggiungere elementi impostando ItemsSource Method 2: Add items by setting the ItemsSource

Un controllo ListView or GridView viene in genere usato per visualizzare i dati provenienti da un'origine, ad esempio un database o Internet.You typically use a ListView or GridView to display data from a source such as a database or the Internet. Per popolare un controllo ListView o GridView a partire da un'origine dati, devi impostare la proprietà ItemsSource su una raccolta di elementi dati.To populate a ListView/GridView from a data source, you set its ItemsSource property to a collection of data items. Questo metodo è più efficace se ListView o GridView deve contenere oggetti classe personalizzati, come illustrato negli esempi seguenti.This method works better if your ListView or GridView is going to hold custom class objects, as shown in the examples below.

Opzione 1: Impostare ItemsSource in C#Option 1: Set ItemsSource in C#

Qui, la proprietà ItemsSource della visualizzazione elenco è impostata nel codice direttamente su un'istanza di una raccolta.Here, the list view's ItemsSource is set in code directly to an instance of a collection.

Codice C#:C# Code:
// Class defintion should be provided within the namespace being used, outside of any other classes.

this.InitializeComponent();

// Instead of adding hard coded items to an ObservableCollection as shown below, 
//the data could be pulled asynchronously from a database or the internet.
ObservableCollection<Contact> Contacts = new ObservableCollection<Contact>();

// Contact objects are created by providing a first name, last name, and company for the Contact constructor.
// They are then added to the ObservableCollection Contacts.
Contacts.Add(new Contact("John", "Doe", "ABC Printers"));
Contacts.Add(new Contact("Jane", "Doe", "XYZ Refridgerators"));
Contacts.Add(new Contact("Santa", "Claus", "North Pole Toy Factory Inc."));

// Create a new ListView (or GridView) for the UI, add content by setting ItemsSource
ListView ContactsLV = new ListView();
ContactsLV.ItemsSource = Contacts;

// Add the ListView to a parent container in the visual tree (that you created in the corresponding XAML file)
ContactPanel.Children.Add(ContactsLV);
Codice XAML:XAML Code:
<StackPanel x:Name="ContactPanel"></StackPanel>

Opzione 2: Impostare ItemsSource in XAMLOption 2: Set ItemsSource in XAML

Puoi anche associare la proprietà ItemsSource a una raccolta in XAML.You can also bind the ItemsSource property to a collection in the XAML. In questo caso, ItemsSource è associata a una proprietà pubblica denominata Contacts che espone la raccolta dei dati privati della pagina, _contacts.Here, the ItemsSource is bound to a public property named Contacts that exposes the Page's private data collection, _contacts.

XAMLXAML

<ListView x:Name="ContactsLV" ItemsSource="{x:Bind Contacts}"/>

C#C#

// Class defintion should be provided within the namespace being used, outside of any other classes.
// These two declarations belong outside of the main page class.
private ObservableCollection<Contact> _contacts = new ObservableCollection<Contact>();

public ObservableCollection<Contact> Contacts
{
    get { return this._contacts; }
}

// This method should be defined within your main page class.
protected override void OnNavigatedTo(NavigationEventArgs e)
{
    base.OnNavigatedTo(e);

    // Instead of hard coded items, the data could be pulled 
    // asynchronously from a database or the internet.
    Contacts.Add(new Contact("John", "Doe", "ABC Printers"));
    Contacts.Add(new Contact("Jane", "Doe", "XYZ Refridgerators"));
    Contacts.Add(new Contact("Santa", "Claus", "North Pole Toy Factory Inc."));
}

Entrambe le opzioni precedenti hanno come risultato lo stesso controllo ListView, come illustrato di seguito.Both of the above options will result in the same ListView, shown below. ListView mostra solo la rappresentazione stringa di ogni elemento perché non è stato specificato alcun modello di dati.The ListView only shows the string representation of each item because we did not provide a data template.

Una visualizzazione elenco semplice con la proprietà ItemsSource impostata

Importante

Senza alcun modello di dati definito, gli oggetti classe personalizzati verranno visualizzati in ListView solo con il relativo valore stringa, se per essi è definito un metodo ToString().With no data template defined, custom class objects will only appear in the ListView with their string value if they have a defined ToString() method.

La sezione successiva illustrerà in dettaglio come rappresentare visivamente elementi di classe semplici e personalizzati in un controllo ListView o GridView.The next section will go into detail on how to visually represent simple and custom class items properly in a ListView or GridView.

Per altre informazioni sul data binding, vedi Panoramica del data binding.For more info about data binding, see Data binding overview.

Nota

Se vuoi visualizzare dati raggruppati nel controllo ListView, devi eseguire il binding a CollectionViewSource.If you need to show grouped data in your ListView, you must bind to a CollectionViewSource. CollectionViewSource funge da proxy per la classe della raccolta in XAML e consente il supporto del raggruppamento.The CollectionViewSource acts as a proxy for the collection class in XAML and enables grouping support. Per altre info, vedi CollectionViewSource.For more info, see CollectionViewSource.

Personalizzazione dell'aspetto degli elementi con un oggetto DataTemplateCustomizing the look of items with a DataTemplate

Un modello di dati in un controllo ListView o GridView definisce la modalità di visualizzazione degli elementi o dei dati.A data template in a ListView or GridView defines how the items/data are visualized. Per impostazione predefinita, un elemento dati viene mostrato nel controllo ListView come rappresentazione stringa dell'oggetto dati a cui è associato.By default, a data item is displayed in the ListView as the string representation of the data object it's bound to. Puoi mostrare la rappresentazione in forma di stringa di una particolare proprietà dell'elemento di dati impostando DisplayMemberPath su tale proprietà.You can show the string representation of a particular property of the data item by setting the DisplayMemberPath to that property.

In genere, tuttavia, avrai bisogno di mostrare una presentazione più elaborata dei dati.However, you typically want to show a more rich presentation of your data. Per specificare con precisione come visualizzare gli elementi nel controllo ListView o GridView, puoi creare un oggetto DataTemplate.To specify exactly how items in the ListView/GridView are displayed, you create a DataTemplate. Il codice XAML in DataTemplate definisce il layout e l'aspetto dei controlli usati per visualizzare un singolo elemento.The XAML in the DataTemplate defines the layout and appearance of controls used to display an individual item. I controlli nel layout possono essere associati alle proprietà di un oggetto dati oppure può essere definito contenuto statico inline.The controls in the layout can be bound to properties of a data object, or have static content defined inline.

Nota

Quando usi l'estensione di markup x:Bind in un oggetto DataTemplate, devi specificare l'oggetto DataType (x:DataType) in DataTemplate.When you use the x:Bind markup extension in a DataTemplate, you have to specify the DataType (x:DataType) on the DataTemplate.

Modello di dati semplice per ListViewSimple ListView Data Template

In questo esempio, l'elemento di dati è una stringa semplice.In this example, the data item is a simple string. Un oggetto DataTemplate viene definito inline all'interno della definizione di ListView per aggiungere un'immagine a sinistra della stringa e mostrare la stringa di colore verde acqua.A DataTemplate is defined inline within the ListView definition to add an image to the left of the string, and show the string in teal. Si tratta dello stesso controllo ListView creato con il metodo 1 e l'opzione 1 illustrati in precedenza.This is the same ListView created from using Method 1 and Option 1 shown above.

XAMLXAML

<!--No corresponding C# code is needed for this example.-->
<ListView x:Name="FruitsList">
                <ListView.ItemTemplate>
                    <DataTemplate x:DataType="x:String">
                        <Grid>
                            <Grid.ColumnDefinitions>
                                <ColumnDefinition Width="47"/>
                                <ColumnDefinition/>
                            </Grid.ColumnDefinitions>
                            <Image Source="Assets/placeholder.png" Width="32" Height="32"
                                HorizontalAlignment="Left" VerticalAlignment="Center"/>
                            <TextBlock Text="{x:Bind}" Foreground="Teal" FontSize="14" 
                                Grid.Column="1" VerticalAlignment="Center"/>
                        </Grid>
                    </DataTemplate>
                </ListView.ItemTemplate>
                <x:String>Apricot</x:String>
                <x:String>Banana</x:String>
                <x:String>Cherry</x:String>
                <x:String>Orange</x:String>
                <x:String>Strawberry</x:String>
            </ListView>

Ecco l'aspetto degli elementi dati visualizzati con questo modello di dati in un controllo ListView:Here's what the data items look like when displayed with this data template in a ListView:

Elementi di ListView con un modello di dati

Modello di dati ListView per oggetti classe personalizzatiListView Data Template for Custom Class Objects

In questo esempio, l'elemento dati è un oggetto Contact.In this example, the data item is a Contact object. Un oggetto DataTemplate viene definito inline all'interno della definizione di ListView per aggiungere l'immagine del contatto a sinistra del nome e della società.A DataTemplate is defined inline within the ListView definition to add the contact image to the left of the Contact name and company. Questo oggetto ListView è stato creato tramite il metodo 2 e l'opzione 2 illustrati in precedenza.This ListView was created by using Method 2 and Option 2 mentioned above.

<ListView x:Name="ContactsLV" ItemsSource="{x:Bind Contacts}">
    <ListView.ItemTemplate>
        <DataTemplate x:DataType="local:Contact">
            <Grid>
                <Grid.RowDefinitions>
                    <RowDefinition Height="*"/>
                    <RowDefinition Height="*"/>
                </Grid.RowDefinitions>
                <Grid.ColumnDefinitions>
                    <ColumnDefinition Width="Auto"/>
                    <ColumnDefinition Width="*"/>
                </Grid.ColumnDefinitions>
                <Image Grid.Column="0" Grid.RowSpan="2" Source="Assets/grey-placeholder.png" Width="32"
                    Height="32" HorizontalAlignment="Center" VerticalAlignment="Center"></Image>
                <TextBlock Grid.Column="1" Text="{x:Bind Name}" Margin="12,6,0,0" 
                    Style="{ThemeResource BaseTextBlockStyle}"/>
                <TextBlock  Grid.Column="1" Grid.Row="1" Text="{x:Bind Company}" Margin="12,0,0,6" 
                    Style="{ThemeResource BodyTextBlockStyle}"/>
            </Grid>
        </DataTemplate>
    </ListView.ItemTemplate>
</ListView>

Ecco l'aspetto degli elementi dati visualizzati usando questo modello di dati in un controllo ListView:Here's what the data items look like when displayed using this data template in a ListView:

Elementi di classe personalizzati in ListView con un modello di dati

I modelli di dati rappresentano il modo principale per definire l'aspetto del controllo ListView.Data templates are the primary way you define the look of your ListView. Possono anche avere un impatto notevole sulle prestazioni se l'elenco include un numero elevato di elementi.They can also have a significant impact on performance if your list holds a large number of items.

Il modello di dati può essere definito inline, all'interno della definizione di ListView o GridView mostrata in precedenza, o separatamente in una sezione Resources.Your data template can be defined inline within the ListView/GridView definition (shown above), or separately in a Resources section. Se definito all'esterno del controllo ListView o GridView, l'oggetto DataTemplate deve avere un attributo x:Key e deve essere assegnato alla proprietà ItemTemplate del controllo ListView o GridView con tale chiave.If defined outside of the ListView/GridView itself, the DataTemplate must be given an x:Key attribute and be assigned to the ItemTemplate property of the ListView or GridView using that key.

Per altre info ed esempi su come usare modelli di dati e contenitori di elementi per definire l'aspetto degli elementi nell'elenco o nella griglia, vedi Modelli e contenitori di elementi.For more info and examples of how to use data templates and item containers to define the look of items in your list or grid, see Item containers and templates.

Modificare il layout degli elementiChange the layout of items

Quando aggiungi elementi a ListView o GridView, il controllo inserisce automaticamente ogni elemento in un contenitore di elementi e quindi definisce il layout di tutti i contenitori di elementi.When you add items to a ListView or GridView, the control automatically wraps each item in an item container and then lays out all of the item containers. Il layout di questi contenitori di elementi dipende dall'ItemsPanel del controllo.How these item containers are laid out depends on the ItemsPanel of the control.

  • Per impostazione predefinita, ListView usa ItemsStackPanel, che produce un elenco verticale, simile al seguente.By default, ListView uses an ItemsStackPanel, which produces a vertical list, like this.

Screenshot di una visualizzazione elenco semplice contenente un elenco di elementi.

  • GridView usa ItemsWrapGrid, che aggiunge gli elementi orizzontalmente. Gli elementi vanno poi a capo e scorrono in verticale, come nella figura seguente.GridView uses an ItemsWrapGrid, which adds items horizontally, and wraps and scrolls vertically, like this.

Visualizzazione griglia di esempio

Puoi cambiare il layout degli elementi modificando le proprietà nel pannello degli elementi oppure puoi sostituire il pannello predefinito con un altro pannello.You can modify the layout of items by adjusting properties on the items panel, or you can replace the default panel with another panel.

Nota

Se modifichi ItemsPanel, fai attenzione a non disabilitare la virtualizzazione.Be careful to not disable virtualization if you change the ItemsPanel. Sia ItemsStackPanel che ItemsWrapGrid supportano la virtualizzazione, quindi possono essere usati tranquillamente.Both ItemsStackPanel and ItemsWrapGrid support virtualization, so these are safe to use. Se usi qualsiasi altro pannello, potresti disabilitare la virtualizzazione e rallentare le prestazioni della visualizzazione elenco.If you use any other panel, you might disable virtualization and slow the performance of the list view. Per altre info, vedi gli articoli relativi alla visualizzazione elenco in Prestazioni.For more info, see the list view articles under Performance.

Questo esempio mostra come fare in modo che un controllo ListView disponga i relativi contenitori di elementi in un elenco orizzontale modificando la proprietà Orientation di ItemsStackPanel.This example shows how to make a ListView lay out its item containers in a horizontal list by changing the Orientation property of the ItemsStackPanel. Dato che la visualizzazione elenco scorre in verticale per impostazione predefinita, devi anche modificare alcune proprietà dello ScrollViewer interno della visualizzazione elenco per ottenere lo scorrimento orizzontale.Because the list view scrolls vertically by default, you also need to adjust some properties on the list view’s internal ScrollViewer to make it scroll horizontally.

Importante

Questi esempi sono mostrati con una larghezza senza vincoli per la visualizzazione elenco, quindi le barre di scorrimento orizzontale non sono visibili.These examples are shown with the list view width unconstrained, so the horizontal scrollbars are not shown. Se esegui questo codice, puoi impostare Width="180" in ListView per visualizzare le barre di scorrimento.If you run this code, you can set Width="180" on the ListView to make the scrollbars show.

XAMLXAML

<ListView Height="60" 
          ScrollViewer.HorizontalScrollMode="Enabled" 
          ScrollViewer.HorizontalScrollBarVisibility="Auto"
          ScrollViewer.VerticalScrollMode="Disabled"
          ScrollViewer.VerticalScrollBarVisibility="Hidden">
    <ListView.ItemsPanel>
        <ItemsPanelTemplate>
            <ItemsStackPanel Orientation="Horizontal"/>
        </ItemsPanelTemplate>
    </ListView.ItemsPanel>
    <x:String>Apricot</x:String>
    <x:String>Banana</x:String>
    <x:String>Cherry</x:String>
    <x:String>Orange</x:String>
    <x:String>Strawberry</x:String>
</ListView>

L'elenco risultante ha questo aspetto.The resulting list looks like this.

Visualizzazione elenco orizzontale

Nel prossimo esempio, gli elementi del controllo ListView sono disposti in un elenco verticale che va a capo usando ItemsWrapGrid al posto di ItemsStackPanel.In the next example, the ListView lays out items in a vertical wrapping list by using an ItemsWrapGrid instead of an ItemsStackPanel.

Importante

L'altezza della visualizzazione elenco deve essere limitata in modo da forzare l'inclusione dei contenitori nel controllo.The height of the list view must be constrained to force the control to wrap the containers.

XAMLXAML

<ListView Height="100"
          ScrollViewer.HorizontalScrollMode="Enabled" 
          ScrollViewer.HorizontalScrollBarVisibility="Auto"
          ScrollViewer.VerticalScrollMode="Disabled"
          ScrollViewer.VerticalScrollBarVisibility="Hidden">
    <ListView.ItemsPanel>
        <ItemsPanelTemplate>
            <ItemsWrapGrid/>
        </ItemsPanelTemplate>
    </ListView.ItemsPanel>
    <x:String>Apricot</x:String>
    <x:String>Banana</x:String>
    <x:String>Cherry</x:String>
    <x:String>Orange</x:String>
    <x:String>Strawberry</x:String>
</ListView>

L'elenco risultante ha questo aspetto.The resulting list looks like this.

Visualizzazione elenco con layout a griglia

Se mostri dati raggruppati nella visualizzazione elenco, ItemsPanel determina il layout dei gruppi di elementi e non quello dei singoli elementi. Ad esempio, se l'ItemsStackPanel orizzontale illustrato in precedenza viene usato per visualizzare dati raggruppati, i gruppi sono disposti in orizzontale, ma gli elementi in ogni gruppo sono ancora impilati verticalmente, come illustrato qui.If you show grouped data in your list view, the ItemsPanel determines how the item groups are layed out, not how the individual items are layed out. For example, if the horizontal ItemsStackPanel shown previously is used to show grouped data, the groups are arranged horizontally, but the items in each group are still stacked vertically, as shown here.

Visualizzazione elenco orizzontale raggruppata

Selezione degli elementi e interazioniItem selection and interaction

Puoi scegliere tra vari modi per consentire a un utente di interagire con una visualizzazione elenco.You can choose from various ways to let a user interact with a list view. Per impostazione predefinita, un utente può selezionare un singolo elemento.By default, a user can select a single item. Puoi modificare la proprietà SelectionMode per abilitare le selezione multipla o disabilitare la selezione.You can change the SelectionMode property to enable multi-selection or to disable selection. Puoi impostare la proprietà IsItemClickEnabled in modo che un utente faccia clic su un elemento per richiamare un'azione (ad esempio un pulsante) invece di selezionare l'elemento.You can set the IsItemClickEnabled property so that a user clicks an item to invoke an action (like a button) instead of selecting the item.

Nota  Sia ListView che GridView usano l'enumerazione ListViewSelectionMode per le proprietà SelectionMode.Note  Both ListView and GridView use the ListViewSelectionMode enumeration for their SelectionMode properties. IsItemClickEnabled è False per impostazione predefinita, quindi è necessario impostarla solo per abilitare la modalità clic.IsItemClickEnabled is False by default, so you need to set it only to enable click mode.

Questa tabella mostra i modi in cui un utente può interagire con una visualizzazione elenco e come puoi rispondere all'interazione.This table shows the ways a user can interact with a list view, and how you can respond to the interaction.

Per abilitare questa interazione:To enable this interaction: Usa queste impostazioni:Use these settings: Gestisci questo evento:Handle this event: Usa questa proprietà per recuperare l'elemento selezionato:Use this property to get the selected item:
Nessuna interazioneNo interaction SelectionMode = None, IsItemClickEnabled = FalseSelectionMode = None, IsItemClickEnabled = False N/DN/A N/DN/A
Selezione singolaSingle selection SelectionMode = Single, IsItemClickEnabled = FalseSelectionMode = Single, IsItemClickEnabled = False SelectionChangedSelectionChanged SelectedItem, SelectedIndexSelectedItem, SelectedIndex
Selezione multiplaMultiple selection SelectionMode = Multiple, IsItemClickEnabled = FalseSelectionMode = Multiple, IsItemClickEnabled = False SelectionChangedSelectionChanged SelectedItemsSelectedItems
Selezione estesaExtended selection SelectionMode = Extended, IsItemClickEnabled = FalseSelectionMode = Extended, IsItemClickEnabled = False SelectionChangedSelectionChanged SelectedItemsSelectedItems
Fare clic suClick SelectionMode = None, IsItemClickEnabled = TrueSelectionMode = None, IsItemClickEnabled = True ItemClickItemClick N/DN/A

Nota  A partire da Windows 10, puoi abilitare IsItemClickEnabled per la generazione di un evento ItemClick mentre il valore di SelectionMode è impostato su Single, Multiple o Extended.Note  Starting in Windows 10, you can enable IsItemClickEnabled to raise an ItemClick event while SelectionMode is also set to Single, Multiple, or Extended. In questo caso, viene prima generato l'evento ItemClick e poi l'evento SelectionChanged.If you do this, the ItemClick event is raised first, and then the SelectionChanged event is raised. In alcuni casi, ad esempio se passi a un'altra pagina nel gestore dell'evento ItemClick, l'evento SelectionChanged non viene generato e l'elemento non viene selezionato.In some cases, like if you navigate to another page in the ItemClick event handler, the SelectionChanged event is not raised and the item is not selected.

Puoi impostare queste proprietà in XAML o nel codice, come illustrato qui.You can set these properties in XAML or in code, as shown here.

XAMLXAML

<ListView x:Name="myListView" SelectionMode="Multiple"/>

<GridView x:Name="myGridView" SelectionMode="None" IsItemClickEnabled="True"/> 

C#C#

myListView.SelectionMode = ListViewSelectionMode.Multiple; 

myGridView.SelectionMode = ListViewSelectionMode.None;
myGridView.IsItemClickEnabled = true;

Sola letturaRead-only

Puoi impostare la proprietà SelectionMode su ListViewSelectionMode.None per disabilitare la selezione di elementi.You can set the SelectionMode property to ListViewSelectionMode.None to disable item selection. Per il controllo viene così attivatala modalità di sola lettura, da usare per la visualizzazione dei dati, ma non per le interazioni.This puts the control in read only mode, to be used for displaying data, but not for interacting with it. Il controllo stesso non viene disabilitato, ma viene disabilitata solo la selezione di elementi.The control itself is not disabled, only item selection is disabled.

Selezione singolaSingle selection

Questa tabella descrive le interazioni tramite tastiera, mouse e tocco quando SelectionMode è Single.This table describes the keyboard, mouse, and touch interactions when SelectionMode is Single.

Tasto di modificaModifier key InterazioneInteraction
NessunoNone
  • Un utente può selezionare un singolo elemento con la barra spaziatrice, un clic del mouse o toccandolo.A user can select a single item using the space bar, mouse click, or touch tap.
  • CTRLCtrl
  • Un utente può deselezionare un singolo elemento con la barra spaziatrice, un clic del mouse o toccandolo.A user can deselect a single item using the space bar, mouse click, or touch tap.
  • Usando i tasti di direzione, un utente può spostare lo stato attivo indipendentemente dalla selezione.Using the arrow keys, a user can move focus independently of selection.
  • Quando SelectionMode è Single, puoi ottenere l'elemento dati selezionato dalla proprietà SelectedItem.When SelectionMode is Single, you can get the selected data item from the SelectedItem property. Puoi recuperare l'indice nella raccolta dell'elemento selezionato usando la proprietà SelectedIndex.You can get the index in the collection of the selected item using the SelectedIndex property. Se non è selezionato alcun elemento, SelectedItem è null e SelectedIndex è -1.If no item is selected, SelectedItem is null, and SelectedIndex is -1.

    Se tenti di impostare un elemento che non è incluso nella raccolta Items come SelectedItem, l'operazione viene ignorata e SelectedItem è null.If you try to set an item that is not in the Items collection as the SelectedItem, the operation is ignored and SelectedItem isnull. Se invece tenti di impostare SelectedIndex su un indice non incluso nell'intervallo di Items nell'elenco, viene generata un'eccezione ArgumentException.However, if you try to set the SelectedIndex to an index that's out of the range of the Items in the list, a System.ArgumentException exception occurs.

    Selezione multiplaMultiple selection

    Questa tabella descrive le interazioni tramite tastiera, mouse e tocco quando SelectionMode è Multiple.This table describes the keyboard, mouse, and touch interactions when SelectionMode is Multiple.

    Tasto di modificaModifier key InterazioneInteraction
    NessunoNone
  • Un utente può selezionare più elementi con la barra spaziatrice, un clic del mouse o toccandoli per attivare/disattivare la selezione per l'elemento con lo stato attivo.A user can select multiple items using the space bar, mouse click, or touch tap to toggle selection on the focused item.
  • Usando i tasti di direzione, un utente può spostare lo stato attivo indipendentemente dalla selezione.Using the arrow keys, a user can move focus independently of selection.
  • MAIUSCShift
  • Un utente può selezionare più elementi contigui facendo clic o toccando il primo elemento nella selezione e poi l'ultimo elemento nella selezione.A user can select multiple contiguous items by clicking or tapping the first item in the selection and then the last item in the selection.
  • Usando i tasti di direzione, un utente può creare una selezione contigua a partire dall'elemento selezionato quando viene premuto MAIUSC.Using the arrow keys, a user can create a contiguous selection starting with the item selected when Shift is pressed.
  • Selezione estesaExtended selection

    Questa tabella descrive le interazioni tramite tastiera, mouse e tocco quando SelectionMode è Extended.This table describes the keyboard, mouse, and touch interactions when SelectionMode is Extended.

    Tasto di modificaModifier key InterazioneInteraction
    NessunoNone
  • Il comportamento è lo stesso della modalità di selezione Single.The behavior is the same as Single selection.
  • CTRLCtrl
  • Un utente può selezionare più elementi con la barra spaziatrice, un clic del mouse o toccandoli per attivare/disattivare la selezione per l'elemento con lo stato attivo.A user can select multiple items using the space bar, mouse click, or touch tap to toggle selection on the focused item.
  • Usando i tasti di direzione, un utente può spostare lo stato attivo indipendentemente dalla selezione.Using the arrow keys, a user can move focus independently of selection.
  • MAIUSCShift
  • Un utente può selezionare più elementi contigui facendo clic o toccando il primo elemento nella selezione e poi l'ultimo elemento nella selezione.A user can select multiple contiguous items by clicking or tapping the first item in the selection and then the last item in the selection.
  • Usando i tasti di direzione, un utente può creare una selezione contigua a partire dall'elemento selezionato quando viene premuto MAIUSC.Using the arrow keys, a user can create a contiguous selection starting with the item selected when Shift is pressed.
  • Quando SelectionMode è Multiple o Extended, puoi ottenere gli elementi dati selezionati dalla proprietà SelectedItems.When SelectionMode is Multiple or Extended, you can get the selected data items from the SelectedItems property.

    Le proprietà SelectedIndex, SelectedItem e SelectedItems sono sincronizzate.The SelectedIndex, SelectedItem, and SelectedItems properties are synchronized. Ad esempio, se imposti SelectedIndex su -1, SelectedItem viene impostata su null e SelectedItems è vuota. Se imposti SelectedItem su null, SelectedIndex viene impostata su -1 e SelectedItems è vuota.For example, if you set SelectedIndex to -1, SelectedItem is set to null and SelectedItems is empty; if you set SelectedItem to null, SelectedIndex is set to -1 and SelectedItems is empty.

    Nella modalità di selezione multipla, SelectedItem contiene l'elemento selezionato per primo e Selectedindex contiene l'indice dell'elemento selezionato per primo.In multi-select mode, SelectedItem contains the item that was selected first, and Selectedindex contains the index of the item that was selected first.

    Rispondere alle modifiche della selezioneRespond to selection changes

    Per rispondere alle modifiche della selezione in una visualizzazione elenco, gestisci l'evento SelectionChanged.To respond to selection changes in a list view, handle the SelectionChanged event. Nel codice del gestore dell'evento puoi recuperare l'elenco degli elementi selezionati dalla proprietà SelectionChangedEventArgs.AddedItems.In the event handler code, you can get the list of selected items from the SelectionChangedEventArgs.AddedItems property. Puoi ottenere tutti gli elementi che sono stati deselezionati dalla proprietà SelectionChangedEventArgs.RemovedItems.You can get any items that were deselected from the SelectionChangedEventArgs.RemovedItems property. Le raccolte AddedItems e RemovedItems contengono al massimo 1 elemento, a meno che l'utente non selezioni un intervallo di elementi tenendo premuto MAIUSC.The AddedItems and RemovedItems collections contain at most 1 item unless the user selects a range of items by holding down the Shift key.

    Questo esempio mostra come gestire l'evento SelectionChanged e accedere a varie raccolte di elementi.This example shows how to handle the SelectionChanged event and access the various items collections.

    XAMLXAML

    <StackPanel HorizontalAlignment="Right">
        <ListView x:Name="listView1" SelectionMode="Multiple" 
                  SelectionChanged="ListView1_SelectionChanged">
            <x:String>Apricot</x:String>
            <x:String>Banana</x:String>
            <x:String>Cherry</x:String>
            <x:String>Orange</x:String>
            <x:String>Strawberry</x:String>
        </ListView>
        <TextBlock x:Name="selectedItem"/>
        <TextBlock x:Name="selectedIndex"/>
        <TextBlock x:Name="selectedItemCount"/>
        <TextBlock x:Name="addedItems"/>
        <TextBlock x:Name="removedItems"/>
    </StackPanel> 
    

    C#C#

    private void ListView1_SelectionChanged(object sender, SelectionChangedEventArgs e)
    {
        if (listView1.SelectedItem != null)
        {
            selectedItem.Text = 
                "Selected item: " + listView1.SelectedItem.ToString();
        }
        else
        {
            selectedItem.Text = 
                "Selected item: null";
        }
        selectedIndex.Text = 
            "Selected index: " + listView1.SelectedIndex.ToString();
        selectedItemCount.Text = 
            "Items selected: " + listView1.SelectedItems.Count.ToString();
        addedItems.Text = 
            "Added: " + e.AddedItems.Count.ToString();
        removedItems.Text = 
            "Removed: " + e.RemovedItems.Count.ToString();
    }
    

    Modalità clicClick mode

    Puoi modificare una visualizzazione elenco in modo tale che un utente possa fare clic su elementi come i pulsanti invece di selezionarli.You can change a list view so that a user clicks items like buttons instead of selecting them. Ciò è utile, ad esempio, quando l'app apre una nuova pagina non appena l'utente fa clic su un elemento in un elenco o in una griglia.For example, this is useful when your app navigates to a new page when your user clicks an item in a list or grid. Per abilitare questo comportamento:To enable this behavior:

    • Imposta SelectionMode su None.Set SelectionMode to None.
    • Imposta IsItemClickEnabled su true.Set IsItemClickEnabled to true.
    • Gestisci l'evento ItemClick in modo da eseguire qualcosa quando l'utente fa clic su un elemento.Handle the ItemClick event to do something when your user clicks an item.

    Ecco una visualizzazione elenco con elementi sui quali è possibile fare clic.Here's a list view with clickable items. Il codice nel gestore dell'evento ItemClick passa a una nuova pagina.The code in the ItemClick event handler navigates to a new page.

    XAMLXAML

    <ListView SelectionMode="None"
              IsItemClickEnabled="True" 
              ItemClick="ListView1_ItemClick">
        <x:String>Page 1</x:String>
        <x:String>Page 2</x:String>
        <x:String>Page 3</x:String>
        <x:String>Page 4</x:String>
        <x:String>Page 5</x:String>
    </ListView>
    

    C#C#

    private void ListView1_ItemClick(object sender, ItemClickEventArgs e)
    {
        switch (e.ClickedItem.ToString())
        {
            case "Page 1":
                this.Frame.Navigate(typeof(Page1));
                break;
    
            case "Page 2":
                this.Frame.Navigate(typeof(Page2));
                break;
    
            case "Page 3":
                this.Frame.Navigate(typeof(Page3));
                break;
    
            case "Page 4":
                this.Frame.Navigate(typeof(Page4));
                break;
    
            case "Page 5":
                this.Frame.Navigate(typeof(Page5));
                break;
    
            default:
                break;
        }
    }
    

    Selezionare un intervallo di elementi a livello di codiceSelect a range of items programmatically

    A volte, dovrai modificare la selezione di elementi in una visualizzazione elenco a livello di codice.Sometimes, you need to manipulate a list view’s item selection programmatically. Ad esempio, potresti avere un pulsante Seleziona tutto per consentire a un utente di selezionare tutti gli elementi in un elenco.For example, you might have a Select all button to let a user select all items in a list. In questo caso, non è in genere molto efficiente aggiungere e rimuovere singoli elementi uno alla volta dalla raccolta SelectedItems.In this case, it’s usually not very efficient to add and remove items from the SelectedItems collection one by one. Ogni modifica di elemento causa la generazione dell'evento SelectionChanged e quando lavori direttamente sugli elementi invece di usare i valori di indice, la virtualizzazione dell'elemento viene annullata.Each item change causes a SelectionChanged event to occur, and when you work with the items directly instead of working with index values, the item is de-virtualized.

    I metodi SelectAll, SelectRange e DeselectRange rappresentano un modo più efficiente per modificare la selezione rispetto all'uso della proprietà SelectedItems.The SelectAll, SelectRange, and DeselectRange methods provide a more efficient way to modify the selection than using the SelectedItems property. Questi metodi consentono di eseguire la selezione o la deselezione usando intervalli di indici degli elementi.These methods select or deselect using ranges of item indexes. Gli elementi virtualizzati rimangano virtualizzati, perché viene usato solo l'indice.Items that are virtualized remain virtualized, because only the index is used. Vengono selezionati (o deselezionati) tutti gli elementi nell'intervallo specificato, indipendentemente dallo stato di selezione originale.All items in the specified range are selected (or deselected), regardless of their original selection state. L'evento SelectionChanged si verifica una sola volta per ogni chiamata di questi metodi.The SelectionChanged event occurs only once for each call to these methods.

    Importante

    Dovresti chiamare questi metodi solo quando la proprietà SelectionMode è impostata su Multiple o Extended.You should call these methods only when the SelectionMode property is set to Multiple or Extended. Se chiami SelectRange quando SelectionMode è Single o None, viene generata un'eccezione.If you call SelectRange when the SelectionMode is Single or None, an exception is thrown.

    Quando selezioni elementi tramite intervalli di indici, usa la proprietà SelectedRanges per ottenere tutti gli intervalli selezionati nell'elenco.When you select items using index ranges, use the SelectedRanges property to get all selected ranges in the list.

    Se ItemsSource implementa IItemsRangeInfo e usi questi metodi per modificare la selezione, le proprietà AddedItems e RemovedItems non vengono impostate in SelectionChangedEventArgs.If the ItemsSource implements IItemsRangeInfo, and you use these methods to modify the selection, the AddedItems and RemovedItems properties are not set in the SelectionChangedEventArgs. L'impostazione di queste proprietà richiede l'annullamento della virtualizzazione per l'oggetto elemento.Setting these properties requires de-virtualizing the item object. Usa invece la proprietà SelectedRanges per ottenere gli elementi.Use the SelectedRanges property to get the items instead.

    Puoi selezionare tutti gli elementi in una raccolta chiamando il metodo SelectAll.You can select all items in a collection by calling the SelectAll method. Non esiste però un metodo corrispondente per deselezionare tutti gli elementi.However, there is no corresponding method to deselect all items. Puoi deselezionare tutti gli elementi chiamando DeselectRange e passando un ItemIndexRange con valore 0 per FirstIndex e un valore Length pari al numero di elementi nella raccolta.You can deselect all items by calling DeselectRange and passing an ItemIndexRange with a FirstIndex value of 0 and a Length value equal to the number of items in the collection. Questa impostazione è illustrata nell'esempio seguente, insieme a un'opzione per selezionare tutti gli elementi.This is shown in the example below, along with an option to select all items.

    XAMLXAML

    <StackPanel Width="160">
        <Button Content="Select all" Click="SelectAllButton_Click"/>
        <Button Content="Deselect all" Click="DeselectAllButton_Click"/>
        <ListView x:Name="listView1" SelectionMode="Multiple">
            <x:String>Apricot</x:String>
            <x:String>Banana</x:String>
            <x:String>Cherry</x:String>
            <x:String>Orange</x:String>
            <x:String>Strawberry</x:String>
        </ListView>
    </StackPanel>
    

    C#C#

    private void SelectAllButton_Click(object sender, RoutedEventArgs e)
    {
        if (listView1.SelectionMode == ListViewSelectionMode.Multiple ||
            listView1.SelectionMode == ListViewSelectionMode.Extended)
        {
            listView1.SelectAll();
        }
    }
    
    private void DeselectAllButton_Click(object sender, RoutedEventArgs e)
    {
        if (listView1.SelectionMode == ListViewSelectionMode.Multiple ||
            listView1.SelectionMode == ListViewSelectionMode.Extended)
        {
            listView1.DeselectRange(new ItemIndexRange(0, (uint)listView1.Items.Count));
        }
    }
    

    Per informazioni su come modificare l'aspetto degli elementi selezionati, vedi Modelli e contenitori di elementi.For info about how to change the look of selected items, see Item containers and templates.

    Trascinamento della selezioneDrag and drop

    I controlli ListView e GridView supportano il trascinamento di elementi all'interno di se stessi e in altri controlli ListView e GridView.ListView and GridView controls support drag and drop of items within themselves, and between themselves and other ListView and GridView controls. Per altre info sull'implementazione del modello di trascinamento della selezione, vedi Trascinamento della selezione.For more info about implementing the drag and drop pattern, see Drag and drop.

    Scaricare il codice di esempioGet the sample code