:::no-loc(Xamarin.Forms)::: Seleção CollectionView:::no-loc(Xamarin.Forms)::: CollectionView Selection

Baixar Exemplo Baixar o exemploDownload Sample Download the sample

CollectionView define as seguintes propriedades que controlam a seleção de itens:CollectionView defines the following properties that control item selection:

  • SelectionMode, do tipo SelectionMode , o modo de seleção.SelectionMode, of type SelectionMode, the selection mode.
  • SelectedItem, do tipo object , o item selecionado na lista.SelectedItem, of type object, the selected item in the list. Essa propriedade tem um modo de associação padrão de TwoWay e tem um null valor quando nenhum item é selecionado.This property has a default binding mode of TwoWay, and has a null value when no item is selected.
  • SelectedItems, do tipo IList<object> , os itens selecionados na lista.SelectedItems, of type IList<object>, the selected items in the list. Essa propriedade tem um modo de associação padrão de OneWay e tem um null valor quando nenhum item é selecionado.This property has a default binding mode of OneWay, and has a null value when no items are selected.
  • SelectionChangedCommand, do tipo ICommand , que é executado quando o item selecionado é alterado.SelectionChangedCommand, of type ICommand, which is executed when the selected item changes.
  • SelectionChangedCommandParameter, do tipo object , que é o parâmetro que é passado para o SelectionChangedCommand .SelectionChangedCommandParameter, of type object, which is the parameter that's passed to the SelectionChangedCommand.

Todas essas propriedades são apoiadas por BindableProperty objetos, o que significa que as propriedades podem ser destinos de associações de dados.All of these properties are backed by BindableProperty objects, which means that the properties can be targets of data bindings.

Por padrão, a CollectionView seleção está desabilitada.By default, CollectionView selection is disabled. No entanto, esse comportamento pode ser alterado definindo o SelectionMode valor da propriedade como um dos SelectionMode membros da enumeração:However, this behavior can be changed by setting the SelectionMode property value to one of the SelectionMode enumeration members:

  • None – indica que os itens não podem ser selecionados.None – indicates that items cannot be selected. Esse é o valor padrão.This is the default value.
  • Single – indica que um único item pode ser selecionado, com o item selecionado sendo realçado.Single – indicates that a single item can be selected, with the selected item being highlighted.
  • Multiple – indica que vários itens podem ser selecionados, com os itens selecionados sendo realçados.Multiple – indicates that multiple items can be selected, with the selected items being highlighted.

CollectionView define um SelectionChanged evento que é acionado quando a SelectedItem propriedade é alterada, devido ao usuário selecionar um item da lista ou quando um aplicativo define a propriedade.CollectionView defines a SelectionChanged event that is fired when the SelectedItem property changes, either due to the user selecting an item from the list, or when an application sets the property. Além disso, esse evento também é acionado quando a SelectedItems propriedade é alterada.In addition, this event is also fired when the SelectedItems property changes. O SelectionChangedEventArgs objeto que acompanha o SelectionChanged evento tem duas propriedades, ambas do tipo IReadOnlyList<object> :The SelectionChangedEventArgs object that accompanies the SelectionChanged event has two properties, both of type IReadOnlyList<object>:

  • PreviousSelection – a lista de itens que foram selecionados antes da seleção ser alterada.PreviousSelection – the list of items that were selected, before the selection changed.
  • CurrentSelection – a lista de itens selecionados após a alteração da seleção.CurrentSelection – the list of items that are selected, after the selection change.

Além disso, CollectionView o tem um UpdateSelectedItems método que atualiza a SelectedItems propriedade com uma lista de itens selecionados, enquanto apenas aciona uma única notificação de alteração.In addition, CollectionView has a UpdateSelectedItems method that updates the SelectedItems property with a list of selected items, while only firing a single change notification.

Seleção únicaSingle selection

Quando a SelectionMode propriedade é definida como Single , um único item no CollectionView pode ser selecionado.When the SelectionMode property is set to Single, a single item in the CollectionView can be selected. Quando um item é selecionado, a SelectedItem propriedade será definida como o valor do item selecionado.When an item is selected, the SelectedItem property will be set to the value of the selected item. Quando essa propriedade é alterada, o SelectionChangedCommand é executado (com o valor do SelectionChangedCommandParameter que está sendo passado para o ICommand ) e o SelectionChanged evento é acionado.When this property changes, the SelectionChangedCommand is executed (with the value of the SelectionChangedCommandParameter being passed to the ICommand), and the SelectionChanged event fires.

