Layout de CollectionView do xamarin. FormsXamarin.Forms CollectionView Layout

Baixar Exemplo Baixar o exemploDownload Sample Download the sample

CollectionView Define as seguintes propriedades que controlam o layout:CollectionView defines the following properties that control layout:

Essas propriedades têm o respaldo BindableProperty objetos, o que significa que as propriedades podem ser alvos de vinculações de dados.These properties are backed by BindableProperty objects, which means that the properties can be targets of data bindings.

Por padrão, uma CollectionView exibirá seus itens em uma lista vertical.By default, a CollectionView will display its items in a vertical list. No entanto, qualquer um dos seguintes layouts podem ser usados:However, any of the following layouts can be used:

  • Lista vertical – uma lista de coluna única que cresce verticalmente conforme novos itens são adicionados.Vertical list – a single column list that grows vertically as new items are added.
  • Lista horizontal – uma lista de única linha cresce horizontalmente conforme novos itens são adicionados.Horizontal list – a single row list that grows horizontally as new items are added.
  • Grade vertical – uma grade de várias coluna que cresce verticalmente conforme novos itens são adicionados.Vertical grid – a multi-column grid that grows vertically as new items are added.
  • Grade horizontal – uma grade de várias linhas cresce horizontalmente conforme novos itens são adicionados.Horizontal grid – a multi-row grid that grows horizontally as new items are added.

Esses layouts podem ser especificados definindo a ItemsLayout propriedade para a classe que deriva de ItemsLayout classe.These layouts can be specified by setting the ItemsLayout property to class that derives from the ItemsLayout class. Essa classe define as propriedades a seguir:This class defines the following properties:

Essas propriedades têm o respaldo BindableProperty objetos, o que significa que as propriedades podem ser alvos de vinculações de dados.These properties are backed by BindableProperty objects, which means that the properties can be targets of data bindings. Para obter mais informações sobre pontos de alinhamento, consulte ajustar pontos na rolagem do xamarin. Forms CollectionView guia.For more information about snap points, see Snap points in the Xamarin.Forms CollectionView Scrolling guide.

O ItemsLayoutOrientation enumeração define os seguintes membros:The ItemsLayoutOrientation enumeration defines the following members:

  • Vertical indica que o CollectionView será expandida verticalmente conforme os itens são adicionados.Vertical indicates that the CollectionView will expand vertically as items are added.
  • Horizontal indica que o CollectionView expandirá horizontalmente conforme itens são adicionados.Horizontal indicates that the CollectionView will expand horizontally as items are added.

O ListItemsLayout herda o ItemsLayout classe e define estático VerticalList e HorizontalList membros.The ListItemsLayout class inherits from the ItemsLayout class, and defines static VerticalList and HorizontalList members. Esses membros podem ser usados para criar listas verticais ou horizontais, respectivamente.These members can be used to create vertical or horizontal lists, respectively. Como alternativa, uma ListItemsLayout objeto pode ser criado, especificando um ItemsLayoutOrientation membro de enumeração como um argumento.Alternatively, a ListItemsLayout object can be created, specifying an ItemsLayoutOrientation enumeration member as an argument.

O GridItemsLayout herda o ItemsLayout de classe e define um Span propriedade do tipo int, que representa o número de colunas ou linhas a serem exibidas na grade.The GridItemsLayout class inherits from the ItemsLayout class, and defines a Span property, of type int, that represents the number of columns or rows to display in the grid. O valor padrão de Span propriedade é 1, e seu valor deve sempre ser maior que ou igual a 1.The default value of the Span property is 1, and its value must always be greater than or equal to 1.

Observação

CollectionView usa os mecanismos de layout nativo para executar o layout.CollectionView uses the native layout engines to perform layout.

Lista verticalVertical list

Por padrão, CollectionView exibirá seus itens em um layout da lista vertical.By default, CollectionView will display its items in a vertical list layout. Portanto, não é necessário definir as ItemsLayout propriedade para usar este layout:Therefore, it's not necessary to set the ItemsLayout property to use this layout:

<CollectionView ItemsSource="{Binding Monkeys}">
    <CollectionView.ItemTemplate>
        <DataTemplate>
            <Grid Padding="10">
                <Grid.RowDefinitions>
                    <RowDefinition Height="Auto" />
                    <RowDefinition Height="Auto" />
                </Grid.RowDefinitions>
                <Grid.ColumnDefinitions>
                    <ColumnDefinition Width="Auto" />
                    <ColumnDefinition Width="Auto" />
                </Grid.ColumnDefinitions>
                <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>

