Бөлісу құралы:

Страница карусели в Xamarin.Forms

  • Мақала

CarouselPage в Xamarin.Forms — это страница, по которой пользователи могут проводить из стороны в сторону, чтобы переходить по страницам содержимого, например по страницам коллекции. В этой статье демонстрируется использование CarouselPage для перехода по коллекции страниц.

Внимание

CarouselPage был заменен на CarouselView, предоставляющий прокручиваемый макет, в котором пользователи могут перемещаться по коллекции элементов, проводя пальцем. Дополнительные сведения о CarouselView см. в разделе Xamarin.Forms CarouselView.

На следующих снимках экрана показана страница CarouselPage на каждой платформе.

Третий элемент CarouselPage

Макет CarouselPage одинаков на каждой платформе. По страницам можно переходить, проводя по экрану вправо для перехода вперед по коллекции или влево для перехода назад. На следующих снимках экрана показана первая страница в экземпляре CarouselPage.

Первый элемент CarouselPage

Если провести по экрану пальцем справа налево, будет выполнен переход ко второй странице, как показано на следующих снимках экрана.

Второй элемент CarouselPage

Если провести по экрану пальцем справа налево еще раз, будет выполнен переход к третьей странице, а если провести слева направо, то вы вернетесь к предыдущей странице.

Примечание.

CarouselPage не поддерживает виртуализацию пользовательского интерфейса. Поэтому, если CarouselPage содержит слишком много дочерних элементов, производительность может снижаться.

Если объект CarouselPage внедрен на страницу Detail страницы FlyoutPage, свойству FlyoutPage.IsGestureEnabled необходимо присвоить значение false, чтобы предотвратить конфликты жестов между CarouselPage и FlyoutPage.

Дополнительные сведения о CarouselPage см. в главе 25 книги о Xamarin.Forms Чарльза Петцольда (Charles Petzold).

Создание CarouselPage

Создать CarouselPage можно двумя способами:

Оба способа приводят к тому, что в CarouselPage страницы будут отображаться по очереди. При проведении пальцем по экрану будет выполняться переход к следующей странице.

Примечание.

CarouselPage можно заполнять только экземплярами ContentPage или производными объектами ContentPage.

Заполнение CarouselPage коллекцией страниц

В следующем примере кода XAML показан объект CarouselPage, отображающий три экземпляра ContentPage.

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

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

В следующем примере кода создается эквивалентный объект CarouselPage на языке 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;
    }
}

На каждой странице ContentPage отображается элемент Label для соответствующего цвета и элемент BoxView этого цвета.