Menampilkan data yang dikelompokkan dalam CollectionView

Artikel
09/30/2024

Himpunan data besar sering kali menjadi tidak berat ketika disajikan dalam daftar yang terus menggulir. Dalam skenario ini, mengatur data ke dalam grup dapat meningkatkan pengalaman pengguna dengan mempermudah menavigasi data.

UI Aplikasi Multi-platform .NET (.NET MAUI) CollectionView mendukung tampilan data yang dikelompokkan, dan menentukan properti berikut yang mengontrol bagaimana ia akan disajikan:

IsGrouped, dari jenis bool, menunjukkan apakah data yang mendasar harus ditampilkan dalam grup. Nilai default properti ini adalah false.
GroupHeaderTemplate, dari jenis DataTemplate, templat yang akan digunakan untuk header setiap grup.
GroupFooterTemplate, dari jenis DataTemplate, templat yang akan digunakan untuk footer setiap grup.

Properti ini didukung oleh BindableProperty objek, yang berarti bahwa properti dapat menjadi target pengikatan data.

Cuplikan layar berikut menunjukkan menampilkan data yang CollectionView dikelompokkan:

Screenshot of grouped data in a CollectionView.

Untuk informasi selengkapnya tentang templat data, lihat Templat data.

Mengelompokkan data

Data harus dikelompokkan sebelum dapat ditampilkan. Ini dapat dicapai dengan membuat daftar grup, di mana setiap grup adalah daftar item. Daftar grup harus berupa IEnumerable<T> koleksi, di mana T mendefinisikan dua bagian data:

Nama grup.
Koleksi IEnumerable yang menentukan item milik grup.

Oleh karena itu, proses untuk mengelompokkan data adalah:

Buat jenis yang memodelkan satu item.
Buat jenis yang memodelkan satu grup item.
Buat IEnumerable<T> koleksi, di mana T adalah jenis yang memodelkan satu grup item. Koleksi ini adalah kumpulan grup, yang menyimpan data yang dikelompokkan.
Tambahkan data ke IEnumerable<T> koleksi.

Contoh

Saat mengelompokkan data, langkah pertama adalah membuat jenis yang memodelkan satu item. Contoh berikut menunjukkan Animal kelas dari aplikasi sampel:

public class Animal
{
    public string Name { get; set; }
    public string Location { get; set; }
    public string Details { get; set; }
    public string ImageUrl { get; set; }
}

Kelas memodelkan Animal satu item. Jenis yang memodelkan sekelompok item kemudian dapat dibuat. Contoh berikut menunjukkan AnimalGroup kelas dari aplikasi sampel:

public class AnimalGroup : List<Animal>
{
    public string Name { get; private set; }

    public AnimalGroup(string name, List<Animal> animals) : base(animals)
    {
        Name = name;
    }
}

Kelas AnimalGroup mewarisi dari List<T> kelas dan menambahkan Name properti yang mewakili nama grup.

Kumpulan IEnumerable<T> grup kemudian dapat dibuat:

public List<AnimalGroup> Animals { get; private set; } = new List<AnimalGroup>();

Kode ini mendefinisikan koleksi bernama Animals, di mana setiap item dalam koleksi adalah AnimalGroup objek. Setiap AnimalGroup objek terdiri dari nama, dan List<Animal> koleksi yang menentukan Animal objek dalam grup.

Data yang dikelompokkan kemudian dapat ditambahkan ke Animals koleksi:

Animals.Add(new AnimalGroup("Bears", new List<Animal>
{
    new Animal
    {
        Name = "American Black Bear",
        Location = "North America",
        Details = "Details about the bear go here.",
        ImageUrl = "https://upload.wikimedia.org/wikipedia/commons/0/08/01_Schwarzbär.jpg"
    },
    new Animal
    {
        Name = "Asian Black Bear",
        Location = "Asia",
        Details = "Details about the bear go here.",
        ImageUrl = "https://upload.wikimedia.org/wikipedia/commons/thumb/b/b7/Ursus_thibetanus_3_%28Wroclaw_zoo%29.JPG/180px-Ursus_thibetanus_3_%28Wroclaw_zoo%29.JPG"
    },
    // ...
}));

