Visualizzazione elenco e visualizzazione griglia

La maggior parte delle applicazioni modifica e visualizza set di dati, ad esempio una raccolta di immagini o un set di messaggi di posta elettronica. Il framework dell'interfaccia utente XAML fornisce controlli ListView e GridView che semplificano la visualizzazione e la modifica dei dati nell'app.

È possibile supportare le richieste di risposta fornite dal sistema dall'hardware Sono entrambi facili da implementare e forniscono un'interfaccia utente di base e funzionalità di interazione e scorrimento, oltre a essere facilmente personalizzabili. ListView e GridView possono essere associati a origini dati dinamiche esistenti o a dati hardcoded forniti nel codice XAML stesso o nel code-behind.

Entrambi i controlli sono flessibili da usare in diversi scenari, ma, in generale, funzionano meglio con le raccolte in cui tutti gli elementi hanno la stessa struttura e aspetto di base, nonché lo stesso comportamento di interazione. Ovvero, tutti devono eseguire la stessa azione quando si fa clic (ad esempio, per aprire un collegamento o sfogliare).

Comparare ListView e GridView

ListView

Il controllo ListView visualizza i dati in pila verticalmente in una singola colonna. 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). Tra i casi d'uso comuni di ListView sono inclusi gli elenchi di messaggi e i risultati delle ricerche. Se è necessario visualizzare raccolte in più colonne o in un formato simile a una tabella, non è consigliabile usare ListView. Prendere invece in considerazione l'uso di un controllo DataGrid .

GridView

Il controllo GridView presenta una raccolta di elementi in righe e colonne che è possibile scorrere verticalmente. I dati vengono impilati orizzontalmente finché non riempiono una colonna e quindi continuano con la riga successiva nella colonna. 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. Un caso d'uso comune di GridView consiste in una raccolta di foto o prodotti.

Quale controllo di raccolta usare? Un confronto con ItemsRepeater

È importante comprendere le differenze tra questi tipi di controlli prima di decidere quale usare.

ListView e GridView

I controlli ListView e GridView avanzati funzionano per impostazione predefinita. Non richiedono personalizzazioni, ma possono essere personalizzate facilmente. Ognuno ha un'interfaccia utente e un'esperienza utente predefinita ed è progettato per visualizzare quasi qualsiasi tipo di raccolta così come è.

ItemsRepeater

Il controllo ItemsRepeater viene utilizzato per visualizzare le raccolte, ma è progettato come elemento costitutivo per la creazione di un controllo personalizzato adatto ai requisiti particolari dell'interfaccia utente. Non ha le stesse funzionalità e funzionalità predefinite di ListView e GridView, quindi dovrai implementare le funzionalità o le interazioni necessarie. Utilizza ItemsRepeater se disponi di un'interfaccia utente altamente personalizzata che non puoi creare utilizzando ListView o GridView o se l'origine dati richiede un comportamento diverso per ogni elemento.

Per altre informazioni su ItemsRepeater, vedi le linee guida e le pagine della documentazione dell'API.

Piattaforma UWP e WinUI 2

Le API per questi controlli esistono nello spazio dei nomi Windows.UI.Xaml.Controls.

È consigliabile usare la versione più recente di WinUI 2 per ottenere gli stili e i modelli più recenti per tutti i controlli.

Creare una visualizzazione elenco o una visualizzazione griglia

L'app Raccolta WinUI 3 include esempi interattivi della maggior parte dei controlli e delle funzionalità di WinUI 3. Scaricare l'app da Microsoft Store od ottenere il codice sorgente su GitHub

Entrambi i controlli ListView e GridView sono tipi ItemsControl e possono quindi contenere una raccolta di elementi di qualsiasi tipo. Prima di poter visualizzare qualcosa sullo schermo, ListView o GridView deve includere elementi nella relativa raccolta Items. Per popolare la visualizzazione, aggiungere elementi all'insieme oppure impostare la proprietà ItemsSource su un'origine dati.

Molti degli esempi in questo articolo popolano la raccolta Items direttamente, per semplicità. Tuttavia, è più comune che gli elementi di un elenco provengano da un'origine dinamica, ad esempio un elenco di libri da un database online. A questo scopo, puoi usare la proprietà ItemsSource.

Aggiungere elementi a un controllo ListView o GridView

Per aggiungere elementi alla raccolta Items di ListView o GridView puoi usare XAML o il codice. 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.

Metodo 1: aggiungere elementi alla raccolta Items

• Opzione 1: Aggiungere elementi tramite 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 codice

  <StackPanel Name="FruitsPanel"></StackPanel>
  

  // 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 (which you created in the corresponding XAML file).
  FruitsPanel.Children.Add(Fruits);
  

