Xamarin.Forms Pagina Carousel

CarouselPage Xamarin.Forms è una pagina che gli utenti possono scorrere da un lato all'altro per spostarsi tra pagine di contenuto, ad esempio una raccolta. Questo articolo illustra come usare una classe CarouselPage per spostarsi in una raccolta di pagine.

Importante

è CarouselPage stato sostituito da CarouselView, che fornisce un layout scorrevole in cui gli utenti possono scorrere rapidamente per spostarsi in una raccolta di elementi. Per altre informazioni su CarouselView, vedere Xamarin.Forms CarouselView.

Gli screenshot seguenti illustrano una CarouselPage in ogni piattaforma:

Il layout di una CarouselPage è identico in ogni piattaforma. Si può passare da una pagina all'altra scorrendo rapidamente da destra a sinistra per passare alla pagina successiva della raccolta e scorrendo rapidamente da sinistra a destra per passare alla pagina precedente della raccolta. Gli screenshot seguenti illustrano la prima pagina in un'istanza di CarouselPage:

Scorrendo rapidamente da destra a sinistra si passa alla seconda pagina, come illustrato negli screenshot seguenti:

Scorrendo di nuovo rapidamente da destra a sinistra si passa alla terza pagina, mentre scorrendo rapidamente da sinistra a destra si torna alla pagina precedente.

Nota

La classe CarouselPage non supporta la virtualizzazione dell'interfaccia utente. Di conseguenza, la presenza di troppi elementi figlio nella CarouselPage può influire sulle prestazioni.

Se una CarouselPage è incorporata nella pagina Detail di una classe FlyoutPage, la proprietà FlyoutPage.IsGestureEnabled deve essere impostata su false per evitare conflitti di movimento tra CarouselPage e FlyoutPage.

Per ulteriori informazioni su CarouselPage, vedere il capitolo 25 del libro di Xamarin.Forms Charles Petzold.

Creare un'istanza di CarouselPage

Per creare una CarouselPage è possibile usare due approcci:

• Popolare la CarouselPage con una raccolta di istanze ContentPage figlio.
• Assegnare una raccolta alla proprietà ItemsSource e assegnare una classe DataTemplate alla proprietà ItemTemplate per restituire le istanze di ContentPage per gli oggetti della raccolta.

Con entrambi gli approcci, CarouselPage visualizzerà a sua volta ogni pagina, con un'interazione di scorrimento che consente di passare alla pagina successiva da visualizzare.

Nota

Una CarouselPage può essere popolata solo con istanze di ContentPage o derivate di ContentPage.

Popolare un'istanza di CarouselPage con una raccolta di pagine

L'esempio di codice XAML seguente illustra una CarouselPage che visualizza tre istanze di 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>

L'esempio di codice seguente illustra l'interfaccia utente equivalente 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);
    }
}

Ogni classe ContentPage visualizza semplicemente una classe Label per un particolare colore e una classe BoxView di quel colore.

Popolare un'istanza di CarouselPage con un modello

L'esempio di codice XAML seguente illustra una CarouselPage costruita assegnando una classe DataTemplate alla proprietà ItemTemplate per restituire le pagine per gli oggetti della raccolta:

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

La CarouselPage viene popolata con i dati impostando la proprietà ItemsSource nel costruttore per il file code-behind:

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

L'esempio di codice seguente illustra la CarouselPage equivalente creata 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;
    }
}

Ogni classe ContentPage visualizza semplicemente una classe Label per un particolare colore e una classe BoxView di quel colore.

Collegamenti correlati

• Tipi di pagina
• CarouselPage