Página de carrusel de Xamarin.FormsXamarin.Forms Carousel Page

El Xamarin.Forms CarouselPage es una página que los usuarios pueden pasar el dedo de lado a lado para navegar por las páginas de contenido, como una galería. En este artículo se muestra cómo usar un CarouselPage para navegar por una colección de páginas.The Xamarin.Forms CarouselPage is a page that users can swipe from side to side to navigate through pages of content, like a gallery. This article demonstrates how to use a CarouselPage to navigate through a collection of pages.

Información generalOverview

El siguientes capturas de pantalla se muestra un CarouselPage en cada plataforma:The following screenshots show a CarouselPage on each platform:

El diseño de un CarouselPage es idéntico en cada plataforma.The layout of a CarouselPage is identical on each platform. Las páginas se pueden navegar a través de deslizándose hacia la derecha a izquierda para navegar hacia delante a través de la colección y deslizándose hacia la izquierda a derecha para navegar hacia atrás a través de la colección.Pages can be navigated through by swiping right to left to navigate forwards through the collection, and by swiping left to right to navigate backwards through the collection. Las capturas de pantalla siguientes muestran la primera página en un CarouselPage instancia:The following screenshots show the first page in a CarouselPage instance:

Pasar el dedo de derecha a izquierda mueve hasta la segunda página, como se muestra en las capturas de pantalla siguiente:Swiping from right to left moves to the second page, as shown in the following screenshots:

Pasar de nuevo de derecha a izquierda se mueve a la tercera página, mientras que el gesto de deslizar rápidamente de izquierda a derecha devuelve a la página anterior.Swiping from right to left again moves to the third page, while swiping from left to right returns to the previous page.

Creación de un CarouselPageCreating a CarouselPage

Se pueden usar dos enfoques para crear un CarouselPage :Two approaches can be used to create a CarouselPage:

Con ambos enfoques, la CarouselPage mostrará a continuación, cada página a su vez, con una interacción de deslizar rápidamente moverse a la página siguiente que se mostrará.With both approaches, the CarouselPage will then display each page in turn, with a swipe interaction moving to the next page to be displayed.

Nota

Un CarouselPage solo se pueden rellenar con ContentPage instancias, o ContentPage derivados.A CarouselPage can only be populated with ContentPage instances, or ContentPage derivatives.

Rellenar un CarouselPage con una colección de páginasPopulating a CarouselPage with a Page Collection

El ejemplo de código XAML siguiente muestra un CarouselPage que muestra tres ContentPage instancias:The following XAML code example shows a CarouselPage that displays three ContentPage instances:

<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>

El ejemplo de código siguiente muestra la interfaz de usuario equivalente en C#:The following code example shows the equivalent UI in 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 muestra simplemente un Label para un color determinado y un BoxView de ese color.Each ContentPage simply displays a Label for a particular color and a BoxView of that color.

Nota

El CarouselPage no admite la virtualización de interfaz de usuario.The CarouselPage does not support UI virtualization. Por lo tanto, el rendimiento puede verse afectado si la CarouselPage contiene demasiados elementos secundarios.Therefore, performance may be affected if the CarouselPage contains too many child elements.

Si un CarouselPage se incrusta en el Detail página de un MasterDetailPage , MasterDetailPage.IsGestureEnabled propiedad debe establecerse en false para evitar conflictos de gesto entre el CarouselPage y MasterDetailPage.If a CarouselPage is embedded into the Detail page of a MasterDetailPage, the MasterDetailPage.IsGestureEnabled property should be set to false to prevent gesture conflicts between the CarouselPage and the MasterDetailPage.

Para obtener más información sobre la CarouselPage , consulte capítulo 25 del libro de Petzold Xamarin.Forms.For more information about the CarouselPage, see Chapter 25 of Charles Petzold's Xamarin.Forms book.

Rellenar un CarouselPage con una plantillaPopulating a CarouselPage with a Template

El ejemplo de código XAML siguiente muestra un CarouselPage construido mediante la asignación de un DataTemplate a la ItemTemplate páginas para esta propiedad objetos de la colección:The following XAML code example shows a CarouselPage constructed by assigning a DataTemplate to the ItemTemplate property to return pages for objects in the collection:

<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>

El CarouselPage se rellena con datos estableciendo el ItemsSource propiedad en el constructor para el archivo de código subyacente:The CarouselPage is populated with data by setting the ItemsSource property in the constructor for the code-behind file:

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

En el ejemplo de código siguiente se muestra el equivalente CarouselPage creado en C#:The following code example shows the equivalent CarouselPage created in 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 muestra simplemente un Label para un color determinado y un BoxView de ese color.Each ContentPage simply displays a Label for a particular color and a BoxView of that color.

Nota

El CarouselPage no admite la virtualización de interfaz de usuario.The CarouselPage does not support UI virtualization. Por lo tanto, el rendimiento puede verse afectado si la CarouselPage contiene demasiados elementos secundarios.Therefore, performance may be affected if the CarouselPage contains too many child elements.

Si un CarouselPage se incrusta en el Detail página de un MasterDetailPage , MasterDetailPage.IsGestureEnabled propiedad debe establecerse en false para evitar conflictos de gesto entre el CarouselPage y MasterDetailPage.If a CarouselPage is embedded into the Detail page of a MasterDetailPage, the MasterDetailPage.IsGestureEnabled property should be set to false to prevent gesture conflicts between the CarouselPage and the MasterDetailPage.

Para obtener más información sobre la CarouselPage , consulte capítulo 25 del libro de Petzold Xamarin.Forms.For more information about the CarouselPage, see Chapter 25 of Charles Petzold's Xamarin.Forms book.

ResumenSummary

En este artículo se muestra cómo usar un CarouselPage para navegar por una colección de páginas.This article demonstrated how to use a CarouselPage to navigate through a collection of pages. El CarouselPage es una página que los usuarios pueden pasar el dedo de lado a lado para navegar por las páginas de contenido, muy similar a una galería.The CarouselPage is a page that users can swipe from side to side to navigate through pages of content,much like a gallery.