Mengisi CollectionView dengan data
Telusuri sampelUI Aplikasi Multi-platform .NET (.NET MAUI) CollectionView mencakup properti berikut yang menentukan data yang akan ditampilkan, dan tampilannya:
ItemsSource, dari jenisIEnumerable, menentukan kumpulan item yang akan ditampilkan, dan memiliki nilainulldefault .ItemTemplate, dari jenis DataTemplate, menentukan templat yang akan diterapkan ke setiap item dalam kumpulan item yang akan ditampilkan.
Properti ini didukung oleh BindableProperty objek, yang berarti bahwa properti dapat menjadi target pengikatan data.
CollectionViewItemsUpdatingScrollMode menentukan properti yang mewakili perilaku pengguliran CollectionView ketika item baru ditambahkan ke dalamnya. Untuk informasi selengkapnya tentang properti ini, lihat Mengontrol posisi gulir saat item baru ditambahkan.
CollectionView mendukung virtualisasi data inkremental saat pengguna menggulir. Untuk informasi selengkapnya, lihat Memuat data secara bertahap.
Mengisi CollectionView dengan data
CollectionView diisi dengan data dengan mengatur propertinya ItemsSource ke koleksi apa pun yang mengimplementasikan IEnumerable. Secara default, CollectionView menampilkan item dalam daftar vertikal.
Penting
CollectionView Jika diperlukan untuk menyegarkan saat item ditambahkan, dihapus, atau diubah dalam koleksi yang mendasar, koleksi yang mendasar harus berupa IEnumerable koleksi yang mengirim pemberitahuan perubahan properti, seperti ObservableCollection.
CollectionView dapat diisi dengan data dengan menggunakan pengikatan data untuk mengikat propertinya ItemsSource ke IEnumerable koleksi. Di XAML, ini dicapai dengan Binding ekstensi markup:
<CollectionView ItemsSource="{Binding Monkeys}" />
Kode C# yang setara adalah:
CollectionView collectionView = new CollectionView();
collectionView.SetBinding(ItemsView.ItemsSourceProperty, "Monkeys");
Dalam contoh ini, ItemsSource data properti mengikat ke Monkeys properti viewmodel yang terhubung.
Catatan
Pengikatan yang dikompilasi dapat diaktifkan untuk meningkatkan performa pengikatan data dalam aplikasi .NET MAUI. Untuk informasi selengkapnya, lihat Pengikatan yang dikompilasi.
Untuk informasi tentang cara mengubah CollectionView tata letak, lihat Menentukan tata letak CollectionView. Untuk informasi tentang cara menentukan tampilan setiap item di CollectionView, lihat Menentukan tampilan item. Untuk informasi selengkapnya tentang pengikatan data, lihat Pengikatan data.
Peringatan
CollectionView akan memberikan pengecualian jika ItemsSource diperbarui dari utas UI.
Tentukan tampilan item
Tampilan setiap item dalam CollectionView dapat ditentukan dengan mengatur CollectionView.ItemTemplate properti ke 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>
Kode C# yang setara adalah:
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.Add(image);
grid.Add(nameLabel, 1, 0);
grid.Add(locationLabel, 1, 1);
return grid;
});
Elemen yang ditentukan dalam DataTemplate menentukan tampilan setiap item dalam daftar. Dalam contoh, tata letak dalam DataTemplate dikelola oleh Grid. Grid berisi Image objek, dan dua Label objek, yang semuanya mengikat properti Monkey kelas:
public class Monkey
{
public string Name { get; set; }
public string Location { get; set; }
public string Details { get; set; }
public string ImageUrl { get; set; }
}
Cuplikan layar berikut menunjukkan hasil templat setiap item dalam daftar:
Tip
Menempatkan CollectionView di dalam VerticalStackLayout dapat menghentikan CollectionView pengguliran, dan dapat membatasi jumlah item yang ditampilkan. Dalam situasi ini, ganti VerticalStackLayout dengan Grid.
Untuk informasi selengkapnya tentang templat data, lihat Templat data.
Pilih tampilan item saat runtime
Tampilan setiap item dalam CollectionView dapat dipilih pada runtime, berdasarkan nilai item, dengan mengatur CollectionView.ItemTemplate properti ke DataTemplateSelector objek:
<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>
Kode C# yang setara adalah:
CollectionView collectionView = new CollectionView
{
ItemTemplate = new MonkeyDataTemplateSelector { ... }
};
collectionView.SetBinding(ItemsView.ItemsSourceProperty, "Monkeys");
Properti ItemTemplate diatur ke MonkeyDataTemplateSelector objek. Contoh berikut menunjukkan MonkeyDataTemplateSelector kelas:
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;
}
}
Kelas MonkeyDataTemplateSelector menentukan AmericanMonkey dan OtherMonkey DataTemplate properti yang diatur ke templat data yang berbeda. Penimpaan OnSelectTemplate AmericanMonkey mengembalikan templat, yang menampilkan nama monyet dan lokasi teal, ketika nama monyet berisi "Amerika". Ketika nama monyet tidak berisi "Amerika", OnSelectTemplate penimpaan OtherMonkey mengembalikan templat, yang menampilkan nama monyet dan lokasi dengan perak:
Untuk informasi selengkapnya tentang pemilih templat data, lihat Membuat DataTemplateSelector.
Penting
Saat menggunakan CollectionView, jangan pernah mengatur elemen akar objek Anda DataTemplate ke ViewCell. Ini akan mengakibatkan pengecualian dilemparkan karena CollectionView tidak memiliki konsep sel.
Menu konteks
CollectionView mendukung menu konteks untuk item data melalui SwipeView, yang mengungkapkan menu konteks dengan gerakan gesek. SwipeView adalah kontrol kontainer yang membungkus item konten, dan menyediakan item menu konteks untuk item konten tersebut. Oleh karena itu, menu konteks diimplementasikan untuk dengan CollectionView membuat SwipeView yang menentukan konten yang dibungkus SwipeView , dan item menu konteks yang diungkapkan oleh gerakan gesek. Ini dicapai dengan mengatur SwipeView sebagai tampilan akar dalam DataTemplate yang menentukan tampilan setiap item data dalam CollectionView:
<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>
Kode C# yang setara adalah:
CollectionView collectionView = new CollectionView();
collectionView.SetBinding(ItemsView.ItemsSourceProperty, "Monkeys");
collectionView.ItemTemplate = new DataTemplate(() =>
{
// Define item appearance
Grid grid = new Grid { Padding = 10, BackgroundColor = Colors.White };
// ...
SwipeView swipeView = new SwipeView();
SwipeItem favoriteSwipeItem = new SwipeItem
{
Text = "Favorite",
IconImageSource = "favorite.png",
BackgroundColor = Colors.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 = Colors.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;
});
Dalam contoh ini, SwipeView konten adalah Grid yang menentukan tampilan setiap item di CollectionView. Item gesek digunakan untuk melakukan tindakan pada SwipeView konten, dan terungkap saat kontrol disusutkan dari sisi kiri:
SwipeViewmendukung empat arah gesek yang berbeda, dengan arah gesek yang ditentukan oleh koleksi SwipeItems arah SwipeItems tempat objek ditambahkan. Secara default, item geser dijalankan saat diketuk oleh pengguna. Selain itu, setelah item gesek dijalankan, item geser disembunyikan dan SwipeView konten ditampilkan kembali. Namun, perilaku ini dapat diubah.
Untuk informasi selengkapnya tentang SwipeView kontrol, lihat SwipeView.
Tarik untuk menyegarkan
CollectionView mendukung penarikan untuk menyegarkan fungsionalitas melalui RefreshView, yang memungkinkan data ditampilkan untuk disegarkan dengan menarik ke bawah pada daftar item. RefreshView adalah kontrol kontainer yang menyediakan penarikan untuk menyegarkan fungsionalitas kepada anaknya, asalkan anak mendukung konten yang dapat digulir. Oleh karena itu, tarik ke refresh diimplementasikan untuk dengan CollectionView mengaturnya sebagai anak dari RefreshView:
<RefreshView IsRefreshing="{Binding IsRefreshing}"
Command="{Binding RefreshCommand}">
<CollectionView ItemsSource="{Binding Animals}">
...
</CollectionView>
</RefreshView>
Kode C# yang setara adalah:
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;
// ...
Saat pengguna memulai refresh, ICommand yang ditentukan oleh Command properti dijalankan, yang harus me-refresh item yang ditampilkan. Visualisasi refresh ditampilkan saat refresh terjadi, yang terdiri dari lingkaran kemajuan animasi:
Nilai RefreshView.IsRefreshing properti menunjukkan status saat ini dari RefreshView. Ketika refresh dipicu oleh pengguna, properti ini akan secara otomatis beralih ke true. Setelah refresh selesai, Anda harus mengatur ulang properti ke false.
Untuk informasi selengkapnya tentang RefreshView, lihat RefreshView.
Memuat data secara bertahap
CollectionView mendukung virtualisasi data inkremental saat pengguna menggulir. Ini memungkinkan skenario seperti memuat halaman data secara asinkron dari layanan web, saat pengguna menggulir. Selain itu, titik di mana lebih banyak data dimuat dapat dikonfigurasi sehingga pengguna tidak melihat ruang kosong, atau dihentikan dari pengguliran.
Peringatan
Jangan mencoba memuat data secara bertahap dalam CollectionView yang ada di StackLayout. Skenario ini akan menyebabkan perulangan tak terbatas terjadi di mana CollectionView akan terus berkembang.
CollectionView mendefinisikan properti berikut untuk mengontrol pemuatan data inkremental:
RemainingItemsThreshold, dari jenisint, ambang item yang belum terlihat dalam daftar di manaRemainingItemsThresholdReachedperistiwa akan ditembakkan.RemainingItemsThresholdReachedCommand, dari jenis ICommand, yang dijalankan ketika tercapaiRemainingItemsThreshold.RemainingItemsThresholdReachedCommandParameter, dari jenisobject, yang merupakan parameter yang diteruskan keRemainingItemsThresholdReachedCommand.
CollectionView juga mendefinisikan RemainingItemsThresholdReached peristiwa yang diaktifkan ketika CollectionView digulir cukup jauh sehingga RemainingItemsThreshold item belum ditampilkan. Kejadian ini dapat ditangani untuk memuat lebih banyak item. Selain itu, ketika RemainingItemsThresholdReached peristiwa diaktifkan, RemainingItemsThresholdReachedCommand dieksekusi, memungkinkan pemuatan data bertahap terjadi di viewmodel.
Nilai RemainingItemsThreshold default properti adalah -1, yang menunjukkan bahwa RemainingItemsThresholdReached peristiwa tidak akan pernah diaktifkan. Ketika nilai properti adalah 0, RemainingItemsThresholdReached peristiwa akan diaktifkan ketika item akhir dalam ItemsSource ditampilkan. Untuk nilai yang lebih besar dari 0, RemainingItemsThresholdReached peristiwa akan diaktifkan ketika ItemsSource berisi jumlah item yang belum digulir.
Catatan
CollectionView memvalidasi RemainingItemsThreshold properti sehingga nilainya selalu lebih besar dari atau sama dengan -1.
Contoh XAML berikut menunjukkan CollectionView yang memuat data secara bertahap:
<CollectionView ItemsSource="{Binding Animals}"
RemainingItemsThreshold="5"
RemainingItemsThresholdReached="OnCollectionViewRemainingItemsThresholdReached">
...
</CollectionView>
Kode C# yang setara adalah:
CollectionView collectionView = new CollectionView
{
RemainingItemsThreshold = 5
};
collectionView.RemainingItemsThresholdReached += OnCollectionViewRemainingItemsThresholdReached;
collectionView.SetBinding(ItemsView.ItemsSourceProperty, "Animals");
Dalam contoh kode ini, RemainingItemsThresholdReached peristiwa diaktifkan ketika ada 5 item yang belum digulir ke, dan sebagai respons menjalankan OnCollectionViewRemainingItemsThresholdReached penanganan aktivitas:
void OnCollectionViewRemainingItemsThresholdReached(object sender, EventArgs e)
{
// Retrieve more data here and add it to the CollectionView's ItemsSource collection.
}
Catatan
Data juga dapat dimuat secara bertahap dengan mengikat RemainingItemsThresholdReachedCommand implementasi ICommand dalam viewmodel.
