Xamarin.Forms Agrupación de CollectionView

Artículo
12/02/2021
5 minutos para leer

Ejemplo de descarga Descarga del ejemplo

Los conjuntos de datos grandes a menudo pueden resultar difíciles de manejar cuando se presentan en una lista de desplazamiento continua. En este escenario, la organización de los datos en grupos puede mejorar la experiencia del usuario al facilitar la navegación por los datos.

CollectionView admite la visualización de datos agrupados y define las siguientes propiedades que controlan cómo se presentarán:

IsGrouped, de tipo bool , indica si los datos subyacentes deben mostrarse en grupos. El valor predeterminado de esta propiedad es false.
GroupHeaderTemplate, de tipo DataTemplate , la plantilla que se usará para el encabezado de cada grupo.
GroupFooterTemplate, de tipo DataTemplate , la plantilla que se usará para el pie de página de cada grupo.

Estas propiedades están copiadas por objetos , lo que significa que las BindableProperty propiedades pueden ser destinos de enlaces de datos.

En las capturas de pantalla siguientes se muestra CollectionView un objeto que muestra los datos agrupados:

de pantalla de datos agrupados en CollectionView, en iOS y Android

Para obtener más información sobre las plantillas de datos, vea Xamarin.Forms Data Templates .

Agrupar datos

Los datos deben agruparse para poder mostrarse. Esto se puede lograr mediante la creación de una lista de grupos, donde cada grupo es una lista de elementos. La lista de grupos debe ser una IEnumerable<T> colección, donde T define dos fragmentos de datos:

Nombre de grupo.
Colección IEnumerable que define los elementos que pertenecen al grupo.

Por lo tanto, el proceso de agrupación de datos es:

Cree un tipo que modele un único elemento.
Cree un tipo que modele un único grupo de elementos.
Cree una IEnumerable<T> colección, donde T es el tipo que modela un único grupo de elementos. Por lo tanto, esta colección es una colección de grupos, que almacena los datos agrupados.
Agregue datos a la IEnumerable<T> colección.

Ejemplo

Al agrupar datos, el primer paso es crear un tipo que modele un solo elemento. En el ejemplo siguiente se muestra Animal la clase de la aplicación de ejemplo:

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

La Animal clase modela un solo elemento. A continuación, se puede crear un tipo que modela un grupo de elementos. En el ejemplo siguiente se muestra AnimalGroup la clase de la aplicación de ejemplo:

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

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

La AnimalGroup clase hereda de la List<T> clase y agrega una propiedad que representa el nombre del Name grupo.

A IEnumerable<T> continuación, se puede crear una colección de grupos:

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

Este código define una colección denominada Animals , donde cada elemento de la colección es un objeto AnimalGroup . Cada AnimalGroup objeto consta de un nombre y una colección que define los objetos del List<Animal>Animal grupo.

A continuación, se pueden agregar datos agrupados a la Animals colección:

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

Este código crea dos grupos en la Animals colección. El primero AnimalGroup se denomina y contiene una colección de detalles de BearsList<Animal> oso. El segundo AnimalGroup se denomina y contiene una colección de detalles de MonkeysList<Animal> monos.

Mostrar datos agrupados

CollectionView mostrará los datos agrupados, siempre que los datos se hayan agrupado correctamente, estableciendo la IsGrouped propiedad en 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>

El código de C# equivalente es el siguiente:

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

La apariencia de cada elemento de se define estableciendo la propiedad CollectionView Xamarin_Forms CollectionView _ItemsView_ItemTemplate" data-linktype="absolute-path">CollectionView.ItemTemplate en DataTemplate . Para obtener más información, vea Definir la apariencia del elemento.

Nota:

De forma predeterminada, mostrará el nombre del grupo en el encabezado y pie CollectionView de página del grupo. Este comportamiento se puede cambiar personalizando el encabezado de grupo y el pie de página del grupo.

Personalización del encabezado de grupo

La apariencia de cada encabezado de grupo se puede personalizar estableciendo la CollectionView.GroupHeaderTemplate propiedad en DataTemplate :

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

En este ejemplo, cada encabezado de grupo se establece en un que muestra el nombre del grupo Label y que tiene establecidas otras propiedades de apariencia. En las capturas de pantalla siguientes se muestra el encabezado de grupo personalizado:

de pantalla de un encabezado de grupo personalizado en collectionView, en iOS y Android

Personalización del pie de página del grupo

La apariencia de cada pie de página de grupo se puede personalizar estableciendo la CollectionView.GroupFooterTemplate propiedad en 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>

En este ejemplo, cada pie de página de grupo se establece en un Label que muestra el número de elementos del grupo. En las capturas de pantalla siguientes se muestra el pie de página del grupo personalizado:

personalizado Captura de pantalla de un pie de página de grupo personalizado en collectionView, en iOS y Android

Grupos vacíos

Cuando un CollectionView objeto muestra datos agrupados, mostrará los grupos que están vacíos. Estos grupos se mostrarán con un encabezado y un pie de página de grupo, lo que indica que el grupo está vacío. En las capturas de pantalla siguientes se muestra un grupo vacío:

de pantalla de un grupo vacío en collectionView, en iOS y Android

Nota:

En iOS 10 y una versión inferior, los encabezados de grupo y los pies de página de los grupos vacíos pueden mostrarse en la parte superior de CollectionView .

Agrupar sin plantillas

CollectionViewpuede mostrar datos agrupados correctamente sin establecer la propiedad Xamarin_Forms CollectionView _ItemsView_ItemTemplate" data-linktype="absolute-path">CollectionView.ItemTemplate en DataTemplate :

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

En este escenario, se pueden mostrar datos significativos invalidando el método en el tipo que modela un solo elemento y el tipo que modela ToString un único grupo de elementos.