Udostępnij za pośrednictwem

Xamarin.Forms Strona karuzeli

  • Artykuł

Xamarin.Forms CarouselPage to strona, którą użytkownicy mogą przesuwać z boku do strony, aby przechodzić między stronami zawartości, takimi jak galeria. W tym artykule pokazano, jak używać strony karuzeli do nawigowania po kolekcji stron.

Ważne

Element CarouselPage został zastąpiony przez CarouselViewelement , który zapewnia układ przewijany, w którym użytkownicy mogą przesuwać palcem, aby przejść przez kolekcję elementów. Aby uzyskać więcej informacji na temat obiektu CarouselView, zobacz Xamarin.Forms CarouselView.

Na poniższych zrzutach ekranu przedstawiono element CarouselPage na każdej platformie:

CarouselPage Trzeci element

Układ obiektu CarouselPage jest identyczny na każdej platformie. Strony można przechodzić, przesuwając palcem od prawej do lewej, aby przechodzić do przodu przez kolekcję, a następnie przesuwając palcem od lewej do prawej, aby przejść do tyłu przez kolekcję. Na poniższych zrzutach ekranu przedstawiono pierwszą stronę w wystąpieniu CarouselPage :

CarouselPage First Item

Przesuwając palcem od prawej do lewej do drugiej strony, jak pokazano na poniższych zrzutach ekranu:

CarouselPage Drugi element

Przesuwając palcem od prawej do lewej ponownie przechodzi do trzeciej strony, przesuwając palcem od lewej do prawej do poprzedniej strony.

Uwaga

Element CarouselPage nie obsługuje wirtualizacji interfejsu użytkownika. W związku z tym wydajność może mieć wpływ, jeśli element CarouselPage zawiera zbyt wiele elementów podrzędnych.

Jeśli obiekt CarouselPage jest osadzony na Detail stronie FlyoutPageobiektu , FlyoutPage.IsGestureEnabled właściwość powinna być ustawiona tak, aby false zapobiec konfliktom gestów między elementem CarouselPage i FlyoutPage.

Aby uzyskać więcej informacji na temat , CarouselPagezobacz rozdział 25 książki Karola Petzolda Xamarin.Forms .

Tworzenie karuzeliPage

Do utworzenia CarouselPageelementu można użyć dwóch metod:

W obu podejściach CarouselPage zostanie wyświetlona każda strona z kolei, a interakcja szybkiego przesunięcia zostanie wyświetlona na następnej stronie.

Uwaga

Obiekt CarouselPage można wypełnić tylko wystąpieniami ContentPage lub ContentPage pochodnymi.

Wypełnianie karuzeliPage kolekcją stron

Poniższy przykład kodu XAML przedstawia kod CarouselPage , który wyświetla trzy ContentPage wystąpienia:

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

Poniższy przykład kodu przedstawia równoważny interfejs użytkownika w języku 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żdy ContentPage po prostu wyświetla element Label dla określonego koloru i tego BoxView koloru.

Wypełnianie karuzeliPage szablonem

Poniższy przykładowy kod XAML przedstawia konstrukcję utworzoną CarouselPage przez przypisanie elementu DataTemplate do ItemTemplate właściwości w celu zwrócenia stron dla obiektów w kolekcji:

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

Obiekt CarouselPage jest wypełniany danymi, ustawiając ItemsSource właściwość w konstruktorze dla pliku za pomocą kodu:

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

Poniższy przykład kodu przedstawia odpowiednik CarouselPage utworzony w języku 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żdy ContentPage po prostu wyświetla element Label dla określonego koloru i tego BoxView koloru.