Aufteilen von Daten in Gruppen

  • 5 Minuten

Mit steigender Anzahl von Zeilen in einem ListView-Steuerelement wird es für die Benutzer schwieriger, ein bestimmtes Element zu finden. Oder ein Benutzer ist möglicherweise nur an einer bestimmten Teilmenge der Elemente interessiert. Beispielsweise möchte ein Benutzer eventuell, dass in einer Kalender-App nur Termine am Dienstag angezeigt werden. Oder ein Benutzer möchte, dass in der Smart Home-App die Rauchmelder angezeigt werden. In diesen Situationen kann das Gruppieren der Elemente sinnvoll sein. Der Benutzer kann schnell zur richtigen Gruppe scrollen und alle relevanten Informationen anzeigen.

In dieser Lerneinheit betrachten wir, wie Elemente in einer ListView gruppiert werden. Wir fügen auch einen Gruppenkopf hinzu, um einen Titel anzugeben.

Gruppieren von Daten in einem ListView-Steuerelement

Es gibt zwei Dinge, die wir zum Gruppieren unserer Daten erledigen müssen. Zunächst muss IsGroupingEnabled in der ListView auf True festgelegt werden:

    <ListView IsGroupingEnabled="True">

Außerdem müssen wir die Verwendung von ListView.ItemsSource ändern. Bei der Anzeige von Zeilen ohne Gruppen war ItemsSource eine Sammlung von Elementen, und jedes Element wurde durch eine Zeile dargestellt. Eine Appointments-Sammlung würde beispielsweise zu einer Zeile für jeden Termin führen.

Umstrukturieren von ItemSource

Bei gruppierten Daten muss ItemsSource eine Sammlung von ItemsSource sein. Jede Gruppe wiederum ist eine Sammlung von Elementen, die Zeilen benötigen. Bei einer Terminliste könnte dies bedeuten, dass ItemsSource auf eine Sammlung von Day-Objekten festgelegt ist, und jedes Day-Objekt umfasst eine untergeordnete Appointments-Sammlung.

  • ItemsSource
    • Montag
      • 8 Uhr: Podcast anhören
      • 9 Uhr: Treffen mit Sue
      • ...
    • Dienstag
      • 8 Uhr: Kaffee im Lokal an der Ecke
      • 9 Uhr: Konzentrierte Arbeit
    • ...

Und jede dieser Gruppen benötigt mindestens einen Namen. Es ist also nicht möglich, List<List<T>> als Sammlung von Sammlungen zu schachteln. Es wird ein Gruppenname benötigt, der als ListView-Abschnittsüberschrift angezeigt wird.

Wenn wir mit einer flachen Sammlung aus Elementen beginnen, die in eine geschachtelte Sammlung mit Gruppennamen konvertiert werden soll, ist die ToLookup-Methode häufig die ideale Lösung:

var groupedAppointments = appointments.All.
    .ToLookup(appt => appt.Day.ToString() );

Hier akzeptiert ToLookup eine Sammlung von Terminen und gibt eine Sammlung von IGrouping-Objekten zurück. Jedes IGrouping-Element umfasst Folgendes:

  • einen Key Wir verwenden diesen Schlüssel als Namen für die Gruppe. Er wird aus eindeutigen Werten von appt.Day.ToString() abgeleitet.
  • Eine Sammlung von Terminen, die alle Day als Key für die Gruppe verwenden.

Um die Termine nach Tag anzuzeigen, ist lediglich eine Festlegung als ItemSource-Element erforderlich. Denken Sie außerdem daran, IsGroupingEnabled festzulegen:

appointmentListView.ItemsSource = groupedAppointments;
appointmentListView.IsGroupingEnabled = true;

Hinzufügen von Gruppenüberschriften

Obwohl jedes IGrouping-Objekt über ein Key-Element verfügt, das wir als Abschnittsüberschrift verwenden können, muss das ListView-Element angewiesen werden, den Schlüssel zu verwenden. Dies erreichen wir mithilfe der GroupDisplayBinding-Eigenschaft:

<ListView GroupDisplayBinding="{Binding Key}" ...>

Tipp

GroupDisplayBinding legt lediglich den Text der Überschrift fest. Wenn wir das Layout vollständig steuern möchten, können wir GroupHeaderTemplate verwenden. Es stehen außerdem Eigenschaften zum Festlegen von Kopf- oder Fußzeilen für die gesamte Tabelle zur Verfügung. Ausführliche Informationen dazu finden Sie in der ListView-Dokumentation.