Wyświetlanie pogrupowanych danych w obiekcie CollectionView

Artykuł
09/30/2024

Duże zestawy danych często stają się niewygodne podczas ciągłego przewijania listy. W tym scenariuszu organizowanie danych w grupach może poprawić środowisko użytkownika, ułatwiając nawigowanie po danych.

Interfejs użytkownika aplikacji wieloplatformowej platformy .NET (.NET MAUI) CollectionView obsługuje wyświetlanie pogrupowanych danych i definiuje następujące właściwości kontrolujące sposób ich prezentowania:

IsGrouped, typu bool, wskazuje, czy dane bazowe powinny być wyświetlane w grupach. Wartość domyślna tej właściwości to false.
GroupHeaderTemplate, typu DataTemplate, szablon do użycia dla nagłówka każdej grupy.
GroupFooterTemplate, typu DataTemplate, szablon do użycia dla stopki każdej grupy.

Te właściwości są wspierane przez BindableProperty obiekty, co oznacza, że właściwości mogą być obiektami docelowymi powiązań danych.

Poniższy zrzut ekranu przedstawia CollectionView wyświetlane pogrupowane dane:

Screenshot of grouped data in a CollectionView.

Aby uzyskać więcej informacji na temat szablonów danych, zobacz Szablony danych.

Grupuj dane

Dane muszą być pogrupowane, zanim będzie można je wyświetlić. Można to zrobić, tworząc listę grup, w których każda grupa jest listą elementów. Lista grup powinna być kolekcją IEnumerable<T> , w której T definiuje się dwa fragmenty danych:

Nazwa grupy.
Kolekcja IEnumerable definiująca elementy należące do grupy.

W związku z tym proces grupowania danych polega na:

Utwórz typ, który modeluje pojedynczy element.
Utwórz typ, który modeluje pojedynczą grupę elementów.
Utwórz kolekcję, gdzie T jest typemIEnumerable<T>, który modeluje pojedynczą grupę elementów. Ta kolekcja jest kolekcją grup, która przechowuje zgrupowane dane.
Dodaj dane do kolekcji IEnumerable<T> .

Przykład

Podczas grupowania danych pierwszym krokiem jest utworzenie typu, który modeluje pojedynczy element. Poniższy przykład przedstawia klasę Animal z przykładowej aplikacji:

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

Klasa Animal modeluje pojedynczy element. Typ, który modeluje grupę elementów, można następnie utworzyć. Poniższy przykład przedstawia klasę AnimalGroup z przykładowej aplikacji:

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

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

Klasa AnimalGroup dziedziczy z List<T> klasy i dodaje właściwość reprezentującą Name nazwę grupy.

Następnie IEnumerable<T> można utworzyć kolekcję grup:

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

Ten kod definiuje kolekcję o nazwie Animals, gdzie każdy element w kolekcji jest obiektem AnimalGroup . Każdy AnimalGroup obiekt składa się z nazwy i List<Animal> kolekcji definiującej Animal obiekty w grupie.

Pogrupowane dane można następnie dodać do kolekcji Animals :

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"
    },
    // ...
}));

Ten kod tworzy dwie grupy w kolekcji Animals . Pierwszy AnimalGroup nosi nazwę Bearsi zawiera List<Animal> kolekcję szczegółów niedźwiedzia. Drugi AnimalGroup nosi nazwę Monkeysi zawiera List<Animal> kolekcję szczegółów małpy.

Wyświetlanie pogrupowanych danych

CollectionView spowoduje wyświetlenie pogrupowanych danych, pod warunkiem, że dane zostały prawidłowo zgrupowane, ustawiając IsGrouped właściwość na 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>

Równoważny kod języka C# to:

CollectionView collectionView = new CollectionView
{
    IsGrouped = true
};
collectionView.SetBinding(ItemsView.ItemsSourceProperty, "Animals");
// ...

Wygląd każdego elementu w obiekcie CollectionView jest definiowany przez ustawienie CollectionView.ItemTemplate właściwości na DataTemplatewartość . Aby uzyskać więcej informacji, zobacz Definiowanie wyglądu elementu.

Uwaga

Domyślnie CollectionView nazwa grupy będzie wyświetlana w nagłówku i stopce grupy. To zachowanie można zmienić, dostosowując nagłówek grupy i stopkę grupy.

Dostosowywanie nagłówka grupy

Wygląd każdego nagłówka grupy można dostosować, ustawiając CollectionView.GroupHeaderTemplate właściwość na wartość DataTemplate:

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

W tym przykładzie każdy nagłówek grupy jest ustawiony na , Label który wyświetla nazwę grupy i ma inne właściwości wyglądu ustawione. Poniższy zrzut ekranu przedstawia dostosowany nagłówek grupy:

Screenshot of a customized group header in a CollectionView.

Dostosowywanie stopki grupy

Wygląd każdej stopki grupy można dostosować, ustawiając CollectionView.GroupFooterTemplate właściwość na DataTemplatewartość :

<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>

W tym przykładzie każda stopka grupy jest ustawiona na , Label która wyświetla liczbę elementów w grupie. Poniższy zrzut ekranu przedstawia dostosowaną stopkę grupy:

Screenshot of customized group footer in a CollectionView.

Puste grupy

Po wyświetleniu CollectionView pogrupowanych danych zostaną wyświetlone wszystkie grupy, które są puste. Takie grupy będą wyświetlane z nagłówkiem i stopką grupy, co oznacza, że grupa jest pusta. Poniższy zrzut ekranu przedstawia pustą grupę:

Screenshot of an empty group in a CollectionView.

Uwaga

W systemie iOS 10 nagłówki grup i stopki dla pustych grup mogą być wyświetlane w górnej części elementu CollectionView.

Grupuj bez szablonów

CollectionView może wyświetlać poprawnie zgrupowane dane bez ustawiania CollectionView.ItemTemplate właściwości na DataTemplatewartość :

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

W tym scenariuszu można wyświetlić istotne dane, przesłaniając ToString metodę w typie modelowym pojedynczego elementu oraz typ modelujący pojedynczą grupę elementów.

Udostępnij za pośrednictwem