Partilhar via

Xamarin.Forms Página carrossel

  • Artigo

A Xamarin.Forms CarouselPage é uma página que os usuários podem deslizar de um lado para o outro para navegar pelas páginas de conteúdo, como uma galeria. Este artigo demonstra como usar uma CarouselPage para navegar por uma coleção de páginas.

Importante

O CarouselPage foi substituído pelo CarouselView, que fornece um layout rolável onde os usuários podem deslizar para percorrer uma coleção de itens. Para obter mais informações sobre o CarouselView, consulte Xamarin.Forms CarouselView.

As seguintes capturas de tela mostram uma CarouselPage em cada plataforma:

Terceiro item de CarouselPage

O layout de uma CarouselPage é idêntico em todas as plataformas. As páginas podem ser navegadas passando o dedo da direita para a esquerda para navegar para frente na coleção e passando o dedo da esquerda para a direita para navegar para trás. As capturas de tela a seguir mostram a primeira página em uma instância de uma CarouselPage:

Primeiro item de CarouselPage

Passar o dedo da direita para a esquerda leva para a segunda página, conforme mostrado nas capturas de tela seguir:

Segundo item de CarouselPage

Passar o dedo da direita para a esquerda novamente leva para a terceira página, enquanto passar o dedo da esquerda para a direita retorna à página anterior.

Observação

A CarouselPage não dá suporte à virtualização de interface do usuário. Portanto, o desempenho poderá ser afetado se a CarouselPage contiver muitos elementos filho.

Se uma CarouselPage for inserida na página Detail de um FlyoutPage, a propriedade FlyoutPage.IsGestureEnabled deverá ser definida como false para evitar conflitos de gesto entre o CarouselPage e o FlyoutPage.

Para mais informações sobre o , consulte o CarouselPageCapítulo 25 do livro de Charles PetzoldXamarin.Forms.

Criar uma CarouselPage

Duas abordagens podem ser usadas para criar uma CarouselPage:

Com as duas abordagens, a CarouselPage exibirá uma página por vez, com uma interação de passar o dedo levando para a próxima página a ser exibida.

Observação

Uma CarouselPage pode ser populada apenas com instâncias de ContentPage ou derivados de ContentPage.

Popular uma CarouselPage com uma coleção de páginas

O exemplo de código XAML a seguir mostra um CarouselPage que exibe três instâncias de ContentPage:

<CarouselPage xmlns="http://xamarin.com/schemas/2014/forms"
              xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
              x:Class="CarouselPageNavigation.MainPage">
    <ContentPage>
        <ContentPage.Padding>
          <OnPlatform x:TypeArguments="Thickness">
              <On Platform="iOS, Android" Value="0,40,0,0" />
          </OnPlatform>
        </ContentPage.Padding>
        <StackLayout>
            <Label Text="Red" FontSize="Medium" HorizontalOptions="Center" />
            <BoxView Color="Red" WidthRequest="200" HeightRequest="200" HorizontalOptions="Center" VerticalOptions="CenterAndExpand" />
        </StackLayout>
    </ContentPage>
    <ContentPage>
        ...
    </ContentPage>
    <ContentPage>
        ...
    </ContentPage>
</CarouselPage>

O exemplo de código a seguir mostra a interface do usuário equivalente em C#:

public class MainPageCS : CarouselPage
{
    public MainPageCS ()
    {
        Thickness padding;
        switch (Device.RuntimePlatform)
        {
            case Device.iOS:
            case Device.Android:
                padding = new Thickness(0, 40, 0, 0);
                break;
            default:
                padding = new Thickness();
                break;
        }

        var redContentPage = new ContentPage {
            Padding = padding,
            Content = new StackLayout {
                Children = {
                    new Label {
                        Text = "Red",
                        FontSize = Device.GetNamedSize (NamedSize.Medium, typeof(Label)),
                        HorizontalOptions = LayoutOptions.Center
                    },
                    new BoxView {
                        Color = Color.Red,
                        WidthRequest = 200,
                        HeightRequest = 200,
                        HorizontalOptions = LayoutOptions.Center,
                        VerticalOptions = LayoutOptions.CenterAndExpand
                    }
                }
            }
        };
        var greenContentPage = new ContentPage {
            Padding = padding,
            Content = new StackLayout {
                ...
            }
        };
        var blueContentPage = new ContentPage {
            Padding = padding,
            Content = new StackLayout {
                ...
            }
        };

        Children.Add (redContentPage);
        Children.Add (greenContentPage);
        Children.Add (blueContentPage);
    }
}

Cada ContentPage simplesmente exibe um Label para uma cor específica e um BoxView dessa cor.

Popular uma CarouselPage com um modelo

O exemplo de código XAML a seguir mostra uma CarouselPage construída pela atribuição de um DataTemplate à propriedade ItemTemplate para retornar páginas para objetos na coleção:

<CarouselPage xmlns="http://xamarin.com/schemas/2014/forms"
              xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
              x:Class="CarouselPageNavigation.MainPage">
    <CarouselPage.ItemTemplate>
        <DataTemplate>
            <ContentPage>
                <ContentPage.Padding>
                  <OnPlatform x:TypeArguments="Thickness">
                    <On Platform="iOS, Android" Value="0,40,0,0" />
                  </OnPlatform>
                </ContentPage.Padding>
                <StackLayout>
                    <Label Text="{Binding Name}" FontSize="Medium" HorizontalOptions="Center" />
                    <BoxView Color="{Binding Color}" WidthRequest="200" HeightRequest="200" HorizontalOptions="Center" VerticalOptions="CenterAndExpand" />
                </StackLayout>
            </ContentPage>
        </DataTemplate>
    </CarouselPage.ItemTemplate>
</CarouselPage>

A CarouselPage é populada com os dados, definindo a propriedade ItemsSource no construtor para o arquivo code-behind:

public MainPage ()
{
    ...
    ItemsSource = ColorsDataModel.All;
}

O seguinte exemplo de código mostra a CarouselPage equivalente criada em C#:

public class MainPageCS : CarouselPage
{
    public MainPageCS ()
    {
        Thickness padding;
        switch (Device.RuntimePlatform)
        {
            case Device.iOS:
            case Device.Android:
                padding = new Thickness(0, 40, 0, 0);
                break;
            default:
                padding = new Thickness();
                break;
        }

        ItemTemplate = new DataTemplate (() => {
            var nameLabel = new Label {
                FontSize = Device.GetNamedSize (NamedSize.Medium, typeof(Label)),
                HorizontalOptions = LayoutOptions.Center
            };
            nameLabel.SetBinding (Label.TextProperty, "Name");

            var colorBoxView = new BoxView {
                WidthRequest = 200,
                HeightRequest = 200,
                HorizontalOptions = LayoutOptions.Center,
                VerticalOptions = LayoutOptions.CenterAndExpand
            };
            colorBoxView.SetBinding (BoxView.ColorProperty, "Color");

            return new ContentPage {
                Padding = padding,
                Content = new StackLayout {
                    Children = {
                        nameLabel,
                        colorBoxView
                    }
                }
            };
        });

        ItemsSource = ColorsDataModel.All;
    }
}

Cada ContentPage simplesmente exibe um Label para uma cor específica e um BoxView dessa cor.