O exemplo de XAML a seguir mostra um CollectionView que pode responder à seleção de um único item:The following XAML example shows a CollectionView that can respond to single item selection:

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

Este é o código C# equivalente:The equivalent C# code is:

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:In this code example, the OnCollectionViewSelectionChanged event handler is executed when the SelectionChanged event fires, with the event handler retrieving the previously selected item, and the current selected item:

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.The SelectionChanged event can be fired by changes that occur as a result of changing the SelectionMode property.

As capturas de tela a seguir mostram a seleção de item único em um CollectionView :The following screenshots show single item selection in a CollectionView:

Captura de tela de uma lista vertical CollectionView com seleção única, no iOS e no AndroidScreenshot of a CollectionView vertical list with single selection, on iOS and Android

Seleção múltiplaMultiple selection

Quando a SelectionMode propriedade é definida como Multiple , vários itens no CollectionView podem ser selecionados.When the SelectionMode property is set to Multiple, multiple items in the CollectionView can be selected. Quando os itens são selecionados, a SelectedItems propriedade será definida para os itens selecionados.When items are selected, the SelectedItems property will be set to the selected items. Quando essa propriedade é alterada, o SelectionChangedCommand é executado (com o valor do SelectionChangedCommandParameter que está sendo passado para o ICommand ) e o SelectionChanged evento é acionado.When this property changes, the SelectionChangedCommand is executed (with the value of the SelectionChangedCommandParameter being passed to the ICommand), and the SelectionChanged event fires.

O exemplo de XAML a seguir mostra um CollectionView que pode responder a seleção de vários itens:The following XAML example shows a CollectionView that can respond to multiple item selection:

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

Este é o código C# equivalente:The equivalent C# code is:

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 anteriormente selecionados e os itens selecionados atuais:In this code example, the OnCollectionViewSelectionChanged event handler is executed when the SelectionChanged event fires, with the event handler retrieving the previously selected items, and the current selected items:

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.The SelectionChanged event can be fired by changes that occur as a result of changing the SelectionMode property.

As capturas de tela a seguir mostram a seleção de vários itens em um CollectionView :The following screenshots show multiple item selection in a CollectionView:

Captura de tela de uma lista vertical CollectionView com seleção múltipla, no iOS e no AndroidScreenshot of a CollectionView vertical list with multiple selection, on iOS and Android

Seleção únicaSingle pre-selection

Quando a SelectionMode propriedade é definida como Single , um único item no CollectionView pode ser pré-selecionado definindo a SelectedItem propriedade para o item.When the SelectionMode property is set to Single, a single item in the CollectionView can be pre-selected by setting the SelectedItem property to the item. O exemplo de XAML a seguir mostra um CollectionView que seleciona previamente um único item:The following XAML example shows a CollectionView that pre-selects a single item:

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

Este é o código C# equivalente:The equivalent C# code is:

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 .The SelectedItem property has a default binding mode of TwoWay.

Os SelectedItem dados de propriedade são associados à SelectedMonkey Propriedade do modelo de exibição conectado, que é do tipo Monkey .The SelectedItem property data binds to the SelectedMonkey property of the connected view model, which is of type Monkey. Por padrão, uma TwoWay associação é usada para que, se o usuário alterar o item selecionado, o valor da SelectedMonkey propriedade será definido como o objeto selecionado Monkey .By default, a TwoWay binding is used so that if the user changes the selected item, the value of the SelectedMonkey property will be set to the selected Monkey object. A SelectedMonkey propriedade é definida na MonkeysViewModel classe e é definida como o quarto item da Monkeys coleção:The SelectedMonkey property is defined in the MonkeysViewModel class, and is set to the fourth item of the Monkeys collection:

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 CollectionView aparece, o quarto item da lista é pré-selecionado:Therefore, when the CollectionView appears, the fourth item in the list is pre-selected:

Captura de tela de uma lista vertical CollectionView com seleção única, no iOS e no AndroidScreenshot of a CollectionView vertical list with single pre-selection, on iOS and Android

Várias seleções préviasMultiple pre-selection

