Xamarin.Forms Stránka karusel

Ukázka stažení Stažení ukázky

Xamarin.FormsCarouselPage je stránka, kterou si uživatelé mohou přetáhnout ze strany na stranu, aby mohli procházet stránky obsahu, jako je galerie. Tento článek ukazuje, jak použít CarouselPage k procházení kolekce stránek.

Důležité

Byl CarouselPage nahrazen pomocí CarouselView , který poskytuje rolovací rozložení, kde mohou uživatelé přetáhnout položky z kolekce položek. Další informace o naleznete v CarouselView tématu Xamarin.Forms CarouselView .

Následující snímky obrazovky ukazují CarouselPage na každé platformě:

CarouselPage třetí položka

Rozložení a CarouselPage je na každé platformě stejné. Stránky lze procházet přetáhnutím doprava zprava doleva, aby bylo možné přejít vpřed přes kolekci, a přetáhnutím doleva doprava přejít zpět přes kolekci. Následující snímky obrazovky ukazují první stránku v CarouselPage instanci:

CarouselPage první položku

Prst zprava doleva se přesune na druhou stránku, jak je znázorněno na následujících snímcích obrazovky:

CarouselPage druhá položka

Prst zprava doleva se znovu přesune na třetí stránku, zatímco prst zleva doprava vrátí na předchozí stránku.

Poznámka

Nepodporuje CarouselPage virtualizaci uživatelského rozhraní. Proto může být ovlivněn výkon, pokud CarouselPage obsahuje příliš mnoho podřízených elementů.

Pokud CarouselPage je vložen do CarouselPage Xamarin_Forms _FlyoutPage_Detail "data-LINKTYPE =" absolutní cestu ">Detail stránce a FlyoutPage , FlyoutPage.IsGestureEnabled vlastnost by měla být nastavena na hodnotu, false aby nedocházelo ke konfliktům gest mezi CarouselPage a FlyoutPage .

Další informace o naleznete v části CarouselPageCarouselPage z knihy Charles Petzold Xamarin.Forms .

Vytvoření CarouselPage

Pomocí dvou přístupů lze vytvořit CarouselPage :

  • Naplňte kolekci podřízených ContentPage instancí.
  • Přiřaďte kolekci do _MultiPage_1_ItemsSource "data-LINKTYPE =" absolutní cesta "> vlastnost a přiřaďte DataTemplate k Xamarin_Forms _MultiPage_1_ItemTemplate vlastnost data-LINKTYPE =" absolutní cesta ">ItemTemplate vlastnost, která vrátí ContentPage instance objektů v kolekci.

Oba přístupy CarouselPage pak budou zobrazovat každou stránku zase s potáhnutím interakce přesunutí na další stránku, která se zobrazí.

Poznámka

CarouselPageMůže se naplnit jenom ContentPage instancemi nebo ContentPage deriváty.

Naplnit CarouselPage kolekcí stránek

Následující příklad kódu XAML ukazuje CarouselPage , kde se zobrazí tři ContentPage instance:

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

Následující příklad kódu ukazuje ekvivalentní uživatelské rozhraní v jazyce 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);
    }
}

Každá z nich ContentPage jednoduše zobrazí Label konkrétní barvu a BoxView barvu.

Naplnění CarouselPage šablonou

Následující příklad kódu XAML ukazuje konstruovaný objekt CarouselPage přiřazením DataTemplateCarouselPage Xamarin_Forms _MultiPage_1_ItemTemplate "data-LINKTYPE =" absolutní cesta ">ItemTemplate vlastnost, která vrací stránky pro objekty v kolekci:

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

CarouselPageJe naplněna daty nastavením CarouselPage Xamarin_Forms _MultiPage_1_ItemsSource "data-LINKTYPE =" absolutní cesta ">ItemsSource vlastnost v konstruktoru pro soubor s kódem na pozadí:

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

Následující příklad kódu ukazuje ekvivalent CarouselPage vytvořený v jazyce 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;
    }
}

Každá z nich ContentPage jednoduše zobrazí Label konkrétní barvu a BoxView barvu.