CollectionView

Browse sample. Examina la muestra

En .NET Multi-platform App UI (.NET MAUI), CollectionView es una vista para presentar listas de datos mediante distintas especificaciones de diseño. Su objetivo es ofrecer una alternativa a ListView más flexible y con mejor rendimiento.

En la captura de pantalla siguiente se muestra un CollectionView que usa una cuadrícula vertical de dos columnas y permite varias selecciones:

Screenshot of a CollectionView vertical grid layout.

CollectionView debe usarse para presentar listas de datos que requieren desplazamiento o selección. Se puede usar un diseño enlazable cuando los datos que se van a mostrar no requieren desplazamiento ni selección. Para obtener más información, consulta BindableLayout.

Diferencias entre CollectionView y ListView

Aunque las API CollectionView y ListView son similares, hay algunas diferencias importantes:

  • CollectionView tiene un modelo de diseño flexible, que permite presentar los datos en vertical u horizontal, en una lista o en una cuadrícula.
  • CollectionView admite tanto la selección única como la selección múltiple.
  • CollectionView no tiene ningún concepto de celdas. En su lugar, se usa una plantilla de datos para definir la apariencia de cada elemento de datos de la lista.
  • CollectionView utiliza automáticamente la virtualización proporcionada por los controles nativos subyacentes.
  • CollectionView reduce la superficie de API de ListView. Muchas propiedades y eventos de ListView no están presentes en CollectionView.
  • CollectionView no incluye separadores integrados.
  • CollectionView generará una excepción si su ItemsSource se actualiza fuera del subproceso de interfaz de usuario.

Pasar de ListView a CollectionView

Las implementaciones de ListView se pueden migrar a implementaciones de CollectionView con la ayuda de la tabla siguiente:

Concepto API de las vistas de lista CollectionView
Data ItemsSource Un CollectionView se rellena con datos estableciendo su propiedad ItemsSource. Para más información, consulta Rellenar un CollectionView con datos.
Apariencia de los elementos ItemTemplate La apariencia de cada elemento de CollectionView se puede definir estableciendo la propiedad ItemTemplate en un DataTemplate. Para obtener más información, consulta Definir la apariencia del elemento.
Celdas TextCell, , ImageCell, ViewCell CollectionView no tiene ningún concepto de celdas y, por tanto, ningún concepto de indicadores de divulgación. En su lugar, se usa una plantilla de datos para definir la apariencia de cada elemento de datos de la lista.
Separadores de filas SeparatorColor, SeparatorVisibility CollectionView no incluye separadores integrados. Se pueden proporcionar, si se desea, en la plantilla de elemento.
Número de selección SelectionMode, SelectedItem CollectionView admite tanto la selección única como la selección múltiple. Para obtener más información, consulta Configurar selección de elementos de CollectionView.
Altura de la fila HasUnevenRows, RowHeight En un CollectionView, el alto de fila de cada elemento viene determinado por la propiedad ItemSizingStrategy. Para obtener más información, consulta Ajuste de tamaño de elemento.
Almacenamiento en memoria caché CachingStrategy CollectionView usa automáticamente la virtualización proporcionada por los controles nativos subyacentes.
Encabezados y pies de página Header, HeaderElement, HeaderTemplate, Footer, FooterElement, FooterTemplate CollectionView puede presentar un encabezado y pie de página que se desplazan con los elementos de la lista, a través de las propiedades Header, Footer, HeaderTemplate y FooterTemplate. Para más información, consulta Encabezados y pies de página.
Agrupar GroupDisplayBinding, GroupHeaderTemplate, GroupShortNameBinding, IsGroupingEnabled CollectionView muestra los datos agrupados correctamente estableciendo su propiedad IsGrouped en true. Los encabezados del grupo y los pies de página del grupo se pueden personalizar estableciendo las propiedades GroupHeaderTemplate y GroupFooterTemplate en los objetos DataTemplate. Para más información, consulta Visualización de datos agrupados en CollectionView.
Extraer para actualizar IsPullToRefreshEnabled, IsRefreshing, RefreshAllowed, RefreshCommand, RefreshControlColor, BeginRefresh(), EndRefresh() Se admite la función de deslizar para actualizar estableciendo CollectionView como elemento secundario de RefreshView. Para más información, consulta Deslizar para actualizar.
Elementos del menú contextual ContextActions Los elementos del menú contextual se admiten estableciendo como SwipeView la vista raíz de DataTemplate que define la apariencia de cada elemento de datos en CollectionView. Para más información, consulte Menús contextuales.
Desplazarse ScrollTo() CollectionView define métodos ScrollTo, que desplazan los elementos a la vista. Para más información, consulta Control del desplazamiento en CollectionView.