:::no-loc(Xamarin.Forms)::: Agrupamento CollectionView:::no-loc(Xamarin.Forms)::: CollectionView Grouping

Baixar Exemplo Baixar o exemploDownload Sample Download the sample

Conjuntos de dados grandes geralmente podem se tornar difíceis quando apresentados em uma lista de rolagem contínua.Large data sets can often become unwieldy when presented in a continually scrolling list. Nesse cenário, organizar os dados em grupos pode melhorar a experiência do usuário, facilitando a navegação dos dados.In this scenario, organizing the data into groups can improve the user experience by making it easier to navigate the data.

CollectionView dá suporte à exibição de dados agrupados e define as seguintes propriedades que controlam como ele será apresentado:CollectionView supports displaying grouped data, and defines the following properties that control how it will be presented:

  • IsGrouped, do tipo bool , indica se os dados subjacentes devem ser exibidos em grupos.IsGrouped, of type bool, indicates whether the underlying data should be displayed in groups. O valor padrão dessa propriedade é false.The default value of this property is false.
  • GroupHeaderTemplate, do tipo DataTemplate , o modelo a ser usado para o cabeçalho de cada grupo.GroupHeaderTemplate, of type DataTemplate, the template to use for the header of each group.
  • GroupFooterTemplate, do tipo DataTemplate , o modelo a ser usado para o rodapé de cada grupo.GroupFooterTemplate, of type DataTemplate, the template to use for the footer of each group.

Essas propriedades são apoiadas por BindableProperty objetos, o que significa que as propriedades podem ser destinos de associações de dados.These properties are backed by BindableProperty objects, which means that the properties can be targets of data bindings.

As capturas de tela a seguir mostram uma CollectionView exibição dos dados agrupados:The following screenshots show a CollectionView displaying grouped data:

Captura de tela de dados agrupados em um CollectionView, no iOS e no AndroidScreenshot of a grouped data in a CollectionView, on iOS and Android

Para obter mais informações sobre modelos de dados, consulte :::no-loc(Xamarin.Forms)::: modelos de dados.For more information about data templates, see :::no-loc(Xamarin.Forms)::: Data Templates.

Agrupar dadosGroup data

Os dados devem ser agrupados para que possam ser exibidos.Data must be grouped before it can be displayed. Isso pode ser feito criando uma lista de grupos, onde cada grupo é uma lista de itens.This can be accomplished by creating a list of groups, where each group is a list of items. A lista de grupos deve ser uma IEnumerable<T> coleção, em que T define dois tipos de dados:The list of groups should be an IEnumerable<T> collection, where T defines two pieces of data:

  • Um nome de grupo.A group name.
  • Uma IEnumerable coleção que define os itens que pertencem ao grupo.An IEnumerable collection that defines the items belonging to the group.

O processo de agrupamento de dados, portanto, é:The process for grouping data, therefore, is to:

  • Crie um tipo que modela um único item.Create a type that models a single item.
  • Crie um tipo que modela um único grupo de itens.Create a type that models a single group of items.
  • Crie uma IEnumerable<T> coleção, em que T é o tipo que modela um único grupo de itens.Create an IEnumerable<T> collection, where T is the type that models a single group of items. Essa coleção é, portanto, uma coleção de grupos, que armazena os dados agrupados.This collection is therefore a collection of groups, which stores the grouped data.
  • Adicione dados à IEnumerable<T> coleção.Add data to the IEnumerable<T> collection.

ExemploExample

Ao agrupar dados, a primeira etapa é criar um tipo que modela um único item.When grouping data, the first step is to create a type that models a single item. O exemplo a seguir mostra a Animal classe do aplicativo de exemplo:The following example shows the Animal class from the sample application:

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

A Animal classe modela um único item.The Animal class models a single item. Um tipo que modela um grupo de itens pode ser criado.A type that models a group of items can then be created. O exemplo a seguir mostra a AnimalGroup classe do aplicativo de exemplo:The following example shows the AnimalGroup class from the sample application:

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

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

A AnimalGroup classe herda da List<T> classe e adiciona uma Name propriedade que representa o nome do grupo.The AnimalGroup class inherits from the List<T> class and adds a Name property that represents the group name.

Uma IEnumerable<T> coleção de grupos pode ser criada:An IEnumerable<T> collection of groups can then be created:

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

Esse código define uma coleção chamada Animals , onde cada item na coleção é um AnimalGroup objeto.This code defines a collection named Animals, where each item in the collection is an AnimalGroup object. Cada AnimalGroup objeto consiste em um nome e uma List<Animal> coleção que define os Animal objetos no grupo.Each AnimalGroup object comprises a name, and a List<Animal> collection that defines the Animal objects in the group.

