Xamarin.Forms 회전식 페이지Xamarin.Forms Carousel Page

샘플 다운로드 샘플 다운로드Download Sample Download the sample

Xamarin.Forms CarouselPage는 사용자가 옆으로 살짝 밀어서 갤러리와 같은 콘텐츠 페이지를 탐색할 수 있는 페이지입니다. 이 문서에서는 페이지의 컬렉션을 탐색 하려면 CarouselPage를 사용하는 방법을 설명합니다.The Xamarin.Forms CarouselPage is a page that users can swipe from side to side to navigate through pages of content, like a gallery. This article demonstrates how to use a CarouselPage to navigate through a collection of pages.

중요

CarouselPageCarouselView로 대체되었습니다. CarouselView는 사용자가 스와이프하여 항목 컬렉션 간에 이동할 수 있는 스크롤 가능 레이아웃을 제공합니다.The CarouselPage has been superseded by the CarouselView, which provides a scrollable layout where users can swipe to move through a collection of items. CarouselView에 대한 자세한 내용은 Xamarin.Forms CarouselView를 참조하세요.For more information about the CarouselView, see Xamarin.Forms CarouselView.

다음 스크린샷은 각 플랫폼에서 CarouselPage를 보여줍니다.The following screenshots show a CarouselPage on each platform:

CarouselPage의 레이아웃은 각 플랫폼에서 동일합니다.The layout of a CarouselPage is identical on each platform. 컬렉션을 통해 앞으로 이동하려면 오른쪽에서 왼쪽으로 살짝 밀고 컬렉션을 통해 뒤로 이동하려면 왼쪽에서 오른쪽을 살짝 밀어 페이지를 탐색할 수 있습니다.Pages can be navigated through by swiping right to left to navigate forwards through the collection, and by swiping left to right to navigate backwards through the collection. 다음 스크린샷에서는 CarouselPage 인스턴스의 첫 번째 페이지를 보여줍니다.The following screenshots show the first page in a CarouselPage instance:

다음 스크린샷에 표시된 것처럼 오른쪽에서 왼쪽으로 살짝 밀어 두 번째 페이지로 이동합니다.Swiping from right to left moves to the second page, as shown in the following screenshots:

다시 오른쪽에서 왼쪽으로 살짝 밀면 세 번째 페이지로 이동하는 반면 왼쪽에서 오른쪽으로 살짝 밀면 이전 페이지로 되돌아갑니다.Swiping from right to left again moves to the third page, while swiping from left to right returns to the previous page.

참고

CarouselPage는 UI 가상화를 지원하지 않습니다.The CarouselPage does not support UI virtualization. 따라서 CarouselPage에 너무 많은 자식 요소가 포함된 경우 성능에 영향을 미칠 수 있습니다.Therefore, performance may be affected if the CarouselPage contains too many child elements.

CarouselPageMasterDetailPageDetail 페이지에 포함된 경우 MasterDetailPage.IsGestureEnabled 속성을 false로 설정하여 CarouselPageMasterDetailPage 간에 제스처 충돌을 방지해야 합니다.If a CarouselPage is embedded into the Detail page of a MasterDetailPage, the MasterDetailPage.IsGestureEnabled property should be set to false to prevent gesture conflicts between the CarouselPage and the MasterDetailPage.

CarouselPage에 대한 자세한 내용은 Charles Petzold의 Xamarin.Forms 책의 챕터 25을 참조하세요.For more information about the CarouselPage, see Chapter 25 of Charles Petzold's Xamarin.Forms book.

CarouselPage 만들기Create a CarouselPage

두 방법을 CarouselPage를 만드는 데 사용할 수 있습니다.Two approaches can be used to create a CarouselPage:

두 방법 모두를 사용하면 CarouselPage에는 표시될 다음 페이지로 이동하는 살짝 밀기 상호 작용을 통해 각 페이지가 차례로 표시됩니다.With both approaches, the CarouselPage will then display each page in turn, with a swipe interaction moving to the next page to be displayed.

참고

CarouselPageContentPage 인스턴스 또는 ContentPage 파생물로만 채울 수 있습니다.A CarouselPage can only be populated with ContentPage instances, or ContentPage derivatives.

페이지 컬렉션으로 CarouselPage 채우기Populate a CarouselPage with a Page collection

다음 XAML 코드 예제에서는 세 개 ContentPage 인스턴스가 표시되는 CarouselPage를 보여줍니다.The following XAML code example shows a CarouselPage that displays three ContentPage instances:

<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를 보여줍니다.The following code example shows the equivalent UI in 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를 표시합니다.Each ContentPage simply displays a Label for a particular color and a BoxView of that color.

템플릿으로 CarouselPage 채우기Populate a CarouselPage with a template

다음 XAML 코드 예제에서는 컬렉션의 개체에 대해 페이지를 반환하도록 DataTemplateItemTemplate 속성에 할당하여 생성된 CarouselPage를 보여줍니다.The following XAML code example shows a CarouselPage constructed by assigning a DataTemplate to the ItemTemplate property to return pages for objects in the collection:

<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 속성을 설정하여 데이터로 채웁니다.The CarouselPage is populated with data by setting the ItemsSource property in the constructor for the code-behind file:

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

다음 코드 예제에서는 C#에서 만든 해당 CarouselPage를 보여줍니다.The following code example shows the equivalent CarouselPage created in 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를 표시합니다.Each ContentPage simply displays a Label for a particular color and a BoxView of that color.