No entanto, para fins de integridade, uma CollectionView pode ser definido para exibir seus itens em uma lista vertical definindo seu ItemsLayout propriedade estática ListItemsLayout.VerticalList membro:However, for completeness, a CollectionView can be set to display its items in a vertical list by setting its ItemsLayout property to the static ListItemsLayout.VerticalList member:

<CollectionView ItemsSource="{Binding Monkeys}"
                ItemsLayout="{x:Static ListItemsLayout.VerticalList}">
    ...
</CollectionView>

Como alternativa, isso também pode ser feito definindo a ItemsLayout propriedade em um objeto do ListItemsLayout classe, especificando o Vertical ItemsLayoutOrientation membro de enumeração como um argumento:Alternatively, this can also be accomplished by setting the ItemsLayout property to an object of the ListItemsLayout class, specifying the Vertical ItemsLayoutOrientation enumeration member as an argument:

<CollectionView ItemsSource="{Binding Monkeys}">
    <CollectionView.ItemsLayout>
        <ListItemsLayout>
            <x:Arguments>
                <ItemsLayoutOrientation>Vertical</ItemsLayoutOrientation>    
            </x:Arguments>
        </ListItemsLayout>
    </CollectionView.ItemsLayout>
    ...
</CollectionView>

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

CollectionView collectionView = new CollectionView
{
    ...
    ItemsLayout = ListItemsLayout.VerticalList
};

Isso resulta em uma lista de coluna única que cresce verticalmente conforme novos itens são adicionados:This results in a single column list, which grows vertically as new items are added:

Captura de tela de um layout da lista vertical CollectionView, no iOS e AndroidScreenshot of a CollectionView vertical list layout, on iOS and Android

Lista horizontalHorizontal list

CollectionView pode exibir seus itens em uma lista horizontal, definindo sua ItemsLayout propriedade estática ListItemsLayout.HorizontalList membro:CollectionView can display its items in a horizontal list by setting its ItemsLayout property to the static ListItemsLayout.HorizontalList member:

<CollectionView ItemsSource="{Binding Monkeys}"
                ItemsLayout="{x:Static ListItemsLayout.HorizontalList}">
    <CollectionView.ItemTemplate>
        <DataTemplate>
            <Grid Padding="10">
                <Grid.RowDefinitions>
                    <RowDefinition Height="35" />
                    <RowDefinition Height="35" />
                </Grid.RowDefinitions>
                <Grid.ColumnDefinitions>
                    <ColumnDefinition Width="70" />
                    <ColumnDefinition Width="140" />
                </Grid.ColumnDefinitions>
                <Image Grid.RowSpan="2"
                       Source="{Binding ImageUrl}"
                       Aspect="AspectFill"
                       HeightRequest="60"
                       WidthRequest="60" />
                <Label Grid.Column="1"
                       Text="{Binding Name}"
                       FontAttributes="Bold"
                       LineBreakMode="TailTruncation" />
                <Label Grid.Row="1"
                       Grid.Column="1"
                       Text="{Binding Location}"
                       LineBreakMode="TailTruncation"
                       FontAttributes="Italic"
                       VerticalOptions="End" />
            </Grid>
        </DataTemplate>
    </CollectionView.ItemTemplate>
</CollectionView>

Como alternativa, isso também pode ser feito definindo a ItemsLayout propriedade como um ListItemsLayout do objeto, especificando o Horizontal ItemsLayoutOrientation membro de enumeração como um argumento:Alternatively, this can also be accomplished by setting the ItemsLayout property to a ListItemsLayout object, specifying the Horizontal ItemsLayoutOrientation enumeration member as an argument:

<CollectionView ItemsSource="{Binding Monkeys}">
    <CollectionView.ItemsLayout>
        <ListItemsLayout>
            <x:Arguments>
                <ItemsLayoutOrientation>Horizontal</ItemsLayoutOrientation>    
            </x:Arguments>
        </ListItemsLayout>
    </CollectionView.ItemsLayout>
    ...
</CollectionView>

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

CollectionView collectionView = new CollectionView
{
    ...
    ItemsLayout = ListItemsLayout.HorizontalList
};

Isso resulta em uma lista de única linha, que cresce horizontalmente conforme novos itens são adicionados:This results in a single row list, which grows horizontally as new items are added:

Captura de tela de um layout da lista horizontal CollectionView, no iOS e AndroidScreenshot of a CollectionView horizontal list layout, on iOS and Android

Grade verticalVertical grid

CollectionView pode exibir seus itens em uma grade vertical, definindo sua ItemsLayout propriedade como um GridItemsLayout do objeto cuja Orientation estiver definida como Vertical:CollectionView can display its items in a vertical grid by setting its ItemsLayout property to a GridItemsLayout object whose Orientation property is set to Vertical:

