Xamarin.Forms 浮動切換頁面

  • 發行項

Download Sample 下載範例

Xamarin.Forms CarouselPage 是一個頁面，使用者可以從一邊撥動到一邊瀏覽內容頁面，例如資源庫。 本文示範如何使用 CarouselPage 來巡覽頁面集合。

重要

CarouselPage已由 取代 CarouselView，其提供可捲動的配置，用戶可以撥動以移動專案集合。 如需 的詳細資訊 CarouselView，請參閱 Xamarin.Forms CarouselView。

下列螢幕擷取畫面顯示每個平台上的 CarouselPage：

CarouselPage Third Item

CarouselPage 的配置在每個平台上都相同。 頁面可以藉由從右至左撥動以向前巡覽集合，並藉由從左至右撥動以向後巡覽集合。 下列螢幕擷取畫面顯示 CarouselPage 執行個體的第一頁：

CarouselPage First Item

從右至左撥動以前往第二個頁面，如下列螢幕擷取畫面所示：

CarouselPage Second Item

再次從右至左撥動可前往第三個頁面，而從左至右撥動會回到前一個頁面。

注意

CarouselPage 不支援 UI 虛擬化。 因此，如果 CarouselPage 包含太多子項目，效能可能會受影響。

如果 CarouselPage 內嵌到 FlyoutPage 的 Detail 頁面中，則 FlyoutPage.IsGestureEnabled 屬性應設為 false 以避免在 CarouselPage 和 FlyoutPage 之間發生手勢衝突。

如需 的詳細資訊CarouselPage，請參閱查理斯·佩茨羅德書的第 Xamarin.Forms 25 章。

建立 CarouselPage

有兩種方法可用來建立 CarouselPage：

使用這兩種方法，CarouselPage 將會依序顯示每一頁，並顯示前往下一頁的撥動互動。

注意

CarouselPage 只能透過 ContentPage 執行個體或 ContentPage 衍生項目來填入。

以頁面集合填入 CarouselPage

下列 XAML 程式碼範例示範會顯示三個 ContentPage 執行個體的 CarouselPage：

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

下列程式碼範例顯示 C# 中的對等 UI：

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);
    }
}

每個 ContentPage 只會顯示特定色彩的 Label，以及該色彩的 BoxView。

以範本填入 CarouselPage

下列 XAML 程式碼範例會顯示一個 CarouselPage，其建構方式是透過將 DataTemplate 指派給 ItemTemplate 屬性，來傳回集合中物件的頁面：

<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 會藉由在程式碼後置檔案的建構函式中設定 ItemsSource 屬性來填入資料：

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

下列程式碼範例示範以 C# 建立的相等 CarouselPage：

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

每個 ContentPage 只會顯示特定色彩的 Label，以及該色彩的 BoxView。