Xamarin.Forms CollectionView Selection

  • Article

Télécharger l’exemple Télécharger l’exemple

CollectionView définit les propriétés suivantes qui contrôlent la sélection d’élément :

  • SelectionMode, de type SelectionMode, mode de sélection.
  • SelectedItem, de type object, élément sélectionné dans la liste. Cette propriété a un mode de liaison par défaut de TwoWay, et a une null valeur quand aucun élément n’est sélectionné.
  • SelectedItems, de type IList<object>, éléments sélectionnés dans la liste. Cette propriété a un mode de liaison par défaut de OneWay, et a une null valeur quand aucun élément n’est sélectionné.
  • SelectionChangedCommand, de type ICommand, qui est exécuté lorsque l’élément sélectionné change.
  • SelectionChangedCommandParameter, de type object : paramètre passé à la commande SelectionChangedCommand.

Toutes ces propriétés s’appuient sur des objets BindableProperty, ce qui signifie qu’elles peuvent être des cibles de liaisons de données.

Par défaut, la CollectionView sélection est désactivée. Toutefois, ce comportement peut être modifié en définissant la valeur de la SelectionMode propriété sur l’un des membres de l’énumération SelectionMode :

  • None : indique que les éléments ne peuvent pas être sélectionnés. Il s'agit de la valeur par défaut.
  • Single : indique qu’un seul élément peut être sélectionné, l’élément sélectionné étant mis en surbrillance.
  • Multiple : indique que plusieurs éléments peuvent être sélectionnés, les éléments sélectionnés étant mis en surbrillance.

CollectionView définit un SelectionChanged événement qui est déclenché lorsque la SelectedItem propriété change, soit en raison de la sélection d’un élément dans la liste par l’utilisateur, soit lorsqu’une application définit la propriété . En outre, cet événement est également déclenché lorsque la SelectedItems propriété change. L’objet SelectionChangedEventArgs qui accompagne l’événement SelectionChanged a deux propriétés, toutes deux de type IReadOnlyList<object>:

  • PreviousSelection : liste des éléments sélectionnés, avant la modification de la sélection.
  • CurrentSelection : liste des éléments sélectionnés après la modification de la sélection.

En outre, CollectionView a une UpdateSelectedItems méthode qui met à jour la SelectedItems propriété avec une liste d’éléments sélectionnés, tout en ne laissant qu’une seule notification de modification.

Sélection unique

Lorsque la SelectionMode propriété est définie sur Single, un seul élément dans peut CollectionView être sélectionné. Lorsqu’un élément est sélectionné, la SelectedItem propriété est définie sur la valeur de l’élément sélectionné. Lorsque cette propriété change, le SelectionChangedCommand est exécuté (la valeur de étant SelectionChangedCommandParameter passée à ), ICommandet l’événement SelectionChanged se déclenche.

L’exemple XAML suivant montre un qui peut répondre à une CollectionView sélection d’élément unique :

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

Le code C# équivalent est :

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

Dans cet exemple de code, le OnCollectionViewSelectionChanged gestionnaire d’événements est exécuté lorsque l’événement SelectionChanged se déclenche, le gestionnaire d’événements récupérant l’élément précédemment sélectionné et l’élément sélectionné actuel :

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

Important

L’événement SelectionChanged peut être déclenché par des modifications qui se produisent à la suite de la modification de la SelectionMode propriété .

Les captures d’écran suivantes montrent la sélection d’un élément unique dans un CollectionView:

Capture d’écran d’une collectionAfficher la liste verticale avec sélection unique, sur iOS et Android

Sélection multiple

Lorsque la SelectionMode propriété est définie sur Multiple, plusieurs éléments dans peuvent CollectionView être sélectionnés. Lorsque des éléments sont sélectionnés, la SelectedItems propriété est définie sur les éléments sélectionnés. Lorsque cette propriété change, le SelectionChangedCommand est exécuté (la valeur de étant SelectionChangedCommandParameter passée à ), ICommandet l’événement SelectionChanged se déclenche.

L’exemple XAML suivant montre un CollectionView qui peut répondre à la sélection de plusieurs éléments :

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

Le code C# équivalent est :

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

Dans cet exemple de code, le OnCollectionViewSelectionChanged gestionnaire d’événements est exécuté lorsque l’événement SelectionChanged se déclenche, le gestionnaire d’événements récupérant les éléments précédemment sélectionnés et les éléments sélectionnés actuels :

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

