Xamarin.Forms Seleção collectionView

Artigo
07/13/2023

CollectionView define as seguintes propriedades que controlam a seleção de item:

SelectionMode, do tipo SelectionMode, o modo de seleção.
SelectedItem, do tipo object, o item selecionado na lista. Essa propriedade tem um modo de associação padrão de TwoWaye tem um null valor quando nenhum item é selecionado.
SelectedItems, do tipo IList<object>, os itens selecionados na lista. Essa propriedade tem um modo de associação padrão de OneWaye tem um null valor quando nenhum item é selecionado.
SelectionChangedCommand, do tipo ICommand, que é executado quando o item selecionado é alterado.
SelectionChangedCommandParameter, do tipo object, que é o parâmetro passado para SelectionChangedCommand.

Todas essas propriedades são apoiadas por objetos BindableProperty, o que significa que essas propriedades podem ser o destino de vinculações de dados.

Por padrão, CollectionView a seleção está desabilitada. No entanto, esse comportamento pode ser alterado definindo o valor da SelectionMode propriedade como um dos membros de SelectionMode enumeração:

None – indica que os itens não podem ser selecionados. Esse é o valor padrão.
Single – indica que um único item pode ser selecionado, com o item selecionado sendo realçado.
Multiple – indica que vários itens podem ser selecionados, com os itens selecionados sendo realçados.

CollectionView define um SelectionChanged evento que é acionado quando a SelectedItem propriedade é alterada, devido ao usuário selecionar um item na lista ou quando um aplicativo define a propriedade. Além disso, esse evento também é acionado quando a SelectedItems propriedade é alterada. O SelectionChangedEventArgs objeto que acompanha o SelectionChanged evento tem duas propriedades, ambas do tipo IReadOnlyList<object>:

PreviousSelection – a lista de itens que foram selecionados, antes da seleção ser alterada.
CurrentSelection – a lista de itens selecionados, após a alteração da seleção.

Além disso, CollectionView tem um UpdateSelectedItems método que atualiza a SelectedItems propriedade com uma lista de itens selecionados, ao mesmo tempo em que dispara apenas uma única notificação de alteração.

Seleção única

Quando a SelectionMode propriedade é definida como Single, um único item no CollectionView pode ser selecionado. Quando um item for selecionado, a SelectedItem propriedade será definida como o valor do item selecionado. Quando essa propriedade é alterada, o SelectionChangedCommand é executado (com o valor do SelectionChangedCommandParameter que está sendo passado para o ICommand), e o SelectionChanged evento é acionado.

O exemplo XAML a seguir mostra um CollectionView que pode responder à seleção de item único:

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

Este é o código C# equivalente:

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

Neste exemplo de código, o OnCollectionViewSelectionChanged manipulador de eventos é executado quando o SelectionChanged evento é acionado, com o manipulador de eventos recuperando o item selecionado anteriormente e o item selecionado atual:

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

Importante

O SelectionChanged evento pode ser acionado por alterações que ocorrem como resultado da alteração da SelectionMode propriedade.

As capturas de tela a seguir mostram a seleção de um único item em um CollectionView:

Seleção múltipla

Quando a SelectionMode propriedade é definida como Multiple, vários itens no CollectionView podem ser selecionados. Quando os itens forem selecionados, a SelectedItems propriedade será definida como os itens selecionados. Quando essa propriedade é alterada, o SelectionChangedCommand é executado (com o valor do SelectionChangedCommandParameter que está sendo passado para o ICommand), e o SelectionChanged evento é acionado.

O exemplo XAML a seguir mostra um CollectionView que pode responder à seleção de vários itens:

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

Este é o código C# equivalente:

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

Neste exemplo de código, o OnCollectionViewSelectionChanged manipulador de eventos é executado quando o SelectionChanged evento é acionado, com o manipulador de eventos recuperando os itens selecionados anteriormente e os itens selecionados atuais:

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

Importante

O SelectionChanged evento pode ser acionado por alterações que ocorrem como resultado da alteração da SelectionMode propriedade.

As capturas de tela a seguir mostram a seleção de vários itens em um CollectionView:

Pré-seleção única

Quando a SelectionMode propriedade é definida como Single, um único item no CollectionView pode ser pré-selecionado definindo a SelectedItem propriedade como o item. O exemplo XAML a seguir mostra um CollectionView que seleciona previamente um único item:

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

Este é o código C# equivalente:

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

Observação

A SelectedItem propriedade tem um modo de associação padrão de TwoWay.

Os SelectedItem dados da propriedade se associam à SelectedMonkey propriedade do modelo de exibição conectado, que é do tipo Monkey. Por padrão, uma TwoWay associação é usada para que, se o usuário alterar o item selecionado, o SelectedMonkey valor da propriedade será definido como o objeto selecionado Monkey . A SelectedMonkey propriedade é definida na MonkeysViewModel classe e é definida como o quarto item da Monkeys coleção:

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();
    }
    ...
}

Portanto, quando o CollectionView aparece, o quarto item na lista é pré-selecionado:

Várias pré-seleções

Quando a SelectionMode propriedade é definida como Multiple, vários itens no CollectionView podem ser pré-selecionados. O exemplo XAML a seguir mostra um CollectionView que habilitará a pré-seleção de vários itens:

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

Este é o código C# equivalente:

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

Observação

A SelectedItems propriedade tem um modo de associação padrão de OneWay.

Os SelectedItems dados da propriedade se associam à SelectedMonkeys propriedade do modelo de exibição conectado, que é do tipo ObservableCollection<object>. A SelectedMonkeys propriedade é definida na MonkeysViewModel classe e é definida como o segundo, quarto e quinto itens da Monkeys coleção:

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]
            };
        }
        ...
    }
}

Portanto, quando o CollectionView aparece, o segundo, o quarto e o quinto itens da lista são pré-selecionados:

Limpar seleções

As SelectedItem propriedades e SelectedItems podem ser desmarcadas definindo-as, ou os objetos aos quais elas se associam, como null.

Alterar a cor do item selecionado

CollectionView tem um SelectedVisualState que pode ser usado para iniciar uma alteração visual no item selecionado no CollectionView. Um caso de uso comum para isso VisualState é alterar a cor da tela de fundo do item selecionado, que é mostrado no exemplo XAML a seguir:

<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>
    <StackLayout Margin="20">
        <CollectionView ItemsSource="{Binding Monkeys}"
                        SelectionMode="Single">
            <CollectionView.ItemTemplate>
                <DataTemplate>
                    <Grid Padding="10">
                        ...
                    </Grid>
                </DataTemplate>
            </CollectionView.ItemTemplate>
        </CollectionView>
    </StackLayout>
</ContentPage>

Importante

O Style que contém o SelectedVisualState deve ter um TargetType valor de propriedade que é o tipo do elemento raiz do DataTemplate, que é definido como o valor da ItemTemplate propriedade.

Neste exemplo, o valor da Style.TargetType propriedade é definido Grid como porque o elemento raiz do ItemTemplate é um Grid. O SelectedVisualState especifica que, quando um item no CollectionView for selecionado, o BackgroundColor do item será definido como LightSkyBlue:

Para obter mais informações sobre estados visuais, consulte Xamarin.Forms Visual State Manager.

Desabilitar seleção

CollectionView A seleção é desabilitada por padrão. No entanto, se uma CollectionView tiver a seleção habilitada, ela poderá ser desabilitada definindo a SelectionMode propriedade como None:

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

Este é o código C# equivalente:

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

Quando a SelectionMode propriedade é definida como None, os CollectionView itens no não podem ser selecionados, a SelectedItem propriedade permanecerá nulle o SelectionChanged evento não será acionado.

Observação

Quando um item tiver sido selecionado e a SelectionMode propriedade for alterada de Single para None, a SelectedItem propriedade será definida null como e o SelectionChanged evento será acionado com uma propriedade vazia CurrentSelection .

Xamarin.Forms Seleção collectionView

Seleção única

Seleção múltipla

Pré-seleção única

Várias pré-seleções

Limpar seleções

Alterar a cor do item selecionado

Desabilitar seleção

Links relacionados

Recursos adicionais