Seleção de CollectionView de xamarin. FormsXamarin.Forms CollectionView Selection

Baixar Exemplo Baixar o exemploDownload Sample Download the sample

CollectionView Define as seguintes propriedades que controlam a seleção de item: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 null valor quando nenhum item está selecionado.This property 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 é somente leitura e tem um null valor quando nenhum item estiver selecionado.This property is read only, 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 objetos BindableProperty, o que significa que essas propriedades podem ser o destino de vinculaçõ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, CollectionView seleção está desabilitada.By default, CollectionView selection is disabled. No entanto, esse comportamento pode ser alterado definindo a SelectionMode valor de propriedade a um dos SelectionMode membros de 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. Este é o valor padrão.This is the default value.
  • Single – indica que um único item pode ser selecionado, com o item selecionado que está 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 que está sendo realçados.Multiple – indicates that multiple items can be selected, with the selected items being highlighted.

CollectionView define uma SelectionChanged evento que é disparado quando o SelectedItem propriedade é alterada, seja porque o 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 é disparado quando o SelectedItems alterações de propriedade.In addition, this event is also fired when the SelectedItems property changes. O SelectionChangedEventArgs objeto que acompanha o SelectionChanged evento tem duas propriedades, ambos 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 que a seleção é 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.

Seleção únicaSingle selection

Quando o SelectionMode estiver definida como Single, um único item no CollectionView podem ser selecionados.When the SelectionMode property is set to Single, a single item in the CollectionView can be selected. Quando um item é selecionado, o 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 é executada (com o valor da SelectionChangedCommandParameter 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.

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

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

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 ao recuperar 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 eventos podem ser acionados por alterações que ocorrem como resultado da alteração os 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 uma CollectionView :The following screenshots show single item selection in a CollectionView:

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

Seleção múltiplaMultiple selection

Quando o SelectionMode estiver 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 itens são selecionados, o 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 é executada (com o valor da SelectionChangedCommandParameter 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.

A exemplo XAML a seguir mostra uma CollectionView que pode responder a seleção múltipla do item:The following XAML example shows a CollectionView that can respond to multiple item selection:

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

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 ao recuperar os itens selecionados anteriormente 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 eventos podem ser acionados por alterações que ocorrem como resultado da alteração os 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 várias seleção de item em uma CollectionView :The following screenshots show multiple item selection in a CollectionView:

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

Pré-seleção de únicaSingle pre-selection

Quando o SelectionMode estiver definida como Single, um único item no CollectionView previamente selecionadas, definindo o 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. A exemplo XAML a seguir mostra um CollectionView que pré-seleciona 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, Mode=TwoWay}">
    ...
</CollectionView>

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", BindingMode.TwoWay);

O SelectedItem associa dados de propriedade para o SelectedMonkey propriedade do modelo de exibição conectado, o que é do tipo Monkey.The SelectedItem property data binds to the SelectedMonkey property of the connected view model, which is of type Monkey. Um TwoWay associação é usada para que, se o usuário altera o item selecionado, o valor da SelectedMonkey propriedade será definida para selecionado Monkey objeto.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. O SelectedMonkey propriedade está definida na MonkeysViewModel classe e é definido como o quarto item do 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 o CollectionView for exibida, o quarto item na lista é pré-selecionada:Therefore, when the CollectionView appears, the fourth item in the list is pre-selected:

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

Seleção múltipla de pré-lançamentoMultiple pre-selection

Quando o SelectionMode estiver definida como Multiple, vários itens no CollectionView pode ser pré-selecionado.When the SelectionMode property is set to Multiple, multiple items in the CollectionView can be pre-selected. A exemplo XAML a seguir mostra um CollectionView que permitirá a pré-seleção 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">
    ...
</CollectionView>

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

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

Vários itens na CollectionView pode ser pré-selecionado adicionando-os para o SelectedItems propriedade:Multiple items in the CollectionView can be pre-selected by adding them to the SelectedItems property:

collectionView.SelectedItems.Add(viewModel.Monkeys.Skip(1).FirstOrDefault());
collectionView.SelectedItems.Add(viewModel.Monkeys.Skip(3).FirstOrDefault());
collectionView.SelectedItems.Add(viewModel.Monkeys.Skip(4).FirstOrDefault());

Observação

O SelectedItems propriedade é somente leitura e, portanto, não é possível usar uma associação previamente selecionar itens de dados de duas maneiras.The SelectedItems property is read only, and so it's not possible to use a two way data binding to pre-select items.

Portanto, quando o CollectionView for exibida, o segundo, em quarto lugar, e o quintas itens na lista estão pré-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 de CollectionView com seleção múltipla de pré-lançamento, no iOS e AndroidScreenshot of a CollectionView vertical list with multiple pre-selection, on iOS and Android

Alterar a cor do item selecionadoChange selected item color

CollectionView tem um Selected VisualState que pode ser usado para iniciar uma alteração visual para o 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. Caso de uso de um comum para isso VisualState é alterar a cor do plano de fundo do item selecionado, que é mostrado no exemplo 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 uma TargetType valor da propriedade que é o tipo de 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 o valor da propriedade é definido como Grid porque o elemento raiz do ItemTemplate é uma 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 for selecionada, 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 de CollectionView com uma cor personalizada de seleção única, no iOS e Android ] (selection-images/single-selection-color-large.png#lightbox " Lista vertical de CollectionView com uma cor personalizada de seleção única")Screenshot of a CollectionView vertical list with a custom single selection color, on iOS and Android

Para obter mais informações sobre estados visuais, consulte Gerenciador de estado Visual do xamarin. Forms.For more information about visual states, see Xamarin.Forms Visual State Manager.

Desabilitar seleçãoDisable selection

CollectionView seleção é desabilitada por padrão.CollectionView selection is disabled by default. No entanto, se um CollectionView tem seleção habilitada, ele pode ser desabilitado definindo o SelectionMode propriedade para None:However, if a CollectionView has selection enabled, it can be disabled by setting the SelectionMode property to None:

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

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

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

Quando o SelectionMode estiver definida como None, os itens no CollectionView não podem ser selecionadas, o SelectedItem será de propriedade permanecem nulle o SelectionChanged evento não será disparado.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 foi selecionado e o SelectionMode propriedade é alterada de Single para None, o SelectedItem propriedade será definida como null e o SelectionChanged evento será acionado com um vazio CurrentSelection propriedade.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.