<CollectionView ItemsSource="{Binding Monkeys}">
    <CollectionView.ItemsLayout>
       <GridItemsLayout Orientation="Vertical"
                        Span="2" />
    </CollectionView.ItemsLayout>
    <CollectionView.ItemTemplate>
        <DataTemplate>
            <Grid Padding="10">
                <Grid.RowDefinitions>
                    <RowDefinition Height="35" />
                    <RowDefinition Height="35" />
                </Grid.RowDefinitions>
                <Grid.ColumnDefinitions>
                    <ColumnDefinition Width="70" />
                    <ColumnDefinition Width="80" />
                </Grid.ColumnDefinitions>
                <Image Grid.RowSpan="2"
                       Source="{Binding ImageUrl}"
                       Aspect="AspectFill"
                       HeightRequest="60"
                       WidthRequest="60" />
                <Label Grid.Column="1"
                       Text="{Binding Name}"
                       FontAttributes="Bold"
                       LineBreakMode="TailTruncation" />
                <Label Grid.Row="1"
                       Grid.Column="1"
                       Text="{Binding Location}"
                       LineBreakMode="TailTruncation"
                       FontAttributes="Italic"
                       VerticalOptions="End" />
            </Grid>
        </DataTemplate>
    </CollectionView.ItemTemplate>
</CollectionView>

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

CollectionView collectionView = new CollectionView
{
    ...
    ItemsLayout = new GridItemsLayout(2, ItemsLayoutOrientation.Vertical)
};

Por padrão, um vertical GridItemsLayout exibirá itens em uma única coluna.By default, a vertical GridItemsLayout will display items in a single column. No entanto, este exemplo define o GridItemsLayout.Span propriedade como 2.However, this example sets the GridItemsLayout.Span property to 2. Isso resulta em uma grade de duas colunas, cresce verticalmente conforme novos itens são adicionados:This results in a two-column grid, which grows vertically as new items are added:

Captura de tela de um layout de grade vertical CollectionView, no iOS e AndroidScreenshot of a CollectionView vertical grid layout, on iOS and Android

Grade horizontalHorizontal grid

CollectionView pode exibir seus itens em uma grade horizontal, definindo sua ItemsLayout propriedade como um GridItemsLayout do objeto cuja Orientation estiver definida como Horizontal:CollectionView can display its items in a horizontal grid by setting its ItemsLayout property to a GridItemsLayout object whoseOrientation property is set to Horizontal:

<CollectionView ItemsSource="{Binding Monkeys}">
    <CollectionView.ItemsLayout>
       <GridItemsLayout Orientation="Horizontal"
                        Span="4" />
    </CollectionView.ItemsLayout>
    <CollectionView.ItemTemplate>
        <DataTemplate>
            <Grid Padding="10">
                <Grid.RowDefinitions>
                    <RowDefinition Height="35" />
                    <RowDefinition Height="35" />
                </Grid.RowDefinitions>
                <Grid.ColumnDefinitions>
                    <ColumnDefinition Width="70" />
                    <ColumnDefinition Width="140" />
                </Grid.ColumnDefinitions>
                <Image Grid.RowSpan="2"
                       Source="{Binding ImageUrl}"
                       Aspect="AspectFill"
                       HeightRequest="60"
                       WidthRequest="60" />
                <Label Grid.Column="1"
                       Text="{Binding Name}"
                       FontAttributes="Bold"
                       LineBreakMode="TailTruncation" />
                <Label Grid.Row="1"
                       Grid.Column="1"
                       Text="{Binding Location}"
                       LineBreakMode="TailTruncation"
                       FontAttributes="Italic"
                       VerticalOptions="End" />
            </Grid>
        </DataTemplate>
    </CollectionView.ItemTemplate>
</CollectionView>

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

CollectionView collectionView = new CollectionView
{
    ...
    ItemsLayout = new GridItemsLayout(4, ItemsLayoutOrientation.Horizontal)
};

Por padrão, um horizontal GridItemsLayout exibirá itens em uma única linha.By default, a horizontal GridItemsLayout will display items in a single row. No entanto, este exemplo define o GridItemsLayout.Span propriedade para 4.However, this example sets the GridItemsLayout.Span property to 4. Isso resulta em uma grade de quatro linhas, que cresce horizontalmente conforme novos itens são adicionados:This results in a four-row grid, which grows horizontally as new items are added:

Captura de tela de um layout de grade horizontal CollectionView, no iOS e AndroidScreenshot of a CollectionView horizontal grid layout, on iOS and Android

Dimensionamento do itemItem sizing

Por padrão, cada item em uma CollectionView é individualmente medido e dimensionado, desde que os elementos de interface do usuário na DataTemplate não especificar tamanhos fixos.By default, each item in a CollectionView is individually measured and sized, provided that the UI elements in the DataTemplate don't specify fixed sizes. Esse comportamento, o que pode ser alterado, for especificado o CollectionView.ItemSizingStrategy valor da propriedade.This behavior, which can be changed, is specified by the CollectionView.ItemSizingStrategy property value. Esse valor de propriedade pode ser definido como um dos ItemSizingStrategy membros de enumeração:This property value can be set to one of the ItemSizingStrategy enumeration members:

  • MeasureAllItems – cada item é medida individualmente.MeasureAllItems – each item is individually measured. Este é o valor padrão.This is the default value.
  • MeasureFirstItem – somente o primeiro item é medido, com todos os itens subsequentes que está sendo fornecidos do mesmo tamanho que o primeiro item.MeasureFirstItem – only the first item is measured, with all subsequent items being given the same size as the first item.

Importante

O MeasureFirstItem estratégia de dimensionamento resultará em maior desempenho quando usado em situações em que o tamanho do item deve ser uniforme entre todos os itens.The MeasureFirstItem sizing strategy will result in increased performance when used in situations where the item size is intended to be uniform across all items.

O exemplo de código a seguir mostra a configuração de ItemSizingStrategy propriedade:The following code example shows setting the ItemSizingStrategy property:

<CollectionView ...
                ItemSizingStrategy="MeasureFirstItem">
    ...
</CollectionView>

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

CollectionView collectionView = new CollectionView
{
    ...
    ItemSizingStrategy = ItemSizingStrategy.MeasureFirstItem
};

Observação

O item de estratégia de dimensionamento está atualmente apenas implementado no iOS.The item sizing strategy is currently only implemented on iOS.

Redimensionamento dinâmico de itensDynamic resizing of items

Itens de um CollectionView pode ser redimensionada dinamicamente em tempo de execução por meio da alteração layout relacionadas as propriedades dos elementos dentro de DataTemplate .Items in a CollectionView can be dynamically resized at runtime by changing layout related properties of elements within the DataTemplate. Por exemplo, o código a seguir exemplo altera a HeightRequest e WidthRequest propriedades de um Image objeto:For example, the following code example changes the HeightRequest and WidthRequest properties of an Image object:

void OnImageTapped(object sender, EventArgs e)
{
    Image image = sender as Image;
    image.HeightRequest = image.WidthRequest = image.HeightRequest.Equals(60) ? 100 : 60;
}

O OnImageTapped manipulador de eventos é executado em resposta a uma Image de objeto que está sendo tocado e altera as dimensões da imagem para que ele é exibido com mais facilidade:The OnImageTapped event handler is executed in response to an Image object being tapped, and changes the dimensions of the image so that it's more easily viewed:

Captura de tela de uma CollectionView com dimensionamento dinâmico de item, no iOS e AndroidScreenshot of a CollectionView with dynamic item sizing, on iOS and Android

Layout da direita para esquerdaRight-to-left layout

CollectionView pode definir o layout de seu conteúdo em uma direção de fluxo da direita para esquerda, definindo sua FlowDirection propriedade RightToLeft .CollectionView can layout its content in a right-to-left flow direction by setting its FlowDirection property to RightToLeft. No entanto, o FlowDirection propriedade idealmente deve ser definida em um layout de página ou raiz, que faz com que todos os elementos dentro da página ou o layout de raiz, para responder a direção do fluxo:However, the FlowDirection property should ideally be set on a page or root layout, which causes all the elements within the page, or root layout, to respond to the flow direction:

<?xml version="1.0" encoding="UTF-8"?>
<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             x:Class="CollectionViewDemos.Views.VerticalListFlowDirectionPage"
             Title="Vertical list (RTL FlowDirection)"
             FlowDirection="RightToLeft">
    <StackLayout Margin="20">
        <CollectionView ItemsSource="{Binding Monkeys}">
            ...
        </CollectionView>
    </StackLayout>
</ContentPage>

O padrão FlowDirection para um elemento com um pai é MatchParent .The default FlowDirection for an element with a parent is MatchParent. Portanto, o CollectionView herda o FlowDirection valor de propriedade do StackLayout , que por sua vez herda o FlowDirection valor da propriedade a ContentPage.Therefore, the CollectionView inherits the FlowDirection property value from the StackLayout, which in turn inherits the FlowDirection property value from the ContentPage. Isso resulta no layout da direita para esquerda mostrado nas capturas de tela seguir:This results in the right-to-left layout shown in the following screenshots:

Captura de tela de um layout da lista vertical da direita para esquerda CollectionView, no iOS e AndroidScreenshot of a CollectionView right-to-left vertical list layout, on iOS and Android

Para obter mais informações sobre a direção do fluxo, consulte localização da direita para esquerda.For more information about flow direction, see Right-to-left localization.