Partager via

Xamarin.Forms Page carrousel

  • Article

CarouselPage Xamarin.Forms est une page que les utilisateurs peuvent balayer de côté à côte pour parcourir les pages de contenu, comme une galerie. Cet article montre comment utiliser un CarouselPage pour parcourir une collection de pages.

Important

Celui-ci CarouselPage a été remplacé par le CarouselView, qui fournit une disposition défilante dans laquelle les utilisateurs peuvent effectuer un mouvement de balayage pour parcourir une collection d’éléments. Pour plus d’informations sur le CarouselViewXamarin.Forms carrouselView.

Les captures d’écran suivantes montrent un CarouselPage sur chaque plateforme :

Troisième élément CarouselPage

La disposition d’un CarouselPage est identique sur chaque plateforme. Les pages peuvent être parcourues en balayant de droite à gauche pour naviguer vers l’avant dans la collection, et en balayant de gauche à droite pour naviguer en arrière dans la collection. Les captures d’écran suivantes montrent la première page dans une instance de CarouselPage :

Premier élément CarouselPage

Un balayage de droite à gauche permet d’accéder à la deuxième page, comme illustré dans les captures d’écran suivantes :

Deuxième élément CarouselPage

Un nouveau balayage de droite à gauche permet d’accéder à la troisième page, tandis qu’un balayage de gauche à droite permet de revenir à la page précédente.

Remarque

Le CarouselPage ne prend pas en charge la virtualisation de l’interface utilisateur. Par conséquent, les performances peuvent être affectées si le CarouselPage contient trop d’éléments enfants.

Si un CarouselPage est incorporé dans la page Detail d’un FlyoutPage, la valeur false doit être affectée à la propriété FlyoutPage.IsGestureEnabled afin d’éviter les conflits de mouvement entre CarouselPage et FlyoutPage.

Pour plus d’informations sur le livre de Charles PetzoldXamarin.Forms, consultez le CarouselPagechapitre 25.

Créer un CarouselPage

Deux approches peuvent être adoptées pour créer un CarouselPage :

Avec les deux approches, le CarouselPage affiche alors chaque page tour à tour, avec une interaction de balayage pour afficher la page suivante.

Remarque

Un CarouselPage peut uniquement être rempli avec des instances de ContentPage, ou des dérivés de ContentPage.

Remplir un CarouselPage avec une collection de pages

L’exemple de code XAML suivant montre un CarouselPage qui affiche trois instances 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>

L’exemple de code suivant montre l’interface utilisateur équivalente en 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);
    }
}

Chaque ContentPage affiche simplement un Label pour une couleur particulière et un BoxView de cette couleur.

Remplir un CarouselPage avec un modèle

L’exemple de code XAML suivant montre un CarouselPage construit en assignant un DataTemplate à la propriété ItemTemplate afin de retourner des pages pour les objets de la 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>

Le CarouselPage est rempli avec des données en définissant la propriété ItemsSource dans le constructeur pour le fichier code-behind :

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

L’exemple de code suivant montre le CarouselPage équivalent créé en 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;
    }
}

Chaque ContentPage affiche simplement un Label pour une couleur particulière et un BoxView de cette couleur.