Xamarin.Forms CarrosselVer Layout

Artigo
09/24/2020

CarouselView Define as seguintes propriedades que controlam o layout:

ItemsLayout, do tipo LinearItemsLayout, especifica o layout a ser usado.
PeekAreaInsets, do tipo Thickness, especifica o quanto tornar os itens adjacentes parcialmente visíveis por.

Essas propriedades são apoiadas por BindableProperty objetos, o que significa que as propriedades podem ser destinos de associações de dados.

Por padrão, um CarouselView exibirá seus itens em uma orientação horizontal. Um único item será exibido na tela, com gestos de deslizar resultando em navegação para frente e para trás através da coleção de itens. No entanto, uma orientação vertical também é possível. Isso ocorre porque a ItemsLayout propriedade é do tipo LinearItemsLayout, que herda da ItemsLayout classe. A classe ItemsLayout define as seguintes propriedades:

Orientation, do tipo ItemsLayoutOrientation, especifica a direção na qual o expande à medida que os CarouselView itens são adicionados.
SnapPointsAlignment, do tipo SnapPointsAlignment, especifica como os pontos de ajuste são alinhados com os itens.
SnapPointsType, do tipo SnapPointsType, especifica o comportamento dos pontos de ajuste durante a rolagem.

Essas propriedades são apoiadas por BindableProperty objetos, o que significa que as propriedades podem ser destinos de associações de dados. Para obter mais informações sobre pontos de ajuste, consulte Pontos de ajuste no guia de rolagem do Xamarin.Forms CollectionView.

A enumeração ItemsLayoutOrientation define os seguintes membros:

Vertical indica que o se expandirá verticalmente à medida que os CarouselView itens forem adicionados.
Horizontal indica que o se expandirá horizontalmente à medida que os CarouselView itens forem adicionados.

A LinearItemsLayout classe herda da ItemsLayout classe e define uma ItemSpacing propriedade, do tipo double, que representa o espaço vazio ao redor de cada item. O valor padrão dessa propriedade é 0 e seu valor sempre deve ser maior ou igual a 0. A LinearItemsLayout classe também define estática Vertical e Horizontal membros. Esses membros podem ser usados para criar listas verticais ou horizontais, respectivamente. Como alternativa, um LinearItemsLayout objeto pode ser criado, especificando um ItemsLayoutOrientation membro de enumeração como um argumento.

Observação

CarouselView usa os mecanismos de layout nativos para executar o layout.

Layout horizontal

Por padrão, CarouselView exibirá seus itens horizontalmente. Portanto, não é necessário definir a ItemsLayout propriedade para usar este layout:

<CarouselView ItemsSource="{Binding Monkeys}">
    <CarouselView.ItemTemplate>
        <DataTemplate>
            <StackLayout>
                <Frame HasShadow="True"
                       BorderColor="DarkGray"
                       CornerRadius="5"
                       Margin="20"
                       HeightRequest="300"
                       HorizontalOptions="Center"
                       VerticalOptions="CenterAndExpand">
                    <StackLayout>
                        <Label Text="{Binding Name}"
                               FontAttributes="Bold"
                               FontSize="Large"
                               HorizontalOptions="Center"
                               VerticalOptions="Center" />
                        <Image Source="{Binding ImageUrl}"
                               Aspect="AspectFill"
                               HeightRequest="150"
                               WidthRequest="150"
                               HorizontalOptions="Center" />
                        <Label Text="{Binding Location}"
                               HorizontalOptions="Center" />
                        <Label Text="{Binding Details}"
                               FontAttributes="Italic"
                               HorizontalOptions="Center"
                               MaxLines="5"
                               LineBreakMode="TailTruncation" />
                    </StackLayout>
                </Frame>
            </StackLayout>
        </DataTemplate>
    </CarouselView.ItemTemplate>
</CarouselView>

Como alternativa, esse layout também pode ser realizado definindo a ItemsLayout propriedade como um LinearItemsLayout objeto, especificando o membro de HorizontalItemsLayoutOrientation enumeração como o valor da Orientation propriedade:

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

Este é o código C# equivalente:

CarouselView carouselView = new CarouselView
{
    ...
    ItemsLayout = LinearItemsLayout.Horizontal
};

Isso resulta em um layout que cresce horizontalmente à medida que novos itens são adicionados:

Layout vertical

CarouselView pode exibir seus itens verticalmente definindo a ItemsLayout propriedade como um LinearItemsLayout objeto, especificando o membro de VerticalItemsLayoutOrientation enumeração como o valor da Orientation propriedade:

<CarouselView ItemsSource="{Binding Monkeys}">
    <CarouselView.ItemsLayout>
        <LinearItemsLayout Orientation="Vertical" />
    </CarouselView.ItemsLayout>
    <CarouselView.ItemTemplate>
        <DataTemplate>
            <StackLayout>
                <Frame HasShadow="True"
                       BorderColor="DarkGray"
                       CornerRadius="5"
                       Margin="20"
                       HeightRequest="300"
                       HorizontalOptions="Center"
                       VerticalOptions="CenterAndExpand">
                    <StackLayout>
                        <Label Text="{Binding Name}"
                               FontAttributes="Bold"
                               FontSize="Large"
                               HorizontalOptions="Center"
                               VerticalOptions="Center" />
                        <Image Source="{Binding ImageUrl}"
                               Aspect="AspectFill"
                               HeightRequest="150"
                               WidthRequest="150"
                               HorizontalOptions="Center" />
                        <Label Text="{Binding Location}"
                               HorizontalOptions="Center" />
                        <Label Text="{Binding Details}"
                               FontAttributes="Italic"
                               HorizontalOptions="Center"
                               MaxLines="5"
                               LineBreakMode="TailTruncation" />
                    </StackLayout>
                </Frame>
            </StackLayout>
        </DataTemplate>
    </CarouselView.ItemTemplate>
</CarouselView>

Este é o código C# equivalente:

CarouselView carouselView = new CarouselView
{
    ...
    ItemsLayout = LinearItemsLayout.Vertical
};

Isso resulta em um layout que cresce verticalmente à medida que novos itens são adicionados:

Itens adjacentes parcialmente visíveis

Por padrão, CarouselView exibe itens completos de uma só vez. No entanto, esse comportamento pode ser alterado definindo a PeekAreaInsets propriedade para um Thickness valor que especifica quanto tornar os itens adjacentes parcialmente visíveis por. Isso pode ser útil para indicar aos usuários que há itens adicionais para exibir. O XAML a seguir mostra um exemplo de configuração dessa propriedade:

<CarouselView ItemsSource="{Binding Monkeys}"
              PeekAreaInsets="100">
    ...
</CarouselView>

Este é o código C# equivalente:

CarouselView carouselView = new CarouselView
{
    ...
    PeekAreaInsets = new Thickness(100)
};

O resultado é que os itens adjacentes são parcialmente expostos na tela:

Espaçamento entre itens

Por padrão, não há espaço entre cada item em um CarouselViewarquivo . Esse comportamento pode ser alterado definindo a ItemSpacing propriedade no layout de itens usado pelo CarouselView.

Quando um CarouselView define sua ItemsLayout propriedade como um LinearItemsLayout objeto, a LinearItemsLayout.ItemSpacing propriedade pode ser definida como um double valor que representa o espaço entre itens:

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

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.

Este é o código C# equivalente:

CarouselView carouselView = new CarouselView
{
    ...
    ItemsLayout = new LinearItemsLayout(ItemsLayoutOrientation.Vertical)
    {
        ItemSpacing = 20
    }
};

Esse código resulta em um layout vertical, que tem um espaçamento de 20 entre itens.

Redimensionamento dinâmico de itens

Os itens em um CarouselView podem ser redimensionados dinamicamente em tempo de execução alterando as propriedades relacionadas ao layout dos elementos dentro do DataTemplate. Por exemplo, o exemplo de código a seguir altera as propriedades e de um objeto e a HeightRequest propriedade de seu paiFrame:ImageHeightRequestWidthRequest

void OnImageTapped(object sender, EventArgs e)
{
    Image image = sender as Image;
    image.HeightRequest = image.WidthRequest = image.HeightRequest.Equals(150) ? 200 : 150;
    Frame frame = ((Frame)image.Parent.Parent);
    frame.HeightRequest = frame.HeightRequest.Equals(300) ? 350 : 300;
}

O OnImageTapped manipulador de eventos é executado em resposta a um Image objeto que está sendo tocado e altera as dimensões da imagem (e seu pai Frame), para que ela seja visualizada mais facilmente:

Layout da direita para a esquerda

CarouselView pode fazer o layout de seu conteúdo em uma direção de fluxo da direita para a esquerda, definindo sua propriedade FlowDirection como RightToLeft. Entretanto, o ideal é que a propriedade FlowDirection seja definida em uma página ou layout raiz, o que faz com que todos os elementos da página ou layout raiz respondam à direção do fluxo:

<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             x:Class="CarouselViewDemos.Views.HorizontalTemplateLayoutRTLPage"
             Title="Horizontal layout (RTL FlowDirection)"
             FlowDirection="RightToLeft">    
    <CarouselView ItemsSource="{Binding Monkeys}">
        ...
    </CarouselView>
</ContentPage>

O padrão FlowDirection para um elemento com um pai é MatchParent. Portanto, o CarouselView herda o valor da propriedade FlowDirection do ContentPage.

Para obter mais informações sobre a direção do fluxo, consulte Localização da direita para a esquerda.

Compartilhar via

Xamarin.Forms CarrosselVer Layout

Layout horizontal

Layout vertical

Itens adjacentes parcialmente visíveis

Espaçamento entre itens

Redimensionamento dinâmico de itens

Layout da direita para a esquerda

Recursos adicionais

Compartilhar via

Xamarin.Forms CarrosselVer Layout

Layout horizontal

Layout vertical

Itens adjacentes parcialmente visíveis

Espaçamento entre itens

Redimensionamento dinâmico de itens

Layout da direita para a esquerda

Links relacionados

Recursos adicionais