Xamarin.Forms SammlungDaten anzeigen
CollectionView
enthält die folgenden Eigenschaften, die die anzuzeigenden Daten und deren Darstellung definieren:
ItemsSource
, vom TypIEnumerable
, gibt die Auflistung der anzuzeigenden Elemente an und weist den Standardwert aufnull
.ItemTemplate
vom TypDataTemplate
gibt die Vorlage an, die auf jedes Element in der Auflistung der anzuzeigenden Elemente angewendet werden soll.
Diese Eigenschaften werden durch BindableProperty
Objekte unterstützt, was bedeutet, dass die Eigenschaften Ziele von Datenbindungen sein können.
Hinweis
CollectionView
definiert eine ItemsUpdatingScrollMode
Eigenschaft, die das Scrollverhalten des CollectionView
darstellt, wenn neue Elemente hinzugefügt werden. Weitere Informationen zu dieser Eigenschaft finden Sie unter Steuern der Bildlaufposition beim Hinzufügen neuer Elemente.
CollectionView
unterstützt die inkrementelle Datenvirtualisierung beim Scrollen des Benutzers. Weitere Informationen finden Sie unter Inkrementelles Laden von Daten.
Auffüllen einer CollectionView mit Daten
Ein CollectionView
wird mit Daten aufgefüllt, indem seine ItemsSource
Eigenschaft auf eine beliebige Auflistung festgelegt wird, die implementiert IEnumerable
. Standardmäßig CollectionView
werden Elemente in einer vertikalen Liste angezeigt.
Wichtig
Wenn zum Aktualisieren erforderlich CollectionView
ist, wenn Elemente in der zugrunde liegenden Auflistung hinzugefügt, entfernt oder geändert werden, sollte die zugrunde liegende Auflistung eine IEnumerable
Auflistung sein, die Benachrichtigungen zu Eigenschaftenänderungen sendet, z. B ObservableCollection
. .
CollectionView
kann mithilfe der Datenbindung mit Daten aufgefüllt werden, um die ItemsSource
-Eigenschaft an eine IEnumerable
Sammlung zu binden. In XAML wird dies mit der Binding
Markuperweiterung erreicht:
<CollectionView ItemsSource="{Binding Monkeys}" />
Der entsprechende C#-Code lautet:
CollectionView collectionView = new CollectionView();
collectionView.SetBinding(ItemsView.ItemsSourceProperty, "Monkeys");
In diesem Beispiel werden die ItemsSource
Eigenschaftendaten an die Monkeys
Eigenschaft des verbundenen Viewmodels gebunden.
Hinweis
Kompilierte Bindungen können aktiviert werden, um die Datenbindungsleistung in Xamarin.Forms Anwendungen zu verbessern. Weitere Informationen finden Sie unter Kompilierte Bindungen.
Informationen zum Ändern des CollectionView
Layouts finden Sie unter Xamarin.Forms CollectionView Layout. Informationen zum Definieren der Darstellung der einzelnen Elemente in finden CollectionView
Sie unter Definieren der Elementdarstellung. Weitere Informationen zur Datenbindung finden Sie unter Xamarin.Forms-Datenbindung.
Warnung
CollectionView
löst eine Ausnahme aus, wenn sie ItemsSource
aus dem UI-Thread aktualisiert wird.
Elementdarstellung definieren
Die Darstellung jedes Elements in kann CollectionView
definiert werden, indem Sie die CollectionView.ItemTemplate
-Eigenschaft auf festlegen DataTemplate
:
<CollectionView ItemsSource="{Binding Monkeys}">
<CollectionView.ItemTemplate>
<DataTemplate>
<Grid Padding="10">
<Grid.RowDefinitions>
<RowDefinition Height="Auto" />
<RowDefinition Height="Auto" />
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto" />
<ColumnDefinition Width="Auto" />
</Grid.ColumnDefinitions>
<Image Grid.RowSpan="2"
Source="{Binding ImageUrl}"
Aspect="AspectFill"
HeightRequest="60"
WidthRequest="60" />
<Label Grid.Column="1"
Text="{Binding Name}"
FontAttributes="Bold" />
<Label Grid.Row="1"
Grid.Column="1"
Text="{Binding Location}"
FontAttributes="Italic"
VerticalOptions="End" />
</Grid>
</DataTemplate>
</CollectionView.ItemTemplate>
...
</CollectionView>
Der entsprechende C#-Code lautet:
CollectionView collectionView = new CollectionView();
collectionView.SetBinding(ItemsView.ItemsSourceProperty, "Monkeys");
collectionView.ItemTemplate = new DataTemplate(() =>
{
Grid grid = new Grid { Padding = 10 };
grid.RowDefinitions.Add(new RowDefinition { Height = GridLength.Auto });
grid.RowDefinitions.Add(new RowDefinition { Height = GridLength.Auto });
grid.ColumnDefinitions.Add(new ColumnDefinition { Width = GridLength.Auto });
grid.ColumnDefinitions.Add(new ColumnDefinition { Width = GridLength.Auto });
Image image = new Image { Aspect = Aspect.AspectFill, HeightRequest = 60, WidthRequest = 60 };
image.SetBinding(Image.SourceProperty, "ImageUrl");
Label nameLabel = new Label { FontAttributes = FontAttributes.Bold };
nameLabel.SetBinding(Label.TextProperty, "Name");
Label locationLabel = new Label { FontAttributes = FontAttributes.Italic, VerticalOptions = LayoutOptions.End };
locationLabel.SetBinding(Label.TextProperty, "Location");
Grid.SetRowSpan(image, 2);
grid.Children.Add(image);
grid.Children.Add(nameLabel, 1, 0);
grid.Children.Add(locationLabel, 1, 1);
return grid;
});
Die im DataTemplate
angegebenen Elemente definieren die Darstellung jedes Elements in der Liste. Im Beispiel wird das Layout innerhalb von DataTemplate
von verwaltet Grid
. Enthält Grid
ein Image
-Objekt und zwei Label
Objekte, die alle an Eigenschaften der Monkey
-Klasse gebunden sind:
public class Monkey
{
public string Name { get; set; }
public string Location { get; set; }
public string Details { get; set; }
public string ImageUrl { get; set; }
}
Die folgenden Screenshots zeigen das Ergebnis der Vorlagen für die einzelnen Elemente in der Liste:
Weitere Informationen zu Datenvorlagen finden Sie unter Xamarin.Forms-Datenvorlagen.
Auswählen der Elementdarstellung zur Laufzeit
Die Darstellung jedes Elements in kann CollectionView
zur Laufzeit basierend auf dem Elementwert ausgewählt werden, indem die CollectionView.ItemTemplate
-Eigenschaft auf ein DataTemplateSelector
-Objekt festgelegt wird:
<ContentPage ...
xmlns:controls="clr-namespace:CollectionViewDemos.Controls">
<ContentPage.Resources>
<DataTemplate x:Key="AmericanMonkeyTemplate">
...
</DataTemplate>
<DataTemplate x:Key="OtherMonkeyTemplate">
...
</DataTemplate>
<controls:MonkeyDataTemplateSelector x:Key="MonkeySelector"
AmericanMonkey="{StaticResource AmericanMonkeyTemplate}"
OtherMonkey="{StaticResource OtherMonkeyTemplate}" />
</ContentPage.Resources>
<CollectionView ItemsSource="{Binding Monkeys}"
ItemTemplate="{StaticResource MonkeySelector}" />
</ContentPage>
Der entsprechende C#-Code lautet:
CollectionView collectionView = new CollectionView
{
ItemTemplate = new MonkeyDataTemplateSelector { ... }
};
collectionView.SetBinding(ItemsView.ItemsSourceProperty, "Monkeys");
Die ItemTemplate
-Eigenschaft ist auf ein MonkeyDataTemplateSelector
-Objekt festgelegt. Das folgende Beispiel zeigt die MonkeyDataTemplateSelector
-Klasse:
public class MonkeyDataTemplateSelector : DataTemplateSelector
{
public DataTemplate AmericanMonkey { get; set; }
public DataTemplate OtherMonkey { get; set; }
protected override DataTemplate OnSelectTemplate(object item, BindableObject container)
{
return ((Monkey)item).Location.Contains("America") ? AmericanMonkey : OtherMonkey;
}
}
Die MonkeyDataTemplateSelector
-Klasse definiert AmericanMonkey
und OtherMonkey
DataTemplate
Eigenschaften, die auf unterschiedliche Datenvorlagen festgelegt sind. Die OnSelectTemplate
Überschreibung gibt die AmericanMonkey
Vorlage zurück, die den Affennamen und die Position im Teal anzeigt, wenn der Name des Affen "Amerika" enthält. Wenn der Name des Affen nicht "America" enthält, gibt die OnSelectTemplate
Überschreibung die OtherMonkey
Vorlage zurück, die den Namen und die Position des Affen in Silber anzeigt:
Weitere Informationen zu Datenvorlagenselektoren finden Sie unter Erstellen eines Xamarin.Forms DataTemplateSelector.
Wichtig
Wenn Sie verwenden CollectionView
, legen Sie das Stammelement Ihrer DataTemplate
-Objekte niemals auf ein ViewCell
fest. Dies führt dazu, dass eine Ausnahme ausgelöst wird, da CollectionView
kein Konzept von Zellen vorhanden ist.
Kontextmenüs
CollectionView
unterstützt Kontextmenüs für Datenelemente über , SwipeView
wodurch das Kontextmenü mit einer Wischbewegung angezeigt wird. Das SwipeView
ist ein Containersteuerelement, das ein Inhaltselement umschließt und Kontextmenüelemente für dieses Inhaltselement bereitstellt. Aus diesem Grund werden Kontextmenüs für ein CollectionView
implementiert, indem ein SwipeView
erstellt wird, das den Inhalt definiert, den der SwipeView
umschließt, und die Kontextmenüelemente, die durch die Wischbewegung angezeigt werden. Dies wird erreicht, indem sie als Stammansicht in der DataTemplate
festlegenSwipeView
, die die Darstellung der einzelnen Datenelemente in definiertCollectionView
:
<CollectionView x:Name="collectionView"
ItemsSource="{Binding Monkeys}">
<CollectionView.ItemTemplate>
<DataTemplate>
<SwipeView>
<SwipeView.LeftItems>
<SwipeItems>
<SwipeItem Text="Favorite"
IconImageSource="favorite.png"
BackgroundColor="LightGreen"
Command="{Binding Source={x:Reference collectionView}, Path=BindingContext.FavoriteCommand}"
CommandParameter="{Binding}" />
<SwipeItem Text="Delete"
IconImageSource="delete.png"
BackgroundColor="LightPink"
Command="{Binding Source={x:Reference collectionView}, Path=BindingContext.DeleteCommand}"
CommandParameter="{Binding}" />
</SwipeItems>
</SwipeView.LeftItems>
<Grid BackgroundColor="White"
Padding="10">
<!-- Define item appearance -->
</Grid>
</SwipeView>
</DataTemplate>
</CollectionView.ItemTemplate>
</CollectionView>
Der entsprechende C#-Code lautet:
CollectionView collectionView = new CollectionView();
collectionView.SetBinding(ItemsView.ItemsSourceProperty, "Monkeys");
collectionView.ItemTemplate = new DataTemplate(() =>
{
// Define item appearance
Grid grid = new Grid { Padding = 10, BackgroundColor = Color.White };
// ...
SwipeView swipeView = new SwipeView();
SwipeItem favoriteSwipeItem = new SwipeItem
{
Text = "Favorite",
IconImageSource = "favorite.png",
BackgroundColor = Color.LightGreen
};
favoriteSwipeItem.SetBinding(MenuItem.CommandProperty, new Binding("BindingContext.FavoriteCommand", source: collectionView));
favoriteSwipeItem.SetBinding(MenuItem.CommandParameterProperty, ".");
SwipeItem deleteSwipeItem = new SwipeItem
{
Text = "Delete",
IconImageSource = "delete.png",
BackgroundColor = Color.LightPink
};
deleteSwipeItem.SetBinding(MenuItem.CommandProperty, new Binding("BindingContext.DeleteCommand", source: collectionView));
deleteSwipeItem.SetBinding(MenuItem.CommandParameterProperty, ".");
swipeView.LeftItems = new SwipeItems { favoriteSwipeItem, deleteSwipeItem };
swipeView.Content = grid;
return swipeView;
});
In diesem Beispiel ist der SwipeView
Inhalt ein Grid
, der die Darstellung jedes Elements in definiert CollectionView
. Die Wischelemente werden verwendet, um Aktionen für den SwipeView
Inhalt auszuführen, und werden angezeigt, wenn das Steuerelement von der linken Seite gewischt wird:
SwipeView
unterstützt vier verschiedene Wischrichtungen, wobei die Wischrichtung durch die Richtungsauflistung SwipeItems
definiert wird, der die SwipeItems
Objekte hinzugefügt werden. Standardmäßig wird ein Wischelement ausgeführt, wenn es vom Benutzer getippt wird. Außerdem werden die Wischelemente ausgeblendet, und der SwipeView
Inhalt wird erneut angezeigt, sobald ein Wischelement ausgeführt wurde. Diese Verhaltensweisen können jedoch geändert werden.
Weitere Informationen zum SwipeView
Steuerelement finden Sie unter Xamarin.Forms SwipeView.
Aktualisierung durch Ziehen
CollectionView
unterstützt pull to refresh functionality through , RefreshView
sodass die angezeigten Daten aktualisiert werden können, indem sie in der Liste der Elemente nach unten ziehen. Das RefreshView
ist ein Containersteuerelement, das pull to refresh-Funktionen für sein untergeordnetes Element bereitstellt, vorausgesetzt, das untergeordnete Steuerelement unterstützt scrollbare Inhalte. Daher wird pull to refresh für ein CollectionView
implementiert, indem sie als untergeordnetes Element von festgelegt RefreshView
wird:
<RefreshView IsRefreshing="{Binding IsRefreshing}"
Command="{Binding RefreshCommand}">
<CollectionView ItemsSource="{Binding Animals}">
...
</CollectionView>
</RefreshView>
Der entsprechende C#-Code lautet:
RefreshView refreshView = new RefreshView();
ICommand refreshCommand = new Command(() =>
{
// IsRefreshing is true
// Refresh data here
refreshView.IsRefreshing = false;
});
refreshView.Command = refreshCommand;
CollectionView collectionView = new CollectionView();
collectionView.SetBinding(ItemsView.ItemsSourceProperty, "Animals");
refreshView.Content = collectionView;
// ...
Wenn der Benutzer eine Aktualisierung initiiert, wird die ICommand
von der Command
-Eigenschaft definierte ausgeführt, wodurch die angezeigten Elemente aktualisiert werden sollen. Während der Aktualisierung wird eine Aktualisierungsvisualisierung angezeigt, die aus einem animierten Fortschrittskreis besteht:
Der Wert der RefreshView.IsRefreshing
-Eigenschaft gibt den aktuellen Zustand von an RefreshView
. Wenn vom Benutzer eine Aktualisierung ausgelöst wird, wechselt diese Eigenschaft automatisch zu true
. Nach Abschluss der Aktualisierung sollten Sie die -Eigenschaft auf false
zurücksetzen.
Weitere Informationen zu RefreshView
finden Sie unter Xamarin.Forms RefreshView.
Daten inkrementelles Laden
CollectionView
unterstützt die inkrementelle Datenvirtualisierung beim Scrollen des Benutzers. Dies ermöglicht Szenarien wie das asynchrone Laden einer Datenseite aus einem Webdienst, während der Benutzer scrollt. Darüber hinaus ist der Punkt, an dem mehr Daten geladen werden, konfigurierbar, sodass Benutzer keinen leeren Speicherplatz sehen oder nicht mehr scrollen können.
CollectionView
definiert die folgenden Eigenschaften, um das inkrementelle Laden von Daten zu steuern:
RemainingItemsThreshold
, vom Typint
, der Schwellenwert für Elemente, die in der Liste noch nicht sichtbar sind, bei der dasRemainingItemsThresholdReached
Ereignis ausgelöst wird.RemainingItemsThresholdReachedCommand
, vom TypICommand
, der ausgeführt wird, wenn erreichtRemainingItemsThreshold
wird.RemainingItemsThresholdReachedCommandParameter
vom Typobject
: der Parameter, der anRemainingItemsThresholdReachedCommand
übergeben wird.
CollectionView
definiert auch ein RemainingItemsThresholdReached
Ereignis, das ausgelöst wird, wenn der CollectionView
weit genug gescrollt wird, dass RemainingItemsThreshold
Elemente nicht angezeigt wurden. Dieses Ereignis kann verarbeitet werden, um weitere Elemente zu laden. Darüber hinaus wird beim Auslösen des Ereignisses RemainingItemsThresholdReached
das RemainingItemsThresholdReachedCommand
ausgeführt, wodurch das inkrementelle Laden von Daten in einem Viewmodel erfolgt.
Der Standardwert der RemainingItemsThreshold
Eigenschaft ist -1, was angibt, dass das RemainingItemsThresholdReached
Ereignis nie ausgelöst wird. Wenn der Eigenschaftswert 0 ist, wird das RemainingItemsThresholdReached
Ereignis ausgelöst, wenn das letzte Element in angezeigt ItemsSource
wird. Bei Werten, die größer als 0 sind, wird das RemainingItemsThresholdReached
Ereignis ausgelöst, wenn die Anzahl von Elementen enthält, zu denen ItemsSource
noch kein Bildlauf ausgeführt wurde.
Hinweis
CollectionView
überprüft die RemainingItemsThreshold
Eigenschaft, sodass ihr Wert immer größer oder gleich -1 ist.
Das folgende XAML-Beispiel zeigt ein CollectionView
, das Daten inkrementell lädt:
<CollectionView ItemsSource="{Binding Animals}"
RemainingItemsThreshold="5"
RemainingItemsThresholdReached="OnCollectionViewRemainingItemsThresholdReached">
...
</CollectionView>
Der entsprechende C#-Code lautet:
CollectionView collectionView = new CollectionView
{
RemainingItemsThreshold = 5
};
collectionView.RemainingItemsThresholdReached += OnCollectionViewRemainingItemsThresholdReached;
collectionView.SetBinding(ItemsView.ItemsSourceProperty, "Animals");
In diesem Codebeispiel wird das RemainingItemsThresholdReached
Ereignis ausgelöst, wenn fünf Elemente noch nicht scrollen und als Antwort den OnCollectionViewRemainingItemsThresholdReached
Ereignishandler ausführt:
void OnCollectionViewRemainingItemsThresholdReached(object sender, EventArgs e)
{
// Retrieve more data here and add it to the CollectionView's ItemsSource collection.
}
Hinweis
Daten können auch inkrementell geladen werden, indem sie an RemainingItemsThresholdReachedCommand
eine ICommand
Implementierung im viewmodel gebunden wird.