Separación de los datos en grupos

  • 5 minutos

A medida que crece el número de filas en un elemento ListView, es más difícil que los usuarios encuentren un elemento determinado. Además, puede que un usuario solo esté interesado en un subconjunto determinado de elementos. Por ejemplo, en una aplicación de calendario, puede que un usuario quiera ver solo las citas del martes. O bien, en la aplicación doméstica inteligente, es posible que un usuario quiera observar los detectores de humo. En estas situaciones, puede resultar útil agrupar nuestros elementos. El usuario puede desplazarse rápidamente al grupo correcto y consultar toda la información relevante.

En esta unidad, daremos un vistazo a cómo agrupar elementos en un valor ListView. También vamos a agregar un encabezado de grupo para proporcionar un título.

Agrupación de datos en un elemento ListView

Hay dos cosas que necesitamos hacer para agrupar los datos. El primer paso consiste en establecer IsGroupingEnabled en True en nuestro elemento ListView:

    <ListView IsGroupingEnabled="True">

La segunda cosa que debemos hacer es cambiar cómo usamos nuestro elemento ListView.ItemsSource. Cuando estábamos mostrando filas sin grupos, nuestro elemento ItemsSource era una colección de elementos y cada elemento se representaba mediante una fila. Por ejemplo, una colección de Appointments daría lugar a una fila por cada cita.

Reestructuración del elemento ItemSource

Para los datos agrupados, sin embargo, necesitaremos que nuestro elemento ItemsSource sea una colección de ItemsSource. Cada grupo, a su vez, es una colección de cosas que necesitan filas. Para una lista de citas, esto podría significar que ItemsSource está establecido en una colección de objetos Day y cada Day tiene una colección de Appointments debajo de él.

  • ItemsSource
    • Lunes
      • 08:00: escuchar podcast
      • 09:00: quedar con Sue
      • ...
    • Martes
      • 08:00: café en la cervecería de la esquina
      • 09:00: al trabajo
    • ...

Y cada uno de esos grupos va a necesitar al menos un nombre. Por lo tanto, no podemos simplemente usar elementos List<List<T>> anidados como la colección de colecciones. Se necesita el nombre de grupo para que se muestre en el encabezado de sección de ListView.

Si estamos empezando con una colección plana de elementos que queremos convertir en una colección anidada con los nombres de grupo, el método ToLookup suele ser la solución ideal:

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

En este caso, ToLookup toma una colección de citas y devuelve una colección de objetos IGrouping. Cada IGrouping contiene lo siguiente:

  • Un objeto Key. Vamos a usar esta clave como el nombre para nuestro grupo. Se deriva de valores únicos de appt.Day.ToString().
  • Una colección de citas que tienen el mismo Day que el grupo Key.

Para mostrar las citas por día, solo debemos establecer esto como nuestro elemento ItemSource y recordar establecer IsGroupingEnabled:

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

Adición de encabezados de grupo

Aunque cada IGrouping tiene un valor Key que se puede usar como encabezado de sección, se debe indicar el elemento ListView que se va a usar. Esto lo podemos hacer con la propiedad GroupDisplayBinding:

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

Sugerencia

GroupDisplayBinding simplemente establece el texto del encabezado. Si necesitamos un control total del diseño, se puede usar GroupHeaderTemplate. También existen propiedades disponibles para establecer el encabezado o pie de página de la tabla entera. Consulte la documentación de ListView para obtener más información.