Xamarin.Forms Sélection de CollectionView

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

• SelectionMode, de type SelectionMode, le mode de sélection.
• SelectedItem, de type object, l’élément sélectionné dans la liste. Cette propriété a un mode de liaison par défaut et TwoWaya une null valeur lorsqu’aucun élément n’est sélectionné.
• SelectedItems, de type IList<object>, les éléments sélectionnés dans la liste. Cette propriété a un mode de liaison par défaut et OneWaya une null valeur lorsqu’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, CollectionView la 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 d’é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é, avec l’élément sélectionné mis en surbrillance.
• Multiple : indique que plusieurs éléments peuvent être sélectionnés, avec les éléments sélectionnés mis en surbrillance.

CollectionView définit un SelectionChanged événement déclenché lorsque la SelectedItem propriété change, soit en raison de la sélection d’un élément dans la liste, 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, tous deux de type IReadOnlyList<object>:

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

En outre, CollectionView dispose d’une UpdateSelectedItems méthode qui met à jour la SelectedItems propriété avec une liste d’éléments sélectionnés, tout en utilisant uniquement une notification de modification unique.

Sélection unique

Lorsque la SelectionMode propriété est définie Singlesur , un seul élément dans le CollectionView fichier peut ê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, l’objet SelectionChangedCommand est exécuté (avec la valeur du SelectionChangedCommandParameter passage à l’élément ICommand), et l’événement SelectionChanged se déclenche.

L’exemple XAML suivant montre un CollectionView élément qui peut répondre à une 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, avec 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 suite à la modification de la SelectionMode propriété.

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

Sélection multiple

Lorsque la SelectionMode propriété est définie Multiplesur , plusieurs éléments peuvent CollectionView être sélectionnés. Lorsque les é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, l’objet SelectionChangedCommand est exécuté (avec la valeur du SelectionChangedCommandParameter passage à l’élément ICommand), et l’événement SelectionChanged se déclenche.

L’exemple XAML suivant montre un CollectionView qui peut répondre à plusieurs sélections d’é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, avec 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 suite à la modification de la SelectionMode propriété.

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

Sélection préalable unique

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

<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");

Remarque

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 afin 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 l’affichage CollectionView s’affiche, le quatrième élément de la liste est pré-sélectionné :

Sélection préalable multiple

Lorsque la SelectionMode propriété est définie Multiplesur , plusieurs éléments peuvent CollectionView être pré-sélectionnés. L’exemple XAML suivant montre une CollectionView option 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");

Remarque

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 l’affichage CollectionView s’affiche, le deuxième, le quatrième et le cinquième éléments de la liste sont pré-sélectionnés :

Effacer les sélections

SelectedItems Les SelectedItem propriétés peuvent être effacées en les définissant ou les objets auxquels ils sont liés.null

Modifier la couleur d’élément sélectionnée

CollectionView a un SelectedVisualState élément qui peut être utilisé pour initier une modification visuelle à l’élément sélectionné dans le CollectionView. Pour cela VisualState , un cas d’usage courant consiste à modifier la couleur d’arrière-plan de l’élément sélectionné, qui est illustrée 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

Celui-ci Style contient SelectedVisualState une TargetType valeur de propriété qui est le type de l’élément racine du DataTemplate, qui est défini comme valeur de ItemTemplate propriété.

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

Pour plus d’informations sur les états visuels, consultez Xamarin.Forms Visual State Manager.

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 SelectionMode propriété est définie Nonesur , les éléments dans l’élément CollectionView ne peuvent pas être sélectionnés, la SelectedItem propriété reste nullet l’événement SelectionChanged ne sera pas déclenché.

Remarque

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

Liens connexes

• Xamarin.Forms Gestionnaire d’état visuel