Configurare la selezione dell'elemento CollectionView

Esplorare l'esempio

L'interfaccia utente dell'app multipiattaforma .NET (.NET MAUI) CollectionView definisce le proprietà seguenti che controllano la selezione degli elementi:

• SelectionMode, di tipo SelectionMode, modalità di selezione.
• SelectedItem, di tipo object, l'elemento selezionato nell'elenco. Questa proprietà ha una modalità di associazione predefinita di TwoWaye ha un null valore quando non è selezionato alcun elemento.
• SelectedItems, di tipo IList<object>, gli elementi selezionati nell'elenco. Questa proprietà ha una modalità di associazione predefinita di OneWaye ha un null valore quando non sono selezionati elementi.
• SelectionChangedCommand, di tipo ICommand, che viene eseguito quando l'elemento selezionato cambia.
• SelectionChangedCommandParameter, di tipo object, ovvero il parametro passato a SelectionChangedCommand.

Tutte queste proprietà sono supportate da oggetti BindableProperty e ciò significa che tali proprietà possono essere destinazioni di data binding.

Per impostazione predefinita, CollectionView la selezione è disabilitata. Tuttavia, questo comportamento può essere modificato impostando il valore della SelectionMode proprietà su uno dei membri dell'enumerazione SelectionMode :

• None : indica che non è possibile selezionare gli elementi. Questo è il valore predefinito.
• Single : indica che è possibile selezionare un singolo elemento, con l'elemento selezionato evidenziato.
• Multiple : indica che è possibile selezionare più elementi, con gli elementi selezionati evidenziati.

CollectionView definisce un SelectionChanged evento generato quando la SelectedItem proprietà viene modificata, a causa della selezione di un elemento dall'elenco o quando un'applicazione imposta la proprietà. Inoltre, questo evento viene generato anche quando la SelectedItems proprietà cambia. L'oggetto SelectionChangedEventArgs che accompagna l'evento SelectionChanged ha due proprietà, entrambe di tipo IReadOnlyList<object>:

• PreviousSelection : elenco di elementi selezionati, prima della modifica della selezione.
• CurrentSelection : elenco di elementi selezionati, dopo la modifica della selezione.

Inoltre, CollectionView dispone di un UpdateSelectedItems metodo che aggiorna la SelectedItems proprietà con un elenco di elementi selezionati, mentre si attiva una singola notifica di modifica.

Selezione singola

