Teilen über

Xamarin.Forms-CarouselPage

  • Artikel

Die Xamarin.Forms-CarouselPage ist eine Seite, die Benutzer hin und her wischen können, um durch Inhaltsseiten wie durch einen Katalog zu navigieren. In diesem Artikel wird gezeigt, wie Sie mit einer CarouselPage durch eine Sammlung von Seiten navigieren können.

Wichtig

Die CarouselPage-Klasse wurde durch die CarouselView-Klasse ersetzt. Diese bietet ein scrollbares Layout, bei dem Benutzer durch Wischen durch eine Auflistung von Elementen navigieren können. Weitere Informationen zu CarouselView finden Sie unter Xamarin.Forms CarouselView.

Die folgenden Screenshots zeigen eine CarouselPage-Klasse auf jeder Plattform:

CarouselPage, drittes Element

Das Layout einer CarouselPage-Klasse ist auf jeder Plattform identisch. Sie können durch Wischen von rechts nach links vorwärts durch die Sammlung navigieren oder durch Wischen von links nach rechts rückwärts durch die Sammlung navigieren. Die folgenden Screenshots zeigen die erste Seite in einer CarouselPage-Instanz:

CarouselPage, erstes Element

Durch Wischen von rechts nach links gelangen Sie wie in den folgenden Screenshots gezeigt auf die zweite Seite:

CarouselPage, zweites Element

Durch erneutes Wischen von rechts nach links gelangen Sie zur dritten Seite, durch Wischen von links nach rechts hingegen auf die vorherige Seite.

Hinweis

Die CarouselPage-Klasse unterstützt keine Benutzeroberflächenvirtualisierung. Deshalb kann die Leistung beeinträchtigt werden, wenn die CarouselPage-Klasse zu viele untergeordnete Elemente enthält.

Wenn eine CarouselPage-Klasse in die Detail-Seite einer FlyoutPage-Klasse eingebettet ist, sollte die FlyoutPage.IsGestureEnabled-Eigenschaft auf false festgelegt werden, um Gestenkonflikte zwischen CarouselPage und FlyoutPage zu vermeiden.

Weitere Informationen zur CarouselPage-Klasse finden Sie in Kapitel 25 im Xamarin.Forms-Buch von Charles Petzold.

Erstellen einer CarouselPage

Es gibt zwei Ansätze zum Erstellen einer CarouselPage-Klasse:

Bei beiden Ansätzen zeigt die CarouselPage-Klasse dann Seite um Seite an, wobei durch Wischen zur nächsten anzuzeigenden Seite gewechselt werden kann.

Hinweis

Eine CarouselPage-Klasse kann nur mit ContentPage-Instanzen oder ContentPage-Ableitungen aufgefüllt werden.

Auffüllen einer CarouselPage mit einer Page-Sammlung

Das folgende XAML-Codebeispiel zeigt eine CarouselPage-Klasse mit drei ContentPage-Instanzen:

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

Im folgenden Codebeispiel wird die entsprechende Benutzeroberfläche in C# dargestellt:

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

Jede ContentPage-Klasse zeigt einfach eine Label-Klasse für eine bestimmte Farbe und eine BoxView-Klasse dieser Farbe an.

Auffüllen einer CarouselPage mit einer Vorlage

Das folgende XAML-Codebeispiel zeigt eine CarouselPage-Klasse, die durch Zuweisen einer DataTemplate-Klasse zur ItemTemplate-Eigenschaft erstellt wurde, um Seiten für Objekte in der Collection zurückzugeben:

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

Die CarouselPage-Klasse wird mit Daten aufgefüllt, indem die ItemsSource-Eigenschaft im Konstruktor für die CodeBehind-Datei festgelegt wird:

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

Im folgenden Codebeispiel wird die entsprechende CarouselPage-Klasse in C# dargestellt:

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

Jede ContentPage-Klasse zeigt einfach eine Label-Klasse für eine bestimmte Farbe und eine BoxView-Klasse dieser Farbe an.