다음을 통해 공유


Xamarin.Forms 회전식 페이지

Xamarin.Forms CarouselPage는 사용자가 옆으로 살짝 밀어서 갤러리와 같은 콘텐츠 페이지를 탐색할 수 있는 페이지입니다. 이 문서에서는 페이지의 컬렉션을 탐색 하려면 CarouselPage를 사용하는 방법을 설명합니다.

Important

CarouselPageCarouselView로 대체되었습니다. CarouselView는 사용자가 스와이프하여 항목 컬렉션 간에 이동할 수 있는 스크롤 가능 레이아웃을 제공합니다. CarouselView에 대한 자세한 내용은 Xamarin.Forms CarouselView를 참조하세요.

다음 스크린샷은 각 플랫폼에서 CarouselPage를 보여줍니다.

CarouselPage 세 번째 항목

CarouselPage의 레이아웃은 각 플랫폼에서 동일합니다. 컬렉션을 통해 앞으로 이동하려면 오른쪽에서 왼쪽으로 살짝 밀고 컬렉션을 통해 뒤로 이동하려면 왼쪽에서 오른쪽을 살짝 밀어 페이지를 탐색할 수 있습니다. 다음 스크린샷에서는 CarouselPage 인스턴스의 첫 번째 페이지를 보여줍니다.

CarouselPage 첫 번째 항목

다음 스크린샷에 표시된 것처럼 오른쪽에서 왼쪽으로 살짝 밀어 두 번째 페이지로 이동합니다.

CarouselPage 두 번째 항목

다시 오른쪽에서 왼쪽으로 살짝 밀면 세 번째 페이지로 이동하는 반면 왼쪽에서 오른쪽으로 살짝 밀면 이전 페이지로 되돌아갑니다.

참고 항목

CarouselPage는 UI 가상화를 지원하지 않습니다. 따라서 CarouselPage에 너무 많은 자식 요소가 포함된 경우 성능에 영향을 미칠 수 있습니다.

CarouselPageFlyoutPageDetail 페이지에 포함된 경우 FlyoutPage.IsGestureEnabled 속성을 false로 설정하여 CarouselPageFlyoutPage 간에 제스처 충돌을 방지해야 합니다.

CarouselPage에 대한 자세한 내용은 Charles Petzold의 Xamarin.Forms 책의 25장을 참조하세요.

CarouselPage 만들기

두 방법을 CarouselPage를 만드는 데 사용할 수 있습니다.

두 방법 모두를 사용하면 CarouselPage에는 표시될 다음 페이지로 이동하는 살짝 밀기 상호 작용을 통해 각 페이지가 차례로 표시됩니다.

참고 항목

CarouselPageContentPage 인스턴스 또는 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 코드 예제에서는 컬렉션의 개체에 대해 페이지를 반환하도록 DataTemplateItemTemplate 속성에 할당하여 생성된 CarouselPage를 보여줍니다.

<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를 표시합니다.