CarouselPage de Xamarin.FormsXamarin.Forms Carousel Page

Descargar ejemplo Descargar el ejemploDownload Sample Download the sample

CarouselPage de Xamarin.Forms es una página que los usuarios pueden deslizar de lado a lado para navegar por páginas de contenido, como una galería. En este artículo se muestra cómo usar 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.

Importante

CarouselPage se ha reemplazado por CarouselView, que proporciona un diseño desplazable en el que los usuarios pueden deslizarse para desplazarse por una colección de elementos.The CarouselPage has been superseded by the CarouselView, which provides a scrollable layout where users can swipe to move through a collection of items. Para obtener más información sobre CarouselView, vea CarouselView de Xamarin.Forms.For more information about the CarouselView, see Xamarin.Forms CarouselView.

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

El diseño de un elemento CarouselPage es idéntico en todas las plataformas.The layout of a CarouselPage is identical on each platform. Para navegar por las páginas, hay que deslizar de derecha a izquierda para avanzar en la colección y de izquierda a derecha para retroceder en 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 de una instancia de CarouselPage:The following screenshots show the first page in a CarouselPage instance:

Al deslizar de derecha a izquierda se pasa a la segunda página, como se muestra en las capturas de pantalla siguientes:Swiping from right to left moves to the second page, as shown in the following screenshots:

Al volver a deslizar de derecha a izquierda se pasa a la tercera página, mientras que al deslizar de izquierda a derecha se vuelve 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.

Nota

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

Si hay una instancia de CarouselPage insertada en la página Detail de MasterDetailPage, la propiedad MasterDetailPage.IsGestureEnabled debe establecerse en false para evitar conflictos entre 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 instancia de CarouselPage, vea el capítulo 25 del libro sobre Xamarin.Forms de Charles Petzold.For more information about the CarouselPage, see Chapter 25 of Charles Petzold's Xamarin.Forms book.

Creación de CarouselPageCreate a CarouselPage

Para crear una instancia de CarouselPage se pueden usar dos métodos:Two approaches can be used to create a CarouselPage:

Con ambos métodos, CarouselPage muestra a su vez cada página, con una interacción de deslizamiento que pasa a la página siguiente que se va a 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

Una instancia de CarouselPage solo se puede rellenar con instancias de ContentPage, o derivados de ContentPage.A CarouselPage can only be populated with ContentPage instances, or ContentPage derivatives.

Relleno de CarouselPage con una colección de páginasPopulate a CarouselPage with a Page collection

El ejemplo de código XAML siguiente muestra una instancia de CarouselPage con tres instancias de ContentPage: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>

En el ejemplo de código siguiente se 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 elemento Label para un color determinado y un elemento BoxView de ese color.Each ContentPage simply displays a Label for a particular color and a BoxView of that color.

Relleno de CarouselPage con una plantillaPopulate a CarouselPage with a template

El ejemplo de código XAML siguiente muestra una instancia de CarouselPage construida mediante la asignación de DataTemplate a la propiedad ItemTemplate para devolver páginas para 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>

CarouselPage se rellena con datos al establecer la propiedad ItemsSource 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 la instancia de CarouselPage equivalente creada 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 elemento Label para un color determinado y un elemento BoxView de ese color.Each ContentPage simply displays a Label for a particular color and a BoxView of that color.