Entrambe queste opzioni producono la stessa visualizzazione elenco, come illustrato di seguito:

Metodo 2: Aggiungere elementi impostando la proprietà ItemsSource

Un controllo ListView or GridView viene in genere usato per visualizzare i dati provenienti da un'origine, ad esempio un database o 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. Questo metodo è più efficace se ListView o GridView deve contenere oggetti classe personalizzati, come illustrato negli esempi seguenti.

• Opzione 1: Impostare ItemsSource nel codice

  In questo caso la proprietà ListView ItemsSource è impostata nel codice direttamente su un'istanza di una raccolta.

  <StackPanel x:Name="ContactPanel"></StackPanel>
  

  // Class definition 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 here,
  //the data could be pulled asynchronously from a database or the internet.
  ObservableCollection<Contact> Contacts = new ObservableCollection<Contact>();
  
  // You create Contact objects 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", "Contoso, LTD."));
  Contacts.Add(new Contact("Jane", "Doe", "Fabrikam, Inc."));
  Contacts.Add(new Contact("Santa", "Claus", "Alpine Ski House"));
  
  // Create a new ListView (or GridView) for the UI, and add content by setting ItemsSource
  ListView ContactsLV = new ListView();
  ContactsLV.ItemsSource = Contacts;
  
  // Add the ListView to a parent container in the visual tree (which you created in the corresponding XAML file)
  ContactPanel.Children.Add(ContactsLV);
  

• Opzione 2: Impostare ItemsSource in XAML

  Puoi anche associare la proprietà ItemsSource a una raccolta in XAML. In questo caso ItemsSource è associato a una proprietà pubblica denominata Contatti, che espone la raccolta di dati privati della pagina, denominata _contacts.

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

  // Provide a class definition within the namespace being used, outside of any other classes.
  // These two declarations belong outside the main page class.
  private ObservableCollection<Contact> _contacts = new ObservableCollection<Contact>();
  
  public ObservableCollection<Contact> Contacts
  {
      get { return this._contacts; }
  }
  
  // Define this method 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", "Contoso, LTD."));
      Contacts.Add(new Contact("Jane", "Doe", "Fabrikam, Inc."));
      Contacts.Add(new Contact("Santa", "Claus", "Alpine Ski House"));
  }
  

Entrambe queste opzioni produrranno la stessa visualizzazione elenco, come illustrato nello screenshot seguente. La visualizzazione elenco mostra la rappresentazione di stringa di ogni elemento, perché un modello di dati non è definito per questo esercizio.

La sezione successiva fornisce maggiori dettagli su come rappresentare visivamente correttamente gli elementi di classe semplici e personalizzati in un modello ListView o GridView.

Per altre informazioni sul data binding, vedi Panoramica del data binding.

Personalizzare l'aspetto con un modello di dati

Usando un modello di dati in un controllo ListView o GridView, è possibile definire il modo in cui visualizzare gli elementi e i dati. Per impostazione predefinita, un elemento di dati viene mostrato nella visualizzazione elenco come rappresentazione in forma di stringa dell'oggetto dati a cui è associato. Puoi mostrare la rappresentazione in forma di stringa di una particolare proprietà dell'elemento di dati impostando DisplayMemberPath su tale proprietà.

Tuttavia, è possibile che in genere si voglia visualizzare una presentazione più completa dei dati. Per specificare come devono essere visualizzati gli elementi nella visualizzazione elenco o nella visualizzazione griglia, creare un file classe DataTemplate. Il codice XAML in DataTemplate definisce il layout e l'aspetto dei controlli usati per visualizzare un singolo elemento. I controlli nel layout possono essere associati alle proprietà di un oggetto dati oppure può essere definito contenuto statico inline.

Un semplice template di dati ListView

In questo esempio l'elemento dati è una stringa semplice. Per aggiungere un'immagine a sinistra della stringa e visualizzare la stringa in verde acqua, definisci DataTemplate in linea all'interno della definizione ListView. Si tratta dello stesso controllo ListView creato in precedenza usando l'opzione 1 nel metodo 1.

<!--No corresponding 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 come vengono visualizzati gli elementi di dati quando si applica un modello di dati ListView semplice:

Un modello di dati ListView per oggetti di classe personalizzati

In questo esempio, l'elemento dati è un oggetto Contact. Per aggiungere l'immagine del contatto a sinistra del nome del contatto e dell'azienda, definisci DataTemplate in linea all'interno della definizione ListView. Questo modello di dati ListView è stato creato nell'opzione 2 nel metodo 2, come illustrato in precedenza.

<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 come vengono visualizzati gli elementi di dati quando si applica un modello di dati ListView per oggetti classe personalizzati:

I modelli di dati rappresentano il modo principale per definire l'aspetto del controllo ListView. Possono anche avere un impatto notevole sulle prestazioni se l'elenco include un numero elevato di elementi.