Os dados agrupados podem ser adicionados à Animals coleção:Grouped data can then be added to the Animals collection:

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

Esse código cria dois grupos na Animals coleção.This code creates two groups in the Animals collection. O primeiro AnimalGroup é chamado Bears e contém uma List<Animal> coleção de detalhes de Bear.The first AnimalGroup is named Bears, and contains a List<Animal> collection of bear details. O segundo AnimalGroup é chamado Monkeys e contém uma List<Animal> coleção de detalhes de macaco.The second AnimalGroup is named Monkeys, and contains a List<Animal> collection of monkey details.

Exibir dados agrupadosDisplay grouped data

CollectionView exibirá os dados agrupados, desde que os dados tenham sido agrupados corretamente, definindo a IsGrouped propriedade como true :CollectionView will display grouped data, provided that the data has been grouped correctly, by setting the IsGrouped property to 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>

Este é o código C# equivalente:The equivalent C# code is:

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

A aparência de cada item no CollectionView é definida pela definição da CollectionView.ItemTemplate propriedade como a DataTemplate .The appearance of each item in the CollectionView is defined by setting the CollectionView.ItemTemplate property to a DataTemplate. Para obter mais informações, consulte definir a aparência do item.For more information, see Define item appearance.

Observação

Por padrão, CollectionView o exibirá o nome do grupo no cabeçalho e no rodapé do grupo.By default, CollectionView will display the group name in the group header and footer. Esse comportamento pode ser alterado Personalizando o cabeçalho do grupo e o rodapé do grupo.This behavior can be changed by customizing the group header and group footer.

Personalizar o cabeçalho do grupoCustomize the group header

A aparência de cada cabeçalho de grupo pode ser personalizada definindo a CollectionView.GroupHeaderTemplate propriedade como a DataTemplate :The appearance of each group header can be customized by setting the CollectionView.GroupHeaderTemplate property to a DataTemplate:

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

Neste exemplo, cada cabeçalho de grupo é definido como um Label que exibe o nome do grupo e que tem outras propriedades de aparência definidas.In this example, each group header is set to a Label that displays the group name, and that has other appearance properties set. As capturas de tela a seguir mostram o cabeçalho de grupo personalizado:The following screenshots show the customized group header:

Captura de tela de um cabeçalho de grupo personalizado em um CollectionView, no iOS e no AndroidScreenshot of a customized group header in a CollectionView, on iOS and Android

A aparência de cada rodapé de grupo pode ser personalizada definindo a CollectionView.GroupFooterTemplate propriedade como a DataTemplate :The appearance of each group footer can be customized by setting the CollectionView.GroupFooterTemplate property to a 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>

Neste exemplo, cada rodapé de grupo é definido como um Label que exibe o número de itens no grupo.In this example, each group footer is set to a Label that displays the number of items in the group. As capturas de tela a seguir mostram o rodapé do grupo personalizado:The following screenshots show the customized group footer:

Captura de tela de um rodapé de grupo personalizado em um CollectionView, no iOS e no AndroidScreenshot of a customized group footer in a CollectionView, on iOS and Android

Grupos vaziosEmpty groups

Quando um CollectionView exibe dados agrupados, ele exibirá todos os grupos vazios.When a CollectionView displays grouped data, it will display any groups that are empty. Esses grupos serão exibidos com um cabeçalho e um rodapé de grupo, indicando que o grupo está vazio.Such groups will be displayed with a group header and footer, indicating that the group is empty. As capturas de tela a seguir mostram um grupo vazio:The following screenshots show an empty group:

Captura de tela de um grupo vazio em um CollectionView, no iOS e no AndroidScreenshot of an empty group in a CollectionView, on iOS and Android

Observação

No iOS 10 e inferior, os cabeçalhos e rodapés de grupo de grupos vazios podem ser exibidos na parte superior do CollectionView .On iOS 10 and lower, group headers and footers for empty groups may all be displayed at the top of the CollectionView.

Grupo sem modelosGroup without templates

CollectionView pode exibir dados agrupados corretamente sem definir a CollectionView.ItemTemplate propriedade como um DataTemplate :CollectionView can display correctly grouped data without setting the CollectionView.ItemTemplate property to a DataTemplate:

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

Nesse cenário, dados significativos podem ser exibidos substituindo o ToString método no tipo que modela um único item e o tipo que modela um único grupo de itens.In this scenario, meaningful data can be displayed by overriding the ToString method in the type that models a single item, and the type that models a single group of items.