Animals.Add(new AnimalGroup("Monkeys", new List<Animal>
{
    new Animal
    {
        Name = "Baboon",
        Location = "Africa & Asia",
        Details = "Details about the monkey go here.",
        ImageUrl = "https://upload.wikimedia.org/wikipedia/commons/thumb/f/fc/Papio_anubis_%28Serengeti%2C_2009%29.jpg/200px-Papio_anubis_%28Serengeti%2C_2009%29.jpg"
    },
    new Animal
    {
        Name = "Capuchin Monkey",
        Location = "Central & South America",
        Details = "Details about the monkey go here.",
        ImageUrl = "https://upload.wikimedia.org/wikipedia/commons/thumb/4/40/Capuchin_Costa_Rica.jpg/200px-Capuchin_Costa_Rica.jpg"
    },
    new Animal
    {
        Name = "Blue Monkey",
        Location = "Central and East Africa",
        Details = "Details about the monkey go here.",
        ImageUrl = "https://upload.wikimedia.org/wikipedia/commons/thumb/8/83/BlueMonkey.jpg/220px-BlueMonkey.jpg"
    },
    // ...
}));

Kode ini membuat dua grup dalam Animals koleksi. Yang pertama AnimalGroup diberi nama Bears, dan berisi List<Animal> kumpulan detail beruang. Yang kedua AnimalGroup diberi nama Monkeys, dan berisi List<Animal> kumpulan detail monyet.

Menampilkan data yang dikelompokkan

CollectionView akan menampilkan data yang dikelompokkan, asalkan data telah dikelompokkan dengan benar, dengan mengatur IsGrouped properti ke true:

<CollectionView ItemsSource="{Binding Animals}"
                IsGrouped="true">
    <CollectionView.ItemTemplate>
        <DataTemplate>
            <Grid Padding="10">
                ...
                <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
{
    IsGrouped = true
};
collectionView.SetBinding(ItemsView.ItemsSourceProperty, "Animals");
// ...

Tampilan setiap item dalam CollectionView ditentukan dengan mengatur CollectionView.ItemTemplate properti ke DataTemplate. Untuk informasi selengkapnya, lihat Menentukan tampilan item.

Catatan

Secara default, CollectionView akan menampilkan nama grup di header dan footer grup. Perilaku ini dapat diubah dengan menyesuaikan header grup dan footer grup.

Mengkustomisasi header grup

Tampilan setiap header grup dapat disesuaikan dengan mengatur CollectionView.GroupHeaderTemplate properti ke DataTemplate:

<CollectionView ItemsSource="{Binding Animals}"
                IsGrouped="true">
    ...
    <CollectionView.GroupHeaderTemplate>
        <DataTemplate>
            <Label Text="{Binding Name}"
                   BackgroundColor="LightGray"
                   FontSize="18"
                   FontAttributes="Bold" />
        </DataTemplate>
    </CollectionView.GroupHeaderTemplate>
</CollectionView>

Dalam contoh ini, setiap header grup diatur ke Label yang menampilkan nama grup, dan yang memiliki properti tampilan lain yang diatur. Cuplikan layar berikut menunjukkan header grup yang dikustomisasi:

Screenshot of a customized group header in a CollectionView.

Mengkustomisasi footer grup

Tampilan setiap footer grup dapat disesuaikan dengan mengatur CollectionView.GroupFooterTemplate properti ke DataTemplate:

<CollectionView ItemsSource="{Binding Animals}"
                IsGrouped="true">
    ...
    <CollectionView.GroupFooterTemplate>
        <DataTemplate>
            <Label Text="{Binding Count, StringFormat='Total animals: {0:D}'}"
                   Margin="0,0,0,10" />
        </DataTemplate>
    </CollectionView.GroupFooterTemplate>
</CollectionView>

Dalam contoh ini, setiap footer grup diatur ke yang Label menampilkan jumlah item dalam grup. Cuplikan layar berikut menunjukkan footer grup yang dikustomisasi:

Screenshot of customized group footer in a CollectionView.

Grup kosong

Saat menampilkan data yang CollectionView dikelompokkan, data tersebut akan menampilkan grup apa pun yang kosong. Grup tersebut akan ditampilkan dengan header dan footer grup, yang menunjukkan bahwa grup kosong. Cuplikan layar berikut menunjukkan grup kosong:

Screenshot of an empty group in a CollectionView.

Catatan

Di iOS 10, header grup dan footer untuk grup kosong semuanya dapat ditampilkan di bagian CollectionViewatas .

Grup tanpa templat

CollectionView dapat menampilkan data yang dikelompokkan dengan benar tanpa mengatur CollectionView.ItemTemplate properti ke DataTemplate:

<CollectionView ItemsSource="{Binding Animals}"
                IsGrouped="true" />

Dalam skenario ini, data yang bermakna dapat ditampilkan dengan mengambil alih metode dalam jenis yang memodelkan ToString satu item, dan jenis yang memodelkan satu grup item.

Bagikan melalui