Xamarin.Forms CollectionView Selection
Das Beispiel herunterladenCollectionView definiert die folgenden Eigenschaften, die die Elementauswahl steuern:
SelectionMode, vom TypSelectionMode, der Auswahlmodus.SelectedItem, vom Typobject, das ausgewählte Element in der Liste. Diese Eigenschaft hat den Standardbindungsmodus undTwoWayverfügt über einennullWert, wenn kein Element ausgewählt ist.SelectedItems, vom TypIList<object>, die ausgewählten Elemente in der Liste. Diese Eigenschaft verfügt über den Standardbindungsmodus undOneWayeinennullWert, wenn keine Elemente ausgewählt sind.SelectionChangedCommand, vom TypICommand, der ausgeführt wird, wenn sich das ausgewählte Element ändert.SelectionChangedCommandParametervom Typobject: der Parameter, der anSelectionChangedCommandübergeben wird.
Alle diese Eigenschaften werden durch BindableProperty-Objekte gestützt, was bedeutet, dass die Eigenschaften Ziele von Datenverbindungen sein können.
Standardmäßig ist die CollectionView Auswahl deaktiviert. Dieses Verhalten kann jedoch durch Festlegen des SelectionMode Eigenschaftswerts auf eines der SelectionMode Enumerationsmber geändert werden:
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 wird.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 ausgewählt hat, 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, verfügt über zwei Eigenschaften 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 nach der Auswahländerung ausgewählt werden.
Verfügt darüber hinaus über eine UpdateSelectedItems -Methode, CollectionView die die SelectedItems Eigenschaft mit einer Liste ausgewählter Elemente aktualisiert, während nur eine einzelne Änderungsbenachrichtigung ausgelöst wird.
Einzelauswahl
Wenn die SelectionMode Eigenschaft auf Singlefestgelegt ist, kann ein einzelnes Element in ausgewählt CollectionView 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 das SelectionChangedCommand ausgeführt (mit dem Wert des, der SelectionChangedCommandParameter an den ICommandübergeben wird), und das SelectionChanged Ereignis wird ausgelöst.
Das folgende XAML-Beispiel zeigt eine CollectionView , die 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 und das aktuell ausgewählte Element abruft:
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 infolge der Änderung der SelectionMode Eigenschaft auftreten.
Die folgenden Screenshots zeigen die Auswahl eines einzelnen Elements in einem CollectionView:
Mehrfachauswahl
Wenn die SelectionMode Eigenschaft auf Multiplefestgelegt ist, können mehrere Elemente in ausgewählt CollectionView werden. Wenn Elemente ausgewählt werden, wird die SelectedItems -Eigenschaft auf die ausgewählten Elemente festgelegt. Wenn sich diese Eigenschaft ändert, wird das SelectionChangedCommand ausgeführt (mit dem Wert des, der SelectionChangedCommandParameter an den ICommandübergeben wird), und das SelectionChanged Ereignis wird ausgelöst.
Das folgende XAML-Beispiel zeigt eine CollectionView , die 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 und 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 infolge der Änderung der SelectionMode Eigenschaft auftreten.
Die folgenden Screenshots zeigen die Auswahl mehrerer Elemente in einem CollectionView:
Einzelne Vorauswahl
Wenn die SelectionMode -Eigenschaft auf Singlefestgelegt ist, kann ein einzelnes Element in der CollectionView vorab ausgewählt werden, indem die SelectedItem -Eigenschaft auf das Element festgelegt wird. Das folgende XAML-Beispiel zeigt eine CollectionView , die ein einzelnes Element vorab auswä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 den Standardbindungsmodus.TwoWay
Die SelectedItem Eigenschaftsdaten werden an die SelectedMonkey Eigenschaft des verbundenen Ansichtsmodells vom Typ Monkeygebunden. Standardmäßig wird eine TwoWay Bindung verwendet, sodass der Wert der Eigenschaft auf das ausgewählte Monkey Objekt festgelegt wird, wenn der SelectedMonkey Benutzer das ausgewählte Element ändert. Die SelectedMonkey -Eigenschaft wird in der MonkeysViewModel -Klasse definiert und auf das vierte Element der Monkeys Auflistung 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, ist daher das vierte Element in der Liste vorab ausgewählt:
Mehrfache Vorauswahl
Wenn die SelectionMode -Eigenschaft auf Multiplefestgelegt ist, können mehrere Elemente in der CollectionView vorab ausgewählt werden. Das folgende XAML-Beispiel zeigt ein CollectionView , das die Vorauswahl mehrerer Elemente aktiviert:
<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 den Standardbindungsmodus.OneWay
Die SelectedItems Eigenschaftsdaten werden an die SelectedMonkeys Eigenschaft des verbundenen Ansichtsmodells vom Typ ObservableCollection<object>gebunden. Die SelectedMonkeys -Eigenschaft wird in der MonkeysViewModel -Klasse definiert und auf das zweite, vierte und fünfte Element in der Monkeys Auflistung 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 die CollectionView angezeigt wird, sind daher die zweiten, vierten und fünften Elemente in der Liste vorab ausgewählt:
Auswahl löschen
Die SelectedItem Eigenschaften und SelectedItems können gelöscht werden, indem Sie sie oder die Objekte, an die sie gebunden sind, auf nullfestlegen.
Ändern der Farbe des ausgewählten Elements
CollectionView verfügt über eine SelectedVisualState , die verwendet werden kann, um eine visuelle Änderung am ausgewählten Element in der CollectionViewzu initiieren. Ein gängiger Anwendungsfall ist VisualState das Ändern der Hintergrundfarbe des ausgewählten Elements, was im folgenden XAML-Beispiel gezeigt wird:
<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>
Wichtig
Der Style , der den SelectedVisualState enthält, muss einen TargetType Eigenschaftswert aufweisen, der der Typ des Stammelements von ist, das DataTemplateals ItemTemplate Eigenschaftswert festgelegt ist.
In diesem Beispiel wird der Style.TargetType Eigenschaftswert auf Grid festgelegt, da das Stammelement von ItemTemplate ein Gridist. Gibt SelectedVisualState an, dass, wenn ein Element in ausgewählt CollectionView ist, das BackgroundColor des Elements auf LightSkyBluefestgelegt wird:
Weitere Informationen zu visuellen Zuständen finden Sie unter Xamarin.Forms: Visual State-Manager.
Deaktivieren der Auswahl
CollectionView Die Auswahl ist standardmäßig deaktiviert. Wenn die Auswahl für jedoch CollectionView aktiviert ist, kann sie deaktiviert werden, indem Sie die SelectionMode -Eigenschaft auf Nonefestlegen:
<CollectionView ...
SelectionMode="None" />
Der entsprechende C#-Code lautet:
CollectionView collectionView = new CollectionView
{
...
SelectionMode = SelectionMode.None
};
Wenn die SelectionMode -Eigenschaft auf Nonefestgelegt ist, elemente in können CollectionView nicht ausgewählt werden, bleibt die SelectedItem -Eigenschaft erhalten null, und das SelectionChanged Ereignis wird nicht ausgelöst.
Hinweis
Wenn ein Element ausgewählt wurde und die SelectionMode Eigenschaft von in SingleNonegeändert wird, wird die SelectedItem -Eigenschaft auf null festgelegt, und das SelectionChanged Ereignis wird mit einer leeren CurrentSelection Eigenschaft ausgelöst.