Xamarin.Forms CollectionView-Gruppierung

  • Artikel

Beispiel herunterladen Das Beispiel herunterladen

Große Datasets können oft unübersichtlich werden, wenn sie in einer ständig scrollenden Liste angezeigt werden. In diesem Szenario kann das Organisieren der Daten in Gruppen die Benutzerfreundlichkeit verbessern, indem die Navigation in den Daten erleichtert wird.

CollectionView unterstützt das Anzeigen gruppierter Daten und definiert die folgenden Eigenschaften, die steuern, wie sie dargestellt werden:

  • IsGroupedvom Typ boolgibt an, ob die zugrunde liegenden Daten in Gruppen angezeigt werden sollen. Der Standardwert dieser Eigenschaft ist false.
  • GroupHeaderTemplatevom Typ DataTemplate, die Vorlage, die für den Header jeder Gruppe verwendet werden soll.
  • GroupFooterTemplatevom Typ DataTemplate, die Vorlage, die für die Fußzeile jeder Gruppe verwendet werden soll.

Diese Eigenschaften werden von BindableProperty -Objekten unterstützt, was bedeutet, dass die Eigenschaften Ziele von Datenbindungen sein können.

Die folgenden Screenshots zeigen gruppierte CollectionView Daten:

Screenshot einer gruppierten Daten in einer CollectionView unter iOS und Android

Weitere Informationen zu Datenvorlagen finden Sie unter Xamarin.Forms-Datenvorlagen.

Gruppieren von Daten

Daten müssen gruppiert werden, bevor sie angezeigt werden können. Dies kann durch Erstellen einer Liste von Gruppen erreicht werden, wobei jede Gruppe eine Liste von Elementen ist. Die Liste der Gruppen sollte eine IEnumerable<T> Sammlung sein, wobei T zwei Datenelemente definiert werden:

  • Ein Gruppenname.
  • Eine IEnumerable Auflistung, die die Elemente definiert, die zur Gruppe gehören.

Der Prozess für die Gruppierung von Daten besteht daher in folgendem Ziel:

  • Erstellen Sie einen Typ, der ein einzelnes Element modelliert.
  • Erstellen Sie einen Typ, der eine einzelne Gruppe von Elementen modelliert.
  • Erstellen Sie eine IEnumerable<T> Sammlung, wobei T der Typ ist, der eine einzelne Gruppe von Elementen modelliert. Diese Sammlung ist daher eine Sammlung von Gruppen, in denen die gruppierten Daten gespeichert werden.
  • Fügen Sie der IEnumerable<T> Sammlung Daten hinzu.

Beispiel

Beim Gruppieren von Daten besteht der erste Schritt darin, einen Typ zu erstellen, der ein einzelnes Element modelliert. Das folgende Beispiel zeigt die Animal -Klasse aus der Beispielanwendung:

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

Die Animal -Klasse modelliert ein einzelnes Element. Ein Typ, der eine Gruppe von Elementen modelliert, kann dann erstellt werden. Das folgende Beispiel zeigt die AnimalGroup -Klasse aus der Beispielanwendung:

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

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

Die AnimalGroup -Klasse erbt von der List<T> -Klasse und fügt eine Name Eigenschaft hinzu, die den Gruppennamen darstellt.

Anschließend IEnumerable<T> kann eine Sammlung von Gruppen erstellt werden:

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

Dieser Code definiert eine Auflistung mit dem Namen Animals, wobei jedes Element in der Auflistung ein AnimalGroup -Objekt ist. Jedes AnimalGroup Objekt besteht aus einem Namen und einer List<Animal> Auflistung, die die Animal Objekte in der Gruppe definiert.

Gruppierte Daten können dann der Animals Sammlung hinzugefügt werden:

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

Dieser Code erstellt zwei Gruppen in der Animals Auflistung. Die erste AnimalGroup trägt den Namen Bearsund enthält eine List<Animal> Sammlung von Bärendetails. Die zweite AnimalGroup trägt den Namen Monkeysund enthält eine List<Animal> Sammlung von Affendetails.

Anzeigen gruppierter Daten

CollectionView zeigt gruppierte Daten an, sofern die Daten ordnungsgemäß gruppiert wurden, indem die IsGrouped -Eigenschaft auf truefestgelegt wird:

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

Der entsprechende C#-Code lautet:

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

Die Darstellung jedes Elements im CollectionView wird definiert, indem die CollectionView.ItemTemplate -Eigenschaft auf festgelegt DataTemplatewird. Weitere Informationen finden Sie unter Definieren der Elementdarstellung.

Hinweis

Standardmäßig CollectionView wird der Gruppenname in der Kopf- und Fußzeile der Gruppe angezeigt. Dieses Verhalten kann durch Anpassen der Kopf- und Gruppenfußzeile geändert werden.

Anpassen des Gruppenheaders

Die Darstellung der einzelnen Gruppenheader kann angepasst werden, indem die CollectionView.GroupHeaderTemplate -Eigenschaft auf festgelegt DataTemplatewird:

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

In diesem Beispiel wird jeder Gruppenheader auf eine Label festgelegt, die den Gruppennamen anzeigt und für die andere Darstellungseigenschaften festgelegt sind. Die folgenden Screenshots zeigen den benutzerdefinierten Gruppenheader:

Screenshot eines benutzerdefinierten Gruppenheaders in einer CollectionView unter iOS und Android

Die Darstellung der einzelnen Gruppenfußzeilen kann angepasst werden, indem Sie die CollectionView.GroupFooterTemplate -Eigenschaft auf festlegen 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>

In diesem Beispiel wird jede Gruppenfußzeile auf eine Label festgelegt, die die Anzahl der Elemente in der Gruppe anzeigt. Die folgenden Screenshots zeigen die benutzerdefinierte Gruppenfußzeile:

Screenshot einer benutzerdefinierten Gruppenfußzeile in einer CollectionView unter iOS und Android

Leere Gruppen

Wenn gruppierte CollectionView Daten angezeigt werden, werden alle leeren Gruppen angezeigt. Solche Gruppen werden mit einer Gruppenkopf- und -fußzeile angezeigt, die angibt, dass die Gruppe leer ist. Die folgenden Screenshots zeigen eine leere Gruppe:

Screenshot einer leeren Gruppe in einer CollectionView unter iOS und Android

Hinweis

Unter iOS 10 und niedriger können Gruppenkopf- und -fußzeilen für leere Gruppen alle oben CollectionViewin angezeigt werden.

Gruppieren ohne Vorlagen

CollectionView kann ordnungsgemäß gruppierte Daten anzeigen, ohne die CollectionView.ItemTemplate -Eigenschaft auf festzulegen DataTemplate:

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

In diesem Szenario können aussagekräftige Daten angezeigt werden, indem die -Methode in dem ToString Typ überschrieben wird, der ein einzelnes Element modelliert, und der Typ, der eine einzelne Gruppe von Elementen modelliert.