Xamarin.Forms SammlungDaten anzeigen
Das Beispiel herunterladenCollectionView 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.ItemTemplatevom TypDataTemplategibt 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 CollectionViewSie 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 OtherMonkeyDataTemplate 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 ViewCellfest. 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 , SwipeViewwodurch 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 , RefreshViewsodass 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 RefreshViewwird:
<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 falsezurücksetzen.
Weitere Informationen zu RefreshViewfinden 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 dasRemainingItemsThresholdReachedEreignis ausgelöst wird.RemainingItemsThresholdReachedCommand, vom TypICommand, der ausgeführt wird, wenn erreichtRemainingItemsThresholdwird.RemainingItemsThresholdReachedCommandParametervom 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.