Quando la SelectionMode proprietà è impostata su Single, è possibile selezionare un singolo elemento in CollectionView . Quando viene selezionato un elemento, la SelectedItem proprietà viene impostata sul valore dell'elemento selezionato. Quando questa proprietà viene modificata, l'oggetto SelectionChangedCommand viene eseguito (con il valore dell'oggetto SelectionChangedCommandParameter passato a ICommand) e l'evento SelectionChanged viene generato.

L'esempio XAML seguente mostra un oggetto CollectionView che può rispondere alla selezione di un singolo elemento:

<CollectionView ItemsSource="{Binding Monkeys}"
                SelectionMode="Single"
                SelectionChanged="OnCollectionViewSelectionChanged">
    ...
</CollectionView>

Il codice C# equivalente è il seguente:

CollectionView collectionView = new CollectionView
{
    SelectionMode = SelectionMode.Single
};
collectionView.SetBinding(ItemsView.ItemsSourceProperty, "Monkeys");
collectionView.SelectionChanged += OnCollectionViewSelectionChanged;

In questo esempio di codice il OnCollectionViewSelectionChanged gestore eventi viene eseguito quando viene generato l'evento SelectionChanged , con il gestore eventi che recupera l'elemento selezionato in precedenza e l'elemento selezionato corrente:

void OnCollectionViewSelectionChanged(object sender, SelectionChangedEventArgs e)
{
    string previous = (e.PreviousSelection.FirstOrDefault() as Monkey)?.Name;
    string current = (e.CurrentSelection.FirstOrDefault() as Monkey)?.Name;
    ...
}

Importante

L'evento SelectionChanged può essere generato da modifiche che si verificano in seguito alla modifica della SelectionMode proprietà.

Lo screenshot seguente mostra la selezione di un singolo elemento in un oggetto CollectionView:

Selezione multipla

Quando la SelectionMode proprietà è impostata su Multiple, è possibile selezionare più elementi in CollectionView . Quando vengono selezionati elementi, la SelectedItems proprietà viene impostata sugli elementi selezionati. Quando questa proprietà viene modificata, l'oggetto SelectionChangedCommand viene eseguito (con il valore dell'oggetto SelectionChangedCommandParameter passato a ICommande l'evento SelectionChanged viene generato.

L'esempio XAML seguente mostra un oggetto CollectionView che può rispondere alla selezione di più elementi:

<CollectionView ItemsSource="{Binding Monkeys}"
                SelectionMode="Multiple"
                SelectionChanged="OnCollectionViewSelectionChanged">
    ...
</CollectionView>

Il codice C# equivalente è il seguente:

CollectionView collectionView = new CollectionView
{
    SelectionMode = SelectionMode.Multiple
};
collectionView.SetBinding(ItemsView.ItemsSourceProperty, "Monkeys");
collectionView.SelectionChanged += OnCollectionViewSelectionChanged;

In questo esempio di codice il OnCollectionViewSelectionChanged gestore eventi viene eseguito quando viene generato l'evento SelectionChanged , con il gestore eventi che recupera gli elementi selezionati in precedenza e gli elementi selezionati correnti:

void OnCollectionViewSelectionChanged(object sender, SelectionChangedEventArgs e)
{
    var previous = e.PreviousSelection;
    var current = e.CurrentSelection;
    ...
}

Importante

L'evento SelectionChanged può essere generato da modifiche che si verificano in seguito alla modifica della SelectionMode proprietà.

Lo screenshot seguente mostra la selezione di più elementi in un oggetto CollectionView:

Preselezione singola

Quando la SelectionMode proprietà è impostata su Single, è possibile preselezionare un singolo elemento in CollectionView impostando la SelectedItem proprietà sull'elemento. L'esempio XAML seguente mostra un CollectionView oggetto che preseleziona un singolo elemento:

<CollectionView ItemsSource="{Binding Monkeys}"
                SelectionMode="Single"
                SelectedItem="{Binding SelectedMonkey}">
    ...
</CollectionView>

Il codice C# equivalente è il seguente:

CollectionView collectionView = new CollectionView
{
    SelectionMode = SelectionMode.Single
};
collectionView.SetBinding(ItemsView.ItemsSourceProperty, "Monkeys");
collectionView.SetBinding(SelectableItemsView.SelectedItemProperty, "SelectedMonkey");

Nota

La SelectedItem proprietà ha una modalità di associazione predefinita di TwoWay.

I dati della SelectedItem proprietà vengono associati alla SelectedMonkey proprietà del modello di visualizzazione connessa, che è di tipo Monkey. Per impostazione predefinita, viene utilizzata un'associazione TwoWay in modo che, se l'utente modifica l'elemento selezionato, il valore della SelectedMonkey proprietà viene impostato sull'oggetto selezionato Monkey . La SelectedMonkey proprietà è definita nella MonkeysViewModel classe ed è impostata sul quarto elemento della Monkeys raccolta:

public class MonkeysViewModel : INotifyPropertyChanged
{
    ...
    public ObservableCollection<Monkey> Monkeys { get; private set; }

    Monkey selectedMonkey;
    public Monkey SelectedMonkey
    {
        get
        {
            return selectedMonkey;
        }
        set
        {
            if (selectedMonkey != value)
            {
                selectedMonkey = value;
            }
        }
    }

    public MonkeysViewModel()
    {
        ...
        selectedMonkey = Monkeys.Skip(3).FirstOrDefault();
    }
    ...
}

Pertanto, quando CollectionView viene visualizzato, il quarto elemento nell'elenco è pre-selezionato:

Preselezione multipla

Quando la SelectionMode proprietà è impostata su Multiple, è possibile preselezionare più elementi in CollectionView . L'esempio XAML seguente mostra un CollectionView oggetto che abilita la preselezione di più elementi:

<CollectionView x:Name="collectionView"
                ItemsSource="{Binding Monkeys}"
                SelectionMode="Multiple"
                SelectedItems="{Binding SelectedMonkeys}">
    ...
</CollectionView>

Il codice C# equivalente è il seguente:

CollectionView collectionView = new CollectionView
{
    SelectionMode = SelectionMode.Multiple
};
collectionView.SetBinding(ItemsView.ItemsSourceProperty, "Monkeys");
collectionView.SetBinding(SelectableItemsView.SelectedItemsProperty, "SelectedMonkeys");

Nota

La SelectedItems proprietà ha una modalità di associazione predefinita di OneWay.

I dati della SelectedItems proprietà vengono associati alla SelectedMonkeys proprietà del modello di visualizzazione connessa, che è di tipo ObservableCollection<object>. La SelectedMonkeys proprietà è definita nella MonkeysViewModel classe e viene impostata sul secondo, quarto e quinto elemento dell'insieme Monkeys :

namespace CollectionViewDemos.ViewModels
{
    public class MonkeysViewModel : INotifyPropertyChanged
    {
        ...
        ObservableCollection<object> selectedMonkeys;
        public ObservableCollection<object> SelectedMonkeys
        {
            get
            {
                return selectedMonkeys;
            }
            set
            {
                if (selectedMonkeys != value)
                {
                    selectedMonkeys = value;
                }
            }
        }

        public MonkeysViewModel()
        {
            ...
            SelectedMonkeys = new ObservableCollection<object>()
            {
                Monkeys[1], Monkeys[3], Monkeys[4]
            };
        }
        ...
    }
}

Di conseguenza, quando CollectionView viene visualizzato, il secondo, il quarto e il quinto elemento dell'elenco vengono preseselezionati:

Cancella selezioni

Le SelectedItem proprietà e SelectedItems possono essere cancellate impostandole o gli oggetti a cui si associano, a null. Quando una di queste proprietà viene cancellata, l'evento SelectionChanged viene generato con una proprietà vuota CurrentSelection e viene eseguito .SelectionChangedCommand

Handle reselection

Uno scenario comune è che gli utenti selezioneranno un elemento in CollectionView e quindi passeranno a un'altra pagina. Quando si sposta indietro l'elemento è ancora selezionato, il che comporterà l'impossibilità di selezionare nuovamente l'elemento specificato. Per abilitare la riselezionazione, deselezionare la selezione dell'elemento in CollectionView:

<CollectionView ...
                SelectionChanged="OnCollectionViewSelectionChanged" />

Il codice C# equivalente è il seguente:

CollectionView collectionView = new CollectionView();
collectionView.SelectionChanged += OnCollectionViewSelectionChanged;

L'esempio seguente mostra il codice del gestore eventi per l'evento SelectionChanged :

void OnCollectionViewSelectionChanged(object sender, SelectionChangedEventArgs e)
{
    var cv = (CollectionView)sender;
    if (cv.SelectedItem == null)
        return;

    cv.SelectedItem = null;
}

Modificare il colore dell'elemento selezionato

CollectionView dispone di un oggetto Selected VisualState che può essere utilizzato per avviare una modifica visiva all'elemento selezionato in CollectionView. Un caso d'uso comune consiste VisualState nel modificare il colore di sfondo dell'elemento selezionato, come illustrato nell'esempio XAML seguente:

<ContentPage ...>
    <ContentPage.Resources>
        <Style TargetType="Grid">
            <Setter Property="VisualStateManager.VisualStateGroups">
                <VisualStateGroupList>
                    <VisualStateGroup x:Name="CommonStates">
                        <VisualState x:Name="Normal" />
                        <VisualState x:Name="Selected">
                            <VisualState.Setters>
                                <Setter Property="BackgroundColor"
                                        Value="LightSkyBlue" />
                            </VisualState.Setters>
                        </VisualState>
                    </VisualStateGroup>
                </VisualStateGroupList>
            </Setter>
        </Style>
    </ContentPage.Resources>
    <Grid Margin="20">
        <CollectionView ItemsSource="{Binding Monkeys}"
                        SelectionMode="Single">
            <CollectionView.ItemTemplate>
                <DataTemplate>
                    <Grid Padding="10">
                        ...
                    </Grid>
                </DataTemplate>
            </CollectionView.ItemTemplate>
        </CollectionView>
    </Grid>
</ContentPage>

Importante

L'oggetto Style che contiene deve VisualState Selected avere un TargetType valore della proprietà che rappresenta il tipo dell'elemento radice dell'oggetto DataTemplate, impostato come valore della ItemTemplate proprietà.

Il codice C# equivalente per lo stile contenente lo stato di visualizzazione è:

using static Microsoft.Maui.Controls.VisualStateManager;
...

Setter backgroundColorSetter = new() { Property = BackgroundColorProperty, Value = Colors.LightSkyBlue };
VisualState stateSelected = new() { Name = CommonStates.Selected, Setters = { backgroundColorSetter } };
VisualState stateNormal = new() { Name = CommonStates.Normal };
VisualStateGroup visualStateGroup = new() { Name = nameof(CommonStates), States = { stateSelected, stateNormal } };
VisualStateGroupList visualStateGroupList = new() { visualStateGroup };
Setter vsgSetter = new() { Property = VisualStateGroupsProperty, Value = visualStateGroupList };
Style style = new(typeof(Grid)) { Setters = { vsgSetter } };

// Add the style to the resource dictionary
Resources.Add(style);

In questo esempio il valore della Style.TargetType proprietà è impostato su Grid perché l'elemento radice di ItemTemplate è .Grid Selected VisualState Specifica che quando viene selezionato un elemento nell'oggetto CollectionView , l'oggetto BackgroundColor dell'elemento viene impostato su LightSkyBlue:

Per altre informazioni sugli stati di visualizzazione, vedere Stati di visualizzazione.

Disabilita selezione

CollectionView la selezione è disabilitata per impostazione predefinita. Tuttavia, se una CollectionView selezione è abilitata, può essere disabilitata impostando la SelectionMode proprietà su None:

<CollectionView ...
                SelectionMode="None" />

Il codice C# equivalente è il seguente:

CollectionView collectionView = new CollectionView
{
    ...
    SelectionMode = SelectionMode.None
};

Quando la SelectionMode proprietà è impostata su None, gli elementi in CollectionView non possono essere selezionati, la SelectedItem proprietà rimane nulle l'evento SelectionChanged non viene generato.

Nota

Quando è stato selezionato un elemento e la SelectionMode proprietà viene modificata da Single a None, la SelectedItem proprietà verrà impostata su null e l'evento SelectionChanged verrà generato con una proprietà vuota CurrentSelection .