Quando a SelectionMode propriedade é definida como Multiple , vários itens no CollectionView podem ser previamente selecionados.When the SelectionMode property is set to Multiple, multiple items in the CollectionView can be pre-selected. O exemplo de XAML a seguir mostra um CollectionView que permitirá a seleção prévia de vários itens:The following XAML example shows a CollectionView that will enable the pre-selection of multiple items:

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

Este é o código C# equivalente:The equivalent C# code is:

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 .The SelectedItems property has a default binding mode of OneWay.

Os SelectedItems dados de propriedade são associados à SelectedMonkeys Propriedade do modelo de exibição conectado, que é do tipo ObservableCollection<object> .The SelectedItems property data binds to the SelectedMonkeys property of the connected view model, which is of type ObservableCollection<object>. A SelectedMonkeys propriedade é definida na MonkeysViewModel classe e é definida para o segundo, o quarto e o quinto itens na Monkeys coleção:The SelectedMonkeys property is defined in the MonkeysViewModel class, and is set to the second, fourth, and fifth items in the Monkeys collection:

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 CollectionView aparece, o segundo, o quarto e o quinto itens da lista são previamente selecionados:Therefore, when the CollectionView appears, the second, fourth, and fifth items in the list are pre-selected:

Captura de tela de uma lista vertical CollectionView com várias seleções, no iOS e no AndroidScreenshot of a CollectionView vertical list with multiple pre-selection, on iOS and Android

Limpar seleçõesClear selections

As SelectedItem SelectedItems Propriedades e podem ser limpas definindo-as, ou os objetos aos quais eles se associam, ao null .The SelectedItem and SelectedItems properties can be cleared by setting them, or the objects they bind to, to null.

Alterar a cor do item selecionadoChange selected item color

CollectionView tem um Selected VisualState que pode ser usado para iniciar uma alteração visual no item selecionado no CollectionView .CollectionView has a Selected VisualState that can be used to initiate a visual change to the selected item in the CollectionView. Um caso de uso comum para isso VisualState é alterar a cor do plano de fundo do item selecionado, que é mostrado no exemplo de XAML a seguir:A common use case for this VisualState is to change the background color of the selected item, which is shown in the following XAML example:

<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 Selected VisualState deve ter um TargetType valor de propriedade que é o tipo do elemento raiz do DataTemplate , que é definido como o ItemTemplate valor da propriedade.The Style that contains the Selected VisualState must have a TargetType property value that's the type of the root element of the DataTemplate, which is set as the ItemTemplate property value.

Neste exemplo, o Style.TargetType valor da propriedade é definido como Grid porque o elemento raiz do ItemTemplate é um Grid .In this example, the Style.TargetType property value is set to Grid because the root element of the ItemTemplate is a Grid. O Selected VisualState especifica que quando um item no CollectionView é selecionado, o BackgroundColor do item será definido como LightSkyBlue :The Selected VisualState specifies that when an item in the CollectionView is selected, the BackgroundColor of the item will be set to LightSkyBlue:

Captura de tela de uma lista vertical CollectionView com uma cor de seleção única personalizada, no iOS e no AndroidScreenshot of a CollectionView vertical list with a custom single selection color, on iOS and Android

Para obter mais informações sobre os Estados visuais, consulte :::no-loc(Xamarin.Forms)::: Visual State Manager.For more information about visual states, see :::no-loc(Xamarin.Forms)::: Visual State Manager.

Desabilitar seleçãoDisable selection

CollectionView a seleção é desabilitada por padrão.CollectionView selection is disabled by default. No entanto, se uma CollectionView opção tiver a seleção habilitada, ela poderá ser desabilitada definindo a SelectionMode propriedade como None :However, if a CollectionView has selection enabled, it can be disabled by setting the SelectionMode property to None:

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

Este é o código C# equivalente:The equivalent C# code is:

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

Quando a SelectionMode propriedade é definida como None , os itens em CollectionView não podem ser selecionados, a SelectedItem Propriedade permanecerá null e o SelectionChanged evento não será acionado.When the SelectionMode property is set to None, items in the CollectionView cannot be selected, the SelectedItem property will remain null, and the SelectionChanged event will not be fired.

Observação

Quando um item tiver sido selecionado e a SelectionMode propriedade for alterada de Single para None , a SelectedItem propriedade será definida como null e o SelectionChanged evento será acionado com uma propriedade vazia CurrentSelection .When an item has been selected and the SelectionMode property is changed from Single to None, the SelectedItem property will be set to null and the SelectionChanged event will be fired with an empty CurrentSelection property.