Important

L’événement SelectionChanged peut être déclenché par des modifications qui se produisent à la suite de la modification de la SelectionMode propriété .

Les captures d’écran suivantes montrent la sélection de plusieurs éléments dans un CollectionView:

Capture d’écran d’une collectionAfficher la liste verticale avec sélection multiple, sur iOS et Android

Pré-sélection unique

Lorsque la SelectionMode propriété est définie sur Single, un seul élément du peut être présélectionné en CollectionView affectant à la SelectedItem propriété la valeur de l’élément . L’exemple XAML suivant montre un CollectionView qui pré-sélectionne un élément unique :

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

Le code C# équivalent est :

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

Notes

La SelectedItem propriété a un mode de liaison par défaut de TwoWay.

Les SelectedItem données de propriété sont liées à la SelectedMonkey propriété du modèle d’affichage connecté, qui est de type Monkey. Par défaut, une TwoWay liaison est utilisée de sorte que si l’utilisateur modifie l’élément sélectionné, la valeur de la SelectedMonkey propriété est définie sur l’objet sélectionné Monkey . La SelectedMonkey propriété est définie dans la MonkeysViewModel classe et est définie sur le quatrième élément de la 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();
    }
    ...
}

Par conséquent, lorsque le CollectionView apparaît, le quatrième élément de la liste est pré-sélectionné :

Capture d’écran d’une collectionAfficher la liste verticale avec pré-sélection unique, sur iOS et Android

Pré-sélection multiple

Lorsque la SelectionMode propriété est définie sur Multiple, plusieurs éléments de peuvent CollectionView être présélectionnés. L’exemple XAML suivant montre un CollectionView qui active la pré-sélection de plusieurs éléments :

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

Le code C# équivalent est :

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

Notes

La SelectedItems propriété a un mode de liaison par défaut de OneWay.

Les SelectedItems données de propriété sont liées à la SelectedMonkeys propriété du modèle d’affichage connecté, qui est de type ObservableCollection<object>. La SelectedMonkeys propriété est définie dans la MonkeysViewModel classe et est définie sur les deuxième, quatrième et cinquième éléments de la 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]
            };
        }
        ...
    }
}

Par conséquent, lorsque le CollectionView apparaît, les deuxième, quatrième et cinquième éléments de la liste sont présélectionnés :

Capture d’écran d’une collectionAfficher une liste verticale avec une pré-sélection multiple, sur iOS et Android

Effacer les sélections

Les SelectedItem propriétés et SelectedItems peuvent être effacées en les définissant, ou les objets auxquels elles se lient, sur null.

Modifier la couleur de l’élément sélectionné

CollectionView a un SelectedVisualState qui peut être utilisé pour initier une modification visuelle de l’élément sélectionné dans le CollectionView. Un cas VisualState d’usage courant consiste à modifier la couleur d’arrière-plan de l’élément sélectionné, ce qui est illustré dans l’exemple XAML suivant :

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

Important

le Style qui contient doit SelectedVisualState avoir une TargetType valeur de propriété qui correspond au type de l’élément racine du DataTemplate, qui est défini comme valeur de propriété ItemTemplate .

Dans cet exemple, la valeur de la Style.TargetType propriété est définie sur Grid , car l’élément racine de est ItemTemplate un Grid. spécifie SelectedVisualState que lorsqu’un élément du CollectionView est sélectionné, le BackgroundColor de l’élément est défini sur LightSkyBlue:

Capture d’écran d’une liste verticale CollectionAfficher une liste verticale avec une couleur de sélection unique personnalisée, sur iOS et Android

Pour plus d’informations sur les états visuels, consultez Xamarin.Forms Gestionnaire d’état visuel.

Désactiver la sélection

CollectionView la sélection est désactivée par défaut. Toutefois, si une CollectionView sélection est activée, elle peut être désactivée en définissant la SelectionMode propriété sur None:

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

Le code C# équivalent est :

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

Lorsque la propriété a la SelectionModeNonevaleur , les éléments du CollectionView ne peuvent pas être sélectionnés, la SelectedItem propriété reste nullet l’événement SelectionChanged n’est pas déclenché.

Notes

Lorsqu’un élément a été sélectionné et que la SelectionMode propriété est remplacée par Single , Nonela SelectedItem propriété est définie sur et l’événement SelectionChanged est déclenché null avec une propriété videCurrentSelection.