CollectionView-Elementauswahl konfigurieren

Durchsuchen Sie das Beispiel

Die .NET Multi-Platform App UI (.NET MAUI) CollectionView definiert die folgenden Eigenschaften, die die Elementauswahl steuern:

• SelectionMode, vom Typ SelectionMode, der Auswahlmodus.
• SelectedItem, vom Typ object, das ausgewählte Element in der Liste. Diese Eigenschaft weist einen Standardbindungsmodus von TwoWay auf und weist einen null Wert auf, wenn kein Element ausgewählt ist.
• SelectedItems, vom Typ IList<object>, die ausgewählten Elemente in der Liste. Diese Eigenschaft weist einen Standardbindungsmodus von OneWay auf und weist einen null Wert auf, wenn keine Elemente ausgewählt sind.
• SelectionChangedCommand, vom Typ ICommand, der ausgeführt wird, wenn sich das ausgewählte Element ändert.
• SelectionChangedCommandParameter, vom Typ object: Parameter, der an den SelectionChangedCommand übergeben wird.

Alle diese Eigenschaften werden durch BindableProperty-Objekte gestützt, was bedeutet, dass die Eigenschaften Ziele von Datenverbindungen sein können.

Standardmäßig CollectionView ist die Auswahl deaktiviert. Dieses Verhalten kann jedoch geändert werden, indem die SelectionMode-Eigenschaft auf eines der SelectionMode-Enumerationsmitglieder festgelegt wird:

• None – gibt an, dass Elemente nicht ausgewählt werden können. Dies ist der Standardwert.
• Single – gibt an, dass ein einzelnes Element ausgewählt werden kann, wobei das ausgewählte Element hervorgehoben ist.
• Multiple – gibt an, dass mehrere Elemente ausgewählt werden können, wobei die ausgewählten Elemente hervorgehoben werden.

CollectionView definiert ein SelectionChanged-Ereignis, das ausgelöst wird, wenn sich die SelectedItem Eigenschaft ändert, entweder weil der Benutzer ein Element aus der Liste auswählt oder wenn eine Anwendung die Eigenschaft festlegt. Darüber hinaus wird dieses Ereignis auch ausgelöst, wenn sich die SelectedItems Eigenschaft ändert. Das SelectionChangedEventArgs-Objekt, das das SelectionChanged-Ereignis begleitet, hat zwei Eigenschaften, beide vom Typ IReadOnlyList<object>:

• PreviousSelection – die Liste der Elemente, die ausgewählt wurden, bevor die Auswahl geändert wurde.
• CurrentSelection – die Liste der Elemente, die ausgewählt sind, nachdem die Auswahl geändert wurde.

Zusätzlich hat CollectionView eine UpdateSelectedItems Methode, die die SelectedItems-Eigenschaft anhand einer Liste der ausgewählten Elemente aktualisiert, wobei nur eine einzelne Änderungsbenachrichtigung ausgelöst wird.

Einzelauswahl

Wenn die Eigenschaft SelectionMode auf Single gesetzt wird, kann ein einzelnes Element in CollectionView ausgewählt werden. Wenn ein Element ausgewählt wird, wird die SelectedItem-Eigenschaft auf den Wert des ausgewählten Elements festgelegt. Wenn sich diese Eigenschaft ändert, wird SelectionChangedCommand ausgeführt (mit dem Wert des SelectionChangedCommandParameter übergeben an ICommand) und das SelectionChanged-Ereignis wird ausgelöst.

Das folgende XAML-Beispiel zeigt ein CollectionView, das auf die Auswahl einzelner Elemente reagieren kann:

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

Der entsprechende C#-Code lautet:

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

In diesem Codebeispiel wird der OnCollectionViewSelectionChanged Ereignishandler ausgeführt, wenn das SelectionChanged-Ereignis ausgelöst wird, wobei der Ereignishandler das zuvor ausgewählte Element abruft und das aktuelle ausgewählte Element:

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

Wichtig

Das SelectionChanged Ereignis kann durch Änderungen ausgelöst werden, die aufgrund einer Änderung der SelectionMode Eigenschaft auftreten.

Der folgende Screenshot zeigt die Auswahl einzelner Elemente in einer CollectionView:

Mehrfachauswahl

