Bagikan melalui

Xamarin.Forms Halaman Carousel

  • Artikel

CarouselPage Xamarin.Forms adalah halaman yang dapat disapu pengguna dari sisi ke sisi untuk menavigasi halaman konten, seperti galeri. Artikel ini menunjukkan cara menggunakan CarouselPage untuk menavigasi kumpulan halaman.

Penting

CarouselPage telah digantikan oleh CarouselView, yang menyediakan tata letak yang dapat digulir di mana pengguna dapat menggesek untuk berpindah melalui kumpulan item. Untuk informasi selengkapnya tentang CarouselView, lihat Xamarin.Forms CarouselView.

Cuplikan layar berikut menunjukkan CarouselPage di setiap platform:

Item Ketiga CarouselPage

Tata letak identik CarouselPage pada setiap platform. Halaman dapat dinavigasi dengan menggesekkan kanan ke kiri untuk menavigasi maju melalui koleksi, dan dengan menggesekkan ke kiri ke kanan untuk menavigasi mundur melalui koleksi. Cuplikan layar berikut menunjukkan halaman pertama dalam CarouselPage instans:

Item Pertama CarouselPage

Menggesek dari kanan ke kiri berpindah ke halaman kedua, seperti yang diperlihatkan dalam cuplikan layar berikut:

Item Kedua CarouselPage

Menggesek dari kanan ke kiri lagi berpindah ke halaman ketiga, sambil menggesek dari kiri ke kanan kembali ke halaman sebelumnya.

Catatan

CarouselPage tidak mendukung virtualisasi UI. Oleh karena itu, performa dapat terpengaruh jika CarouselPage mengandung terlalu banyak elemen anak.

CarouselPage Jika disematkan ke Detail halaman FlyoutPage, FlyoutPage.IsGestureEnabled properti harus diatur ke false untuk mencegah konflik gerakan antara CarouselPage dan FlyoutPage.

Untuk informasi selengkapnya tentang CarouselPage, lihat Bab 25 dari buku Charles Petzold Xamarin.Forms .

Membuat CarouselPage

Dua pendekatan dapat digunakan untuk membuat CarouselPage:

Dengan kedua pendekatan, CarouselPage kemudian akan menampilkan setiap halaman secara bergantian, dengan interaksi gesek berpindah ke halaman berikutnya untuk ditampilkan.

Catatan

Hanya CarouselPage dapat diisi dengan ContentPage instans, atau ContentPage turunan.

Mengisi CarouselPage dengan koleksi Halaman

Contoh kode XAML berikut menunjukkan CarouselPage yang menampilkan tiga ContentPage instans:

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

Contoh kode berikut menunjukkan UI yang setara di 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);
    }
}

Masing-masing ContentPage hanya menampilkan Label untuk warna tertentu dan BoxView warna tersebut.

Mengisi CarouselPage dengan templat

Contoh kode XAML berikut menunjukkan yang CarouselPage dibangun dengan menetapkan DataTemplate ke ItemTemplate properti untuk mengembalikan halaman untuk objek dalam koleksi:

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

diisi CarouselPage dengan data dengan mengatur ItemsSource properti di konstruktor untuk file code-behind:

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

Contoh kode berikut menunjukkan setara CarouselPage yang dibuat di 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;
    }
}

Masing-masing ContentPage hanya menampilkan Label untuk warna tertentu dan BoxView warna tersebut.