Puoi definire il modello di dati in linea all'interno della definizione ListView o GridView, come mostrato nel codice precedente, o separatamente in una sezione Risorse. Se lo definisci all'esterno della definizione ListView o GridView, devi fornire al modello di dati un file x:Key e deve essere assegnato alla proprietà ItemTemplate del controllo ListView o GridView con tale chiave.

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.

Modificare il layout degli elementi

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. La disposizione di questi contenitori di elementi dipende dalla proprietà ItemsPanel del controllo .

• Per impostazione predefinita, ListView usa ItemsStackPanel, che produce un elenco verticale, simile al seguente:

  

• GridView usa ItemsWrapGrid, che aggiunge gli elementi orizzontalmente. Gli elementi vanno poi a capo e scorrono in verticale, come nella figura seguente.

  

È possibile modificare il layout degli elementi modificando le proprietà nel pannello elementi oppure è possibile sostituire il pannello predefinito con un altro pannello.

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.

Poiché la visualizzazione elenco scorre verticalmente, per impostazione predefinita, è anche necessario modificare alcune proprietà nell'oggetto ScrollViewer interno della visualizzazione elenco per renderlo scorrere orizzontalmente.

• Modificare ScrollViewer.HorizontalScrollMode su Abilitato o Automatico.
• Modificare ScrollViewer.HorizontalScrollBarVisibility su Auto.
• Impostare ScrollViewer.VerticalScrollMode su Disabilitato.
• Impostare ScrollViewer.VerticalScrollBarVisibility su Nascosto.

<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>

Ecco come viene visualizzato l'elenco:

Nell'esempio seguente ListView dispone gli elementi in un elenco a capo verticale usando ItemsWrapGrid anziché ItemsStackPanel.

<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>

Ecco come viene visualizzato l'elenco:

Se visualizzi i dati raggruppati nella visualizzazione elenco, ItemsPanel determina la disposizione dei gruppi di elementi, non il modo in cui vengono disposti i singoli elementi. Ad esempio, se si usa itemsStackPanel orizzontale mostrato in precedenza per visualizzare i dati raggruppati, i gruppi vengono disposti orizzontalmente, ma gli elementi di ogni gruppo sono ancora impilati verticalmente, come illustrato di seguito:

.

Selezione e interazioni degli elementi

È possibile scegliere tra diversi modi per consentire agli utenti di interagire con una visualizzazione elenco. Per impostazione predefinita, gli utenti possono selezionare un singolo elemento. È possibile modificare la proprietà SelectionMode per abilitare la selezione multipla o disabilitare la selezione. È possibile impostare la proprietà IsItemClickEnabled in modo che gli utenti facciano clic su un elemento (ad esempio, un pulsante) per richiamare un'azione anziché selezionare l'elemento.

Questa tabella illustra i modi in cui un utente può interagire con una visualizzazione elenco e come rispondere all'interazione.

È possibile impostare queste proprietà in XAML o nel codice, come illustrato di seguito:

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

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

myListView.SelectionMode = ListViewSelectionMode.Multiple;

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

Sola lettura

È possibile impostare la proprietà SelectionMode su ListViewSelectionMode.None per disabilitare la selezione degli elementi. In questo modo il controllo viene applicato in modalità di sola lettura, in modo che venga usato per la visualizzazione dei dati, ma non per interagire con esso. In poche parole, la selezione dell'elemento è disabilitata, mentre il controllo è ancora attivo.

Selezione singola

«»Questa tabella descrive le interazioni tramite tastiera, mouse e tocco quando SelectionMode è impostato su Single.

Quando SelectionMode è impostato su Single, puoi ottenere l'elemento dati selezionato dalla proprietà SelectedItem. È possibile ottenere l'indice nell'insieme dell'elemento selezionato usando la proprietà SelectedIndex . Se non è selezionato alcun elemento, SelectedItem è null e SelectedIndex è -1.

Se si tenta di impostare un elemento che non si trova nella raccolta di elementi come SelectedItem, l'operazione viene ignorata e SelectedItem è null. Tuttavia, se si tenta di impostare SelectedIndex su un indice non compreso nell'intervallo degli elementi nell'elenco, si verifica un'eccezione System.ArgumentException.

Selezione multipla

Questa tabella descrive le interazioni tramite tastiera, mouse e tocco quando SelectionMode è impostato su Multiple.

Selezione estesa

Questa tabella descrive le interazioni tramite tastiera, mouse e tocco quando SelectionMode è impostato su Extended.

Quando SelectionMode è impostato su Multiple o Extended, puoi ottenere gli elementi dati selezionati dalla proprietà SelectedItems.