Wenn die SelectionMode Eigenschaft auf Multiple festgelegt ist, können mehrere Elemente in CollectionView ausgewählt werden. Wenn Elemente ausgewählt sind, wird die SelectedItems Eigenschaft auf die ausgewählten Elemente festgelegt. Wenn sich diese Eigenschaft ändert, wird SelectionChangedCommand ausgeführt (mit dem Wert des SelectionChangedCommandParameter das übergeben wird an das ICommand Ereignis und das SelectionChanged Ereignis wird ausgelöst.

Das folgende XAML-Beispiel zeigt ein CollectionView, das auf die Auswahl mehrerer Elemente reagieren kann:

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

Der entsprechende C#-Code lautet:

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

In diesem Codebeispiel wird der OnCollectionViewSelectionChanged-Ereignishandler ausgeführt, wenn das SelectionChanged-Ereignis ausgelöst wird, wobei der Ereignishandler die zuvor ausgewählten Elemente sowie die aktuell ausgewählten Elemente abruft:

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

Wichtig

Das SelectionChanged Ereignis kann durch Änderungen ausgelöst werden, die aufgrund einer Änderung der SelectionMode Eigenschaft auftreten.

Der folgende Screenshot zeigt eine Auswahl von mehreren Elementen in einer CollectionView:

Einzelne Vorauswahl

Wenn die SelectionMode Eigenschaft auf Single festgelegt ist, kann ein einzelnes Element in der CollectionView durch Festlegen der SelectedItem Eigenschaft für das Element vorausgewählt werden. Das folgende XAML-Beispiel zeigt eine CollectionView, die ein einzelnes Element vorauswählt:

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

Der entsprechende C#-Code lautet:

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

Hinweis

Die SelectedItem-Eigenschaft verfügt über einen Standardbindungsmodus von TwoWay.

Die SelectedItem Eigenschaftendaten werden an die SelectedMonkey Eigenschaft des verbundenen Ansichtsmodells gebunden, das vom Typ Monkey ist. Standardmäßig wird eine TwoWay-Bindung verwendet, sodass der Wert der SelectedMonkey Eigenschaft auf das ausgewählte Monkey Objekt festgelegt wird, wenn der Benutzer das ausgewählte Element ändert. Die SelectedMonkey Eigenschaft wird in der MonkeysViewModel Klasse definiert und auf das vierte Element der Monkeys Sammlung festgelegt:

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

Wenn das CollectionView angezeigt wird, wird daher das vierte Element in der Liste vorausgewählt:

Mehrfachauswahl

Wenn die SelectionMode Eigenschaft auf Multiple festgelegt ist, können mehrere Elemente in der CollectionView vorausgewählt werden. Das folgende XAML-Beispiel zeigt eine CollectionView , die die Vorauswahl mehrerer Elemente ermöglicht:

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

Der entsprechende C#-Code lautet:

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

Hinweis

Die SelectedItems Eigenschaft verfügt über einen Standardbindungsmodus von OneWay.

Die SelectedItems Eigenschaftendaten werden an die SelectedMonkeys Eigenschaft des verbundenen Ansichtsmodells gebunden, das vom Typ ObservableCollection<object> ist. Die SelectedMonkeys Eigenschaft wird in der MonkeysViewModel Klasse definiert und auf die zweiten, vierten und fünften Elemente in der Monkeys Sammlung festgelegt:

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

Wenn das CollectionView Element angezeigt wird, werden daher die zweiten, vierten und fünften Elemente in der Liste vorgewählt:

Auswahl aufheben

Die SelectedItem und SelectedItems Eigenschaften können gelöscht werden, indem sie oder die Objekte, an die sie gebunden sind, auf null festgelegt werden. Wenn eine dieser Eigenschaften gelöscht wird, wird das SelectionChanged Ereignis mit einer leeren CurrentSelection Eigenschaft ausgelöst und ausgeführt SelectionChangedCommand .

Ändern der Farbe ausgewählter Elemente

CollectionView verfügt über eine SelectedVisualState , die verwendet werden kann, um eine visuelle Änderung an dem ausgewählten Element in der CollectionView zu initiieren. Ein gängiger Anwendungsfall für diese VisualState , ist das Ändern der Hintergrundfarbe des ausgewählten Elements. Das ist im folgenden XAML-Beispiel dargestellt:

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

Wichtig

Das Style Element, das den SelectedVisualState enthält, muss einen TargetType Eigenschaftswert aufweisen, der der Typ des Stammelements des DataTemplate ist, das als ItemTemplate Eigenschaftswert festgelegt ist.

Der entsprechende C#-Code für den Stil, der den visuellen Zustand enthält, lautet:

using static Microsoft.Maui.Controls.VisualStateManager;
...

Setter backgroundColorSetter = new() { Property = BackgroundColorProperty, Value = Colors.LightSkyBlue };
VisualState stateSelected = new() { Name = CommonStates.Selected, Setters = { backgroundColorSetter } };
VisualState stateNormal = new() { Name = CommonStates.Normal };
VisualStateGroup visualStateGroup = new() { Name = nameof(CommonStates), States = { stateSelected, stateNormal } };
VisualStateGroupList visualStateGroupList = new() { visualStateGroup };
Setter vsgSetter = new() { Property = VisualStateGroupsProperty, Value = visualStateGroupList };
Style style = new(typeof(Grid)) { Setters = { vsgSetter } };

// Add the style to the resource dictionary
Resources.Add(style);

In diesem Beispiel wird der Style.TargetType Eigenschaftswert auf Grid festgelegt, weil das Stammelement von ItemTemplate ein Grid ist. SelectedVisualState gibt an, dass beim Auswählen eines Elements CollectionView das BackgroundColor Element auf LightSkyBlue festgelegt ist:

Weitere Informationen zu visuellen Zuständen finden Sie unter Visuelle Zustände.

Auswahl deaktivieren

CollectionView Auswahl ist standardmäßig deaktiviert. Wenn eine CollectionView Auswahl jedoch aktiviert ist, kann sie deaktiviert werden, indem Sie die SelectionMode Eigenschaft auf None festlegen:

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

Der entsprechende C#-Code lautet:

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

Wenn die SelectionMode Eigenschaft auf None festgelegt ist, können Elemente in CollectionView nicht ausgewählt werden, die SelectedItem Eigenschaft bleibt null, und das SelectionChanged Ereignis wird nicht ausgelöst.

Hinweis

Wenn ein Element ausgewählt wurde und die SelectionMode Eigenschaft von Single auf None geändert wurde, wird die SelectedItem Eigenschaft festgelegt auf null und das SelectionChanged Ereignis wird mit einer leeren CurrentSelection Eigenschaft ausgelöst.