:::no-loc(Xamarin.Forms)::: Layout CollectionView:::no-loc(Xamarin.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 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.

Por padrão, um 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 pode ser usado:However, any of the following layouts can be used:

  • Lista vertical – uma lista de colunas única que cresce verticalmente à medida que novos itens são adicionados.Vertical list – a single column list that grows vertically as new items are added.
  • Lista Horizontal – uma única lista de linhas que aumenta horizontalmente à medida que 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 colunas que cresce verticalmente à medida que 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 que cresce horizontalmente à medida que 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 como classe derivada da ItemsLayout classe.These layouts can be specified by setting the ItemsLayout property to class that derives from the ItemsLayout class. Essa classe define as seguintes propriedades:This class defines the following properties:

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. Para obter mais informações sobre pontos de encaixe, consulte pontos de alinhamento no guia de :::no-loc(Xamarin.Forms)::: rolagem CollectionView .For more information about snap points, see Snap points in the :::no-loc(Xamarin.Forms)::: CollectionView Scrolling guide.

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

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

A LinearItemsLayout classe herda da ItemsLayout classe e define uma ItemSpacing propriedade, do tipo double , que representa o espaço vazio em volta de cada item.The LinearItemsLayout class inherits from the ItemsLayout class, and defines an ItemSpacing property, of type double, that represents the empty space around each item. O valor padrão dessa propriedade é 0 e seu valor sempre deve ser maior ou igual a 0.The default value of this property is 0, and its value must always be greater than or equal to 0. A LinearItemsLayout classe também define static Vertical e Horizontal Members.The LinearItemsLayout class also defines static Vertical and Horizontal 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, um LinearItemsLayout objeto pode ser criado, especificando um ItemsLayoutOrientation membro de enumeração como um argumento.Alternatively, a LinearItemsLayout object can be created, specifying an ItemsLayoutOrientation enumeration member as an argument.

A GridItemsLayout classe herda da ItemsLayout classe e define as seguintes propriedades:The GridItemsLayout class inherits from the ItemsLayout class, and defines the following properties:

  • VerticalItemSpacing, do tipo double , que representa o espaço vertical vazio em volta de cada item.VerticalItemSpacing, of type double, that represents the vertical empty space around each item. O valor padrão dessa propriedade é 0 e seu valor sempre deve ser maior ou igual a 0.The default value of this property is 0, and its value must always be greater than or equal to 0.
  • HorizontalItemSpacing, do tipo double , que representa o espaço horizontal vazio em volta de cada item.HorizontalItemSpacing, of type double, that represents the horizontal empty space around each item. O valor padrão dessa propriedade é 0 e seu valor sempre deve ser maior ou igual a 0.The default value of this property is 0, and its value must always be greater than or equal to 0.
  • Span, do tipo int , que representa o número de colunas ou linhas a serem exibidas na grade.Span, of type int, that represents the number of columns or rows to display in the grid. O valor padrão dessa propriedade é 1 e seu valor sempre deve ser maior ou igual a 1.The default value of this property is 1, and its value must always be greater than or equal to 1.

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.

Observação

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

Lista verticalVertical list

Por padrão, CollectionView o exibirá seus itens em um layout de lista vertical.By default, CollectionView will display its items in a vertical list layout. Portanto, não é necessário definir a 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, o XAML a CollectionView pode ser definido para exibir seus itens em uma lista vertical definindo sua ItemsLayout propriedade como VerticalList :However, for completeness, in XAML a CollectionView can be set to display its items in a vertical list by setting its ItemsLayout property to VerticalList:

<CollectionView ItemsSource="{Binding Monkeys}"
                ItemsLayout="VerticalList">
    ...
</CollectionView>

Como alternativa, isso também pode ser feito definindo a ItemsLayout propriedade como um LinearItemsLayout objeto, especificando o Vertical ItemsLayoutOrientation membro de enumeração como o Orientation valor da propriedade:Alternatively, this can also be accomplished by setting the ItemsLayout property to a LinearItemsLayout object, specifying the Vertical ItemsLayoutOrientation enumeration member as the Orientation property value:

<CollectionView ItemsSource="{Binding Monkeys}">
    <CollectionView.ItemsLayout>
        <LinearItemsLayout Orientation="Vertical" />
    </CollectionView.ItemsLayout>
    ...
</CollectionView>

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

CollectionView collectionView = new CollectionView
{
    ...
    ItemsLayout = LinearItemsLayout.Vertical
};

Isso resulta em uma única lista de colunas, que cresce verticalmente à medida que 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 de lista vertical CollectionView, no iOS e no AndroidScreenshot of a CollectionView vertical list layout, on iOS and Android

Lista horizontalHorizontal list

Em XAML, um CollectionView pode exibir seus itens em uma lista horizontal definindo sua ItemsLayout propriedade como HorizontalList :In XAML, a CollectionView can display its items in a horizontal list by setting its ItemsLayout property to HorizontalList:

<CollectionView ItemsSource="{Binding Monkeys}"
                ItemsLayout="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, esse layout também pode ser feito definindo a ItemsLayout propriedade como um LinearItemsLayout objeto, especificando o Horizontal ItemsLayoutOrientation membro de enumeração como o Orientation valor da propriedade:Alternatively, this layout can also be accomplished by setting the ItemsLayout property to a LinearItemsLayout object, specifying the Horizontal ItemsLayoutOrientation enumeration member as the Orientation property value:

<CollectionView ItemsSource="{Binding Monkeys}">
    <CollectionView.ItemsLayout>
        <LinearItemsLayout Orientation="Horizontal" />
    </CollectionView.ItemsLayout>
    ...
</CollectionView>

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

CollectionView collectionView = new CollectionView
{
    ...
    ItemsLayout = LinearItemsLayout.Horizontal
};

Isso resulta em uma única lista de linhas, que cresce horizontalmente à medida que 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 de lista horizontal CollectionView, no iOS e no AndroidScreenshot of a CollectionView horizontal list layout, on iOS and Android

Grade verticalVertical grid

Em XAML, um CollectionView pode exibir seus itens em uma grade vertical definindo sua ItemsLayout propriedade como VerticalGrid :In XAML, a CollectionView can display its items in a vertical grid by setting its ItemsLayout property to VerticalGrid:

<CollectionView ItemsSource="{Binding Monkeys}"
                ItemsLayout="VerticalGrid, 2">
    <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>

Como alternativa, esse layout também pode ser feito definindo a ItemsLayout propriedade como um GridItemsLayout objeto cuja Orientation propriedade está definida como Vertical :Alternatively, this layout can also be accomplished by setting the 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>

Este é 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 a GridItemsLayout.Span propriedade como 2.However, this example sets the GridItemsLayout.Span property to 2. Isso resulta em uma grade de duas colunas, que cresce verticalmente à medida que 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 no AndroidScreenshot of a CollectionView vertical grid layout, on iOS and Android

Grade horizontalHorizontal grid

Em XAML, um CollectionView pode exibir seus itens em uma grade horizontal definindo sua ItemsLayout propriedade como HorizontalGrid :In XAML, a CollectionView can display its items in a horizontal grid by setting its ItemsLayout property to HorizontalGrid:

<CollectionView ItemsSource="{Binding Monkeys}"
                ItemsLayout="HorizontalGrid, 4">
    <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, esse layout também pode ser feito definindo a ItemsLayout propriedade como um GridItemsLayout objeto cuja Orientation propriedade está definida como Horizontal :Alternatively, this layout can also be accomplished by setting the ItemsLayout property to a GridItemsLayout object whose Orientation property is set to Horizontal:

<CollectionView ItemsSource="{Binding Monkeys}">
    <CollectionView.ItemsLayout>
       <GridItemsLayout Orientation="Horizontal"
                        Span="4" />
    </CollectionView.ItemsLayout>
    ...
</CollectionView>

Este é 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 a GridItemsLayout.Span propriedade como 4.However, this example sets the GridItemsLayout.Span property to 4. Isso resulta em uma grade de quatro linhas, que cresce horizontalmente à medida que 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 no AndroidScreenshot of a CollectionView horizontal grid layout, on iOS and Android

Cabeçalhos e rodapésHeaders and footers

CollectionView pode apresentar um cabeçalho e um rodapé que rolam com os itens na lista.CollectionView can present a header and footer that scroll with the items in the list. O cabeçalho e o rodapé podem ser cadeias de caracteres, exibições ou DataTemplate objetos.The header and footer can be strings, views, or DataTemplate objects.

CollectionView define as seguintes propriedades para especificar o cabeçalho e o rodapé:CollectionView defines the following properties for specifying the header and footer:

  • Header, do tipo object , especifica a cadeia de caracteres, a associação ou a exibição que será exibida no início da lista.Header, of type object, specifies the string, binding, or view that will be displayed at the start of the list.
  • HeaderTemplate, do tipo DataTemplate , especifica o DataTemplate a ser usado para formatar o Header .HeaderTemplate, of type DataTemplate, specifies the DataTemplate to use to format the Header.
  • Footer, do tipo object , especifica a cadeia de caracteres, a associação ou a exibição que será exibida no final da lista.Footer, of type object, specifies the string, binding, or view that will be displayed at the end of the list.
  • FooterTemplate, do tipo DataTemplate , especifica o DataTemplate a ser usado para formatar o Footer .FooterTemplate, of type DataTemplate, specifies the DataTemplate to use to format the Footer.

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.

Quando um cabeçalho é adicionado a um layout que cresce horizontalmente, da esquerda para a direita, o cabeçalho é exibido à esquerda da lista.When a header is added to a layout that grows horizontally, from left to right, the header is displayed to the left of the list. Da mesma forma, quando um rodapé é adicionado a um layout que cresce horizontalmente, da esquerda para a direita, o rodapé é exibido à direita da lista.Similarly, when a footer is added to a layout that grows horizontally, from left to right, the footer is displayed to the right of the list.

As Header Footer Propriedades e podem ser definidas como string valores, conforme mostrado no exemplo a seguir:The Header and Footer properties can be set to string values, as shown in the following example:

<CollectionView ItemsSource="{Binding Monkeys}"
                Header="Monkeys"
                Footer="2019">
    ...
</CollectionView>

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

CollectionView collectionView = new CollectionView
{
    Header = "Monkeys",
    Footer = "2019"
};
collectionView.SetBinding(ItemsView.ItemsSourceProperty, "Monkeys");

Esse código resulta nas seguintes capturas de tela, com o cabeçalho mostrado na captura de tela do iOS e o rodapé mostrado na captura de tela do Android:This code results in the following screenshots, with the header shown in the iOS screenshot, and the footer shown in the Android screenshot:

Captura de tela de um cabeçalho e rodapé de cadeia de caracteres CollectionView, no iOS e no AndroidScreenshot of a CollectionView string header and footer, on iOS and Android

As Header Footer Propriedades e podem ser definidas como uma exibição.The Header and Footer properties can each be set to a view. Isso pode ser uma exibição única ou uma exibição que contenha várias exibições filhas.This can be a single view, or a view that contains multiple child views. O exemplo a seguir mostra Header as Footer Propriedades e cada definidas para um StackLayout objeto que contém um Label objeto:The following example shows the Header and Footer properties each set to a StackLayout object that contains a Label object:

<CollectionView ItemsSource="{Binding Monkeys}">
    <CollectionView.Header>
        <StackLayout BackgroundColor="LightGray">
            <Label Margin="10,0,0,0"
                   Text="Monkeys"
                   FontSize="Small"
                   FontAttributes="Bold" />
        </StackLayout>
    </CollectionView.Header>
    <CollectionView.Footer>
        <StackLayout BackgroundColor="LightGray">
            <Label Margin="10,0,0,0"
                   Text="Friends of Xamarin Monkey"
                   FontSize="Small"
                   FontAttributes="Bold" />
        </StackLayout>
    </CollectionView.Footer>
    ...
</CollectionView>

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

CollectionView collectionView = new CollectionView
{
    Header = new StackLayout
    {
        Children =
        {
            new Label { Text = "Monkeys", ... }
        }
    },
    Footer = new StackLayout
    {
        Children =
        {
            new Label { Text = "Friends of Xamarin Monkey", ... }
        }
    }
};
collectionView.SetBinding(ItemsView.ItemsSourceProperty, "Monkeys");

Esse código resulta nas seguintes capturas de tela, com o cabeçalho mostrado na captura de tela do iOS e o rodapé mostrado na captura de tela do Android:This code results in the following screenshots, with the header shown in the iOS screenshot, and the footer shown in the Android screenshot:

Captura de tela de um cabeçalho e rodapé CollectionView usando exibições, no iOS e no AndroidScreenshot of a CollectionView header and footer using views, on iOS and Android

As HeaderTemplate FooterTemplate Propriedades e podem ser definidas como DataTemplate objetos que são usados para formatar o cabeçalho e o rodapé.The HeaderTemplate and FooterTemplate properties can be set to DataTemplate objects that are used to format the header and footer. Nesse cenário, as Header Propriedades e Footer devem ser associadas à fonte atual para que os modelos sejam aplicados, conforme mostrado no exemplo a seguir:In this scenario, the Header and Footer properties must bind to the current source for the templates to be applied, as shown in the following example:

<CollectionView ItemsSource="{Binding Monkeys}"
                Header="{Binding .}"
                Footer="{Binding .}">
    <CollectionView.HeaderTemplate>
        <DataTemplate>
            <StackLayout BackgroundColor="LightGray">
                <Label Margin="10,0,0,0"
                       Text="Monkeys"
                       FontSize="Small"
                       FontAttributes="Bold" />
            </StackLayout>
        </DataTemplate>
    </CollectionView.HeaderTemplate>
    <CollectionView.FooterTemplate>
        <DataTemplate>
            <StackLayout BackgroundColor="LightGray">
                <Label Margin="10,0,0,0"
                       Text="Friends of Xamarin Monkey"
                       FontSize="Small"
                       FontAttributes="Bold" />
            </StackLayout>
        </DataTemplate>
    </CollectionView.FooterTemplate>
    ...
</CollectionView>

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

CollectionView collectionView = new CollectionView
{
    HeaderTemplate = new DataTemplate(() =>
    {
        return new StackLayout { };
    }),
    FooterTemplate = new DataTemplate(() =>
    {
        return new StackLayout { };
    })
};
collectionView.SetBinding(ItemsView.HeaderProperty, ".");
collectionView.SetBinding(ItemsView.FooterProperty, ".");
collectionView.SetBinding(ItemsView.ItemsSourceProperty, "Monkeys");

Esse código resulta nas seguintes capturas de tela, com o cabeçalho mostrado na captura de tela do iOS e o rodapé mostrado na captura de tela do Android:This code results in the following screenshots, with the header shown in the iOS screenshot, and the footer shown in the Android screenshot:

Captura de tela de um cabeçalho e rodapé CollectionView usando modelos, no iOS e no AndroidScreenshot of a CollectionView header and footer using templates, on iOS and Android

Espaçamento de itemItem spacing

Por padrão, não há nenhum espaço entre cada item em um CollectionView .By default, there is no space between each item in a CollectionView. Esse comportamento pode ser alterado definindo as propriedades no layout de itens usado pelo CollectionView .This behavior can be changed by setting properties on the items layout used by the CollectionView.

Quando um CollectionView define sua ItemsLayout propriedade para um LinearItemsLayout objeto, a LinearItemsLayout.ItemSpacing propriedade pode ser definida como um double valor que representa o espaço entre os itens:When a CollectionView sets its ItemsLayout property to a LinearItemsLayout object, the LinearItemsLayout.ItemSpacing property can be set to a double value that represents the space between items:

<CollectionView ItemsSource="{Binding Monkeys}">
    <CollectionView.ItemsLayout>
        <LinearItemsLayout Orientation="Vertical"
                           ItemSpacing="20" />
    </CollectionView.ItemsLayout>
    ...
</CollectionView>

Observação

A LinearItemsLayout.ItemSpacing propriedade tem um conjunto de retorno de chamada de validação, que garante que o valor da propriedade seja sempre maior ou igual a 0.The LinearItemsLayout.ItemSpacing property has a validation callback set, which ensures that the value of the property is always greater than or equal to 0.

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

CollectionView collectionView = new CollectionView
{
    ...
    ItemsLayout = new LinearItemsLayout(ItemsLayoutOrientation.Vertical)
    {
        ItemSpacing = 20
    }
};

Esse código resulta em uma lista vertical de colunas únicas, que tem um espaçamento de 20 entre os itens:This code results in a vertical single column list, that has a spacing of 20 between items:

Captura de tela de um CollectionView com espaçamento de item, no iOS e no AndroidScreenshot of a CollectionView with item spacing, on iOS and Android

Quando um CollectionView define sua ItemsLayout propriedade para um GridItemsLayout objeto, as GridItemsLayout.VerticalItemSpacing GridItemsLayout.HorizontalItemSpacing Propriedades e podem ser definidas como double valores que representam o espaço vazio vertical e horizontalmente entre os itens:When a CollectionView sets its ItemsLayout property to a GridItemsLayout object, the GridItemsLayout.VerticalItemSpacing and GridItemsLayout.HorizontalItemSpacing properties can be set to double values that represent the empty space vertically and horizontally between items:

<CollectionView ItemsSource="{Binding Monkeys}">
    <CollectionView.ItemsLayout>
       <GridItemsLayout Orientation="Vertical"
                        Span="2"
                        VerticalItemSpacing="20"
                        HorizontalItemSpacing="30" />
    </CollectionView.ItemsLayout>
    ...
</CollectionView>

Observação

As GridItemsLayout.VerticalItemSpacing GridItemsLayout.HorizontalItemSpacing Propriedades e têm conjuntos de chamadas de validação definidos, o que garante que os valores das propriedades sejam sempre maiores ou iguais a 0.The GridItemsLayout.VerticalItemSpacing and GridItemsLayout.HorizontalItemSpacing properties have validation callbacks set, which ensure that the values of the properties are always greater than or equal to 0.

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

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

Esse código resulta em uma grade vertical de duas colunas, que tem um espaçamento vertical de 20 entre itens e um espaçamento horizontal de 30 entre itens:This code results in a vertical two-column grid, that has a vertical spacing of 20 between items, and a horizontal spacing of 30 between items:

Captura de tela de um CollectionView com espaçamento de item, no AndroidScreenshot of a CollectionView with item spacing, on Android

Dimensionamento de itemItem sizing

Por padrão, cada item em um CollectionView é individualmente medido e dimensionado, desde que os elementos da interface do usuário em DataTemplate não especifiquem 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, que pode ser alterado, é especificado pelo 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 da enumeração:This property value can be set to one of the ItemSizingStrategy enumeration members:

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

Importante

A MeasureFirstItem estratégia de dimensionamento resultará em maior desempenho quando usada em situações em que o tamanho do item se destina a ser uniforme em 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 definição da ItemSizingStrategy Propriedade:The following code example shows setting the ItemSizingStrategy property:

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

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

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

Redimensionamento dinâmico de itensDynamic resizing of items

Os itens em um CollectionView podem ser redimensionados dinamicamente em tempo de execução alterando as propriedades relacionadas ao layout de elementos no DataTemplate .Items in a CollectionView can be dynamically resized at runtime by changing layout related properties of elements within the DataTemplate. Por exemplo, o exemplo de código a seguir altera as HeightRequest WidthRequest Propriedades e 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 um Image objeto que está sendo tocado e altera as dimensões da imagem para que seja exibido mais facilmente: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 um CollectionView com dimensionamento de item dinâmico, no iOS e no AndroidScreenshot of a CollectionView with dynamic item sizing, on iOS and Android

Layout da direita para a esquerdaRight-to-left layout

CollectionView pode definir o layout de seu conteúdo em uma direção de fluxo da direita para a esquerda definindo sua FlowDirection propriedade como RightToLeft .CollectionView can layout its content in a right-to-left flow direction by setting its FlowDirection property to RightToLeft. No entanto, a FlowDirection propriedade deve ser idealmente definida em um layout de página ou raiz, o que faz com que todos os elementos dentro da página ou layout raiz respondam à 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:

<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 da Propriedade do StackLayout , que, por sua vez, herda o FlowDirection valor da Propriedade do 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 a esquerda mostrado nas seguintes capturas de tela:This results in the right-to-left layout shown in the following screenshots:

Captura de tela de um layout de lista vertical de CollectionView da direita para a esquerda, no iOS e no 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 a esquerda.For more information about flow direction, see Right-to-left localization.