Le proprietà SelectedIndex, SelectedItem e SelectedItems vengono sincronizzate. Ad esempio, se si imposta SelectedIndex su -1, SelectedItem è impostato su null e SelectedItems è vuoto. Se si imposta SelectedItem su null, SelectedIndex è impostato su -1 e SelectedItems è vuoto.

In modalità di selezione multipla SelectedItem contiene l'elemento selezionato per primo e Selectedindex contiene l'indice dell'elemento selezionato per primo.

Rispondere alle modifiche di selezione

Per rispondere alle modifiche di selezione in una visualizzazione elenco, gestire l'evento SelectionChanged . Nel codice del gestore dell'evento puoi ottenere un elenco di elementi dalla proprietà SelectionChangedEventArgs.AddedItems Si 'elemento eventualmente selezionato in precedenza dalla proprietà SelectionChangedEventArgs.RemovedItems. Le raccolte AddedItems e RemovedItems contengono al massimo un elemento, a meno che gli utenti non selezionino un intervallo di elementi tenendo premuto MAIUSC.

Nell'esempio seguente viene illustrato come gestire l'evento SelectionChanged e accedere alle varie raccolte Item:

<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>

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à clic

È possibile modificare una visualizzazione elenco in modo che gli utenti facciano clic su pulsanti e altri elementi anziché selezionarli. Ad esempio, questo è utile se l'app apre una nuova pagina quando gli utenti fa clic su un elemento in un elenco o in una griglia.

Per abilitare questo comportamento:

• Impostare SelectionMode su Nessuno.
• Impostare IsItemClickEnabled su True.
• Gestire l'evento ItemClick per eseguire operazioni quando gli utenti fanno clic su un elemento.

Ecco una visualizzazione elenco con elementi selezionabili. Il codice nel gestore eventi ItemClick apre una nuova pagina nell'app.

<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>

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 codice

In alcuni casi, potrebbe essere necessario modificare la selezione dell'elemento ListView a livello di codice. Ad esempio, è possibile visualizzare un pulsante Seleziona tutto per consentire agli utenti di selezionare tutti gli elementi in un elenco. In questo caso, in genere non è molto efficiente aggiungere e rimuovere elementi dall'insieme SelectedItems uno alla sola. Ogni modifica dell'elemento causa un evento SelectionChanged e quando si lavora direttamente con gli elementi anziché utilizzare i valori di indice, l'elemento viene de virtualizzato.

È più efficiente usare i metodi SelectAll, SelectRange, e DeselectRange per modificare la selezione anziché utilizzare la proprietà SelectedItems. Questi metodi selezionano (o deselezionano) gli elementi usando intervalli di indici di elementi. Gli elementi virtualizzati rimangono virtualizzati, perché viene utilizzato solo l'indice. Tutti gli elementi nell'intervallo specificato vengono selezionati (o deselezionati), indipendentemente dal relativo stato di selezione originale. L'evento SelectionChanged si verifica una sola volta per ogni chiamata a questi metodi.

Quando si selezionano elementi usando intervalli di indice, utilizzare la proprietà SelectedRanges per ottenere tutti gli intervalli selezionati nell'elenco.

Se la proprietà ItemsSource implementa IItemsRangeInfo e usi questi metodi per modificare la selezione, le proprietà AddedItems e RemovedItems non vengono impostate in SelectionChangedEventArgs. L'impostazione di queste proprietà richiede la devirtualizzazione dell'oggetto elemento. Utilizzare la proprietà SelectedRanges per ottenere gli elementi.

È possibile selezionare tutti gli elementi di una raccolta chiamando il metodo SelectAll. Tuttavia, non esiste alcun metodo corrispondente per deselezionare tutti gli elementi. È possibile deselezionare tutti gli elementi chiamando DeselectRange e passando un elemento ItemIndexRange con un valore FirstIndex pari a 0 e un valore Length uguale al numero di elementi nell'insieme. Questa impostazione è illustrata nell'esempio seguente, insieme a un'opzione per selezionare tutti gli elementi.

<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>

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.

Trascinamento della selezione

I controlli ListView e GridView supportano il trascinamento e l'eliminazione di elementi all'interno dei propri controlli e tra se stessi e altri controlli ListView e GridView. Per altre informazioni sull'implementazione della funzionalità di trascinamento della selezione, vedere Drag and Drop.

Scaricare il codice di esempio

• Esempio di ListView e GridView XAML: mostra i controlli ListView e GridView.
• Esempio di trascinamento della selezione XAML: mostra il trascinamento della selezione con il controllo ListView.
• Esempio di Raccolta WinUI: visualizza tutti i controlli XAML in un formato interattivo.

Articoli correlati

• Elenchi
• Modelli e contenitori di elementi
• Trascinamento della selezione