Xamarin.Forms 마스터-세부 정보 페이지Xamarin.Forms Master-Detail Page

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

Xamarin.Forms MasterDetailPage는 두 개의 관련 정보 페이지를 관리하는 페이지입니다. 이러한 페이지는 항목을 표시하는 마스터 페이지와 이 페이지의 항목에 대한 세부 정보를 표시하는 세부 정보 페이지입니다. 이 문서에서는 MasterDetailPage를 사용하는 방법과 정보 페이지 간에 이동하는 방법을 설명합니다.The Xamarin.Forms MasterDetailPage is a page that manages two related pages of information – a master page that presents items, and a detail page that presents details about items on the master page. This article explains how to use a MasterDetailPage and navigate between its pages of information.

개요Overview

마스터 페이지는 일반적으로 다음 스크린샷과 같이 항목 목록을 표시합니다.A master page typically displays a list of items, as shown in the following screenshots:

항목 목록의 위치는 각 플랫폼에서 동일하며, 항목 중 하나를 선택하면 해당 세부 정보 페이지로 이동합니다.The location of the list of items is identical on each platform, and selecting one of the items will navigate to the corresponding detail page. 또한 마스터 페이지에는 활성 세부 정보 페이지로 이동하는 데 사용할 수 있는 단추가 포함된 탐색 모음이 있습니다.In addition, the master page also features a navigation bar that contains a button that can be used to navigate to the active detail page:

  • iOS의 경우 탐색 모음이 페이지의 위쪽에 있으며, 여기에는 세부 정보 페이지로 이동하는 단추가 있습니다.On iOS, the navigation bar is present at the top of the page and has a button that navigates to the detail page. 또한 마스터 페이지를 왼쪽으로 살짝 밀어 활성 세부 정보 페이지로 이동할 수 있습니다.In addition, the active detail page can be navigated to by swiping the master page to the left.
  • Android의 경우 탐색 모음이 페이지의 위쪽에 있으며, 여기에는 제목, 아이콘 및 세부 정보 페이지로 이동하는 단추가 표시됩니다.On Android, the navigation bar is present at the top of the page and displays a title, an icon, and a button that navigates to the detail page. 아이콘은 Android 플랫폼별 프로젝트에서 MainActivity 클래스를 데코레이팅하는 [Activity] 특성에 정의됩니다.The icon is defined in the [Activity] attribute that decorates the MainActivity class in the Android platform-specific project. 또한 마스터 페이지를 왼쪽으로 살짝 밀거나, 화면의 오른쪽 끝에 있는 세부 정보 페이지를 탭하거나, 화면의 아래쪽에 있는 뒤로 단추를 탭하여 활성 세부 정보 페이지로 이동할 수 있습니다.In addition, the active detail page can be navigated to by swiping the master page to the left, by tapping the detail page at the far right of the screen, and by tapping the Back button at the bottom of the screen.
  • UWP(유니버설 Windows 플랫폼)의 경우 탐색 모음이 페이지의 위쪽에 있으며, 여기에는 세부 정보 페이지로 이동하는 단추가 있습니다.On the Universal Windows Platform (UWP), the navigation bar is present at the top of the page and has a button that navigates to the detail page.

세부 정보 페이지에는 마스터 페이지에서 선택한 항목에 해당하는 데이터가 표시되고, 세부 정보 페이지의 주요 구성 요소는 다음 스크린샷에 표시됩니다.A detail page displays data that corresponds to the item selected on the master page, and the main components of the detail page are shown in the following screenshots:

세부 정보 페이지에는 콘텐츠가 플랫폼에 따라 달라지는 탐색 모음이 있습니다.The detail page contains a navigation bar, whose contents are platform-dependent:

  • iOS의 경우 탐색 모음이 페이지의 위쪽에 있으며, 여기에는 제목이 표시되고, 세부 정보 페이지 인스턴스를 NavigationPage 인스턴스에 래핑하는 경우 마스터 페이지를 반환하는 단추가 있습니다.On iOS, the navigation bar is present at the top of the page and displays a title, and has a button that returns to the master page, provided that the detail page instance is wrapped in the NavigationPage instance. 또한 세부 정보 페이지를 오른쪽으로 살짝 밀어 마스터 페이지를 반환할 수 있습니다.In addition, the master page can be returned to by swiping the detail page to the right.
  • Android의 경우 탐색 모음이 페이지의 위쪽에 있으며, 여기에는 제목, 아이콘 및 마스터 페이지를 반환하는 단추가 표시됩니다.On Android, a navigation bar is present at the top of the page and displays a title, an icon, and a button that returns to the master page. 아이콘은 Android 플랫폼별 프로젝트에서 MainActivity 클래스를 데코레이팅하는 [Activity] 특성에 정의됩니다.The icon is defined in the [Activity] attribute that decorates the MainActivity class in the Android platform-specific project.
  • UWP의 경우 탐색 모음이 페이지의 위쪽에 있으며, 여기에는 제목이 표시되고, 마스터 페이지를 반환하는 단추가 있습니다.On UWP, the navigation bar is present at the top of the page and displays a title, and has a button that returns to the master page.

마스터 페이지와 세부 정보 페이지 간의 탐색 환경 동작은 플랫폼에 따라 다릅니다.The behavior of the navigation experience between master and detail pages is platform dependent:

  • iOS의 경우 마스터 페이지를 왼쪽에서 밀면 세부 정보 페이지가 오른쪽으로 밀리고 세부 정보 페이지의 왼쪽 부분이 계속 표시됩니다.On iOS, the detail page slides to the right as the master page slides from the left, and the left part of the detail page is still visible.
  • Android의 경우 세부 정보 페이지와 마스터 페이지가 서로 겹쳐집니다.On Android, the detail and master pages are overlaid on each other.
  • UWP에서 마스터 페이지는 MasterBehavior 속성이 Popover로 설정된 경우 세부 정보 페이지의 남은 부분에서 슬라이드됩니다.On UWP, the master page slides from the left over part of the detail page, provided that the MasterBehavior property is set to Popover. 자세한 내용은 세부 정보 페이지 표시 동작 제어를 참조하세요.For more information, see Controlling the Detail Page Display Behavior.

iOS와 Android의 마스터 페이지가 세로 모드의 마스터 페이지와 비슷한 너비를 갖고 있으므로 더 많은 세부 페이지가 표시된다는 점을 제외하고는 가로 모드에서도 이와 비슷한 동작이 관찰됩니다.Similar behavior will be observed in landscape mode, except that the master page on iOS and Android has a similar width as the master page in portrait mode, so more of the detail page will be visible.

탐색 동작을 제어하는 방법에 대한 자세한 내용은 세부 정보 페이지의 표시 동작 제어를 참조하세요.For information about controlling the navigation behavior, see Controlling the Detail Page Display Behavior.

MasterDetailPage 만들기Creating a MasterDetailPage

MasterDetailPage에는 각각 마스터 페이지와 세부 정보 페이지를 가져오고 설정하는 데 사용되는 Page 형식의 MasterDetail 속성이 모두 포함됩니다.A MasterDetailPage contains Master and Detail properties that are both of type Page, which are used to get and set the master and detail pages respectively.

중요

MasterDetailPage는 루트 페이지로 설계되었으며, 이 페이지를 다른 페이지 형식의 자식 페이지로 사용하면 예기치 않고 일관되지 않은 동작이 발생할 수 있습니다.A MasterDetailPage is designed to be a root page, and using it as a child page in other page types could result in unexpected and inconsistent behavior. 또한 MasterDetailPage의 마스터 페이지는 항상 ContentPage 인스턴스여야 하며 세부 정보 페이지는 TabbedPage, NavigationPageContentPage 인스턴스로 채워야 하는 것이 좋습니다.In addition, it's recommended that the master page of a MasterDetailPage should always be a ContentPage instance, and that the detail page should only be populated with TabbedPage, NavigationPage, and ContentPage instances. 이렇게 하면 모든 플랫폼에서 일관된 사용자 환경을 보장하는 데 도움이 됩니다.This will help to ensure a consistent user experience across all platforms.

다음 XAML 코드 예제에서는 MasterDetail 속성을 설정하는 MasterDetailPage를 보여 줍니다.The following XAML code example shows a MasterDetailPage that sets the Master and Detail properties:

<MasterDetailPage xmlns="http://xamarin.com/schemas/2014/forms"
                  xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
                  xmlns:local="clr-namespace:MasterDetailPageNavigation;assembly=MasterDetailPageNavigation"
                  x:Class="MasterDetailPageNavigation.MainPage">
    <MasterDetailPage.Master>
        <local:MasterPage x:Name="masterPage" />
    </MasterDetailPage.Master>
    <MasterDetailPage.Detail>
        <NavigationPage>
            <x:Arguments>
                <local:ContactsPage />
            </x:Arguments>
        </NavigationPage>
    </MasterDetailPage.Detail>
</MasterDetailPage>

다음 코드 예제에서는 C#에서 만든 해당 MasterDetailPage를 보여 줍니다.The following code example shows the equivalent MasterDetailPage created in C#:

public class MainPageCS : MasterDetailPage
{
    MasterPageCS masterPage;

    public MainPageCS ()
    {
        masterPage = new MasterPageCS ();
        Master = masterPage;
        Detail = new NavigationPage (new ContactsPageCS ());
        ...
    }
    ...
}

MasterDetailPage.Master 속성이 ContentPage 인스턴스로 설정됩니다.The MasterDetailPage.Master property is set to a ContentPage instance. MasterDetailPage.Detail 속성이 ContentPage 인스턴스가 포함된 NavigationPage로 설정됩니다.The MasterDetailPage.Detail property is set to a NavigationPage containing a ContentPage instance.

마스터 페이지 만들기Creating the Master Page

다음 XAML 코드 예제에서는 MasterDetailPage.Master 속성을 통해 참조되는 MasterPage 개체의 선언을 보여 줍니다.The following XAML code example shows the declaration of the MasterPage object, which is referenced through the MasterDetailPage.Master property:

<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             xmlns:local="using:MasterDetailPageNavigation"
             x:Class="MasterDetailPageNavigation.MasterPage"
             Padding="0,40,0,0"
             IconImageSource="hamburger.png"
             Title="Personal Organiser">
    <StackLayout>
        <ListView x:Name="listView" x:FieldModifier="public">
           <ListView.ItemsSource>
                <x:Array Type="{x:Type local:MasterPageItem}">
                    <local:MasterPageItem Title="Contacts" IconSource="contacts.png" TargetType="{x:Type local:ContactsPage}" />
                    <local:MasterPageItem Title="TodoList" IconSource="todo.png" TargetType="{x:Type local:TodoListPage}" />
                    <local:MasterPageItem Title="Reminders" IconSource="reminders.png" TargetType="{x:Type local:ReminderPage}" />
                </x:Array>
            </ListView.ItemsSource>
            <ListView.ItemTemplate>
                <DataTemplate>
                    <ViewCell>
                        <Grid Padding="5,10">
                            <Grid.ColumnDefinitions>
                                <ColumnDefinition Width="30"/>
                                <ColumnDefinition Width="*" />
                            </Grid.ColumnDefinitions>
                            <Image Source="{Binding IconSource}" />
                            <Label Grid.Column="1" Text="{Binding Title}" />
                        </Grid>
                    </ViewCell>
                </DataTemplate>
            </ListView.ItemTemplate>
        </ListView>
    </StackLayout>
</ContentPage>

이 페이지는 해당 ItemsSource 속성을 MasterPageItem 인스턴스의 배열로 설정하여 XAML의 데이터로 채워지는 ListView로 구성됩니다.The page consists of a ListView that's populated with data in XAML by setting its ItemsSource property to an array of MasterPageItem instances. MasterPageItemTitle, IconSourceTargetType 속성을 정의합니다.Each MasterPageItem defines Title, IconSource, and TargetType properties.

DataTemplate은 각각의 MasterPageItem을 표시하기 위해 ListView.ItemTemplate 속성에 할당됩니다.A DataTemplate is assigned to the ListView.ItemTemplate property, to display each MasterPageItem. DataTemplate에는 ImageLabel로 구성된 ViewCell이 포함됩니다.The DataTemplate contains a ViewCell that consists of an Image and a Label. Image에는 IconSource 속성 값이 표시되고, Label에는 각 MasterPageItem에 대한 Title 속성 값이 표시됩니다.The Image displays the IconSource property value, and the Label displays the Title property value, for each MasterPageItem.

이 페이지에는 해당 TitleIconImageSource 속성이 설정되어 있습니다.The page has its Title and IconImageSource properties set. 세부 정보 페이지에 제목 표시줄이 있으면 아이콘이 세부 정보 페이지에 표시됩니다.The icon will appear on the detail page, provided that the detail page has a title bar. 세부 정보 페이지 인스턴스를 NavigationPage 인스턴스에 래핑하여 iOS에서 이를 활성화해야 합니다.This must be enabled on iOS by wrapping the detail page instance in a NavigationPage instance.

참고

MasterDetailPage.Master 페이지에는 해당 Title 속성이 설정되어 있어야 하며, 그렇지 않으면 예외가 발생합니다.The MasterDetailPage.Master page must have its Title property set, or an exception will occur.

다음 코드 예제에서는 C#에서 만든 해당 페이지를 보여 줍니다.The following code example shows the equivalent page created in C#:

public class MasterPageCS : ContentPage
{
  public ListView ListView { get { return listView; } }

  ListView listView;

  public MasterPageCS ()
  {
    var masterPageItems = new List<MasterPageItem> ();
    masterPageItems.Add (new MasterPageItem {
      Title = "Contacts",
      IconSource = "contacts.png",
      TargetType = typeof(ContactsPageCS)
    });
    masterPageItems.Add (new MasterPageItem {
      Title = "TodoList",
      IconSource = "todo.png",
      TargetType = typeof(TodoListPageCS)
    });
    masterPageItems.Add (new MasterPageItem {
      Title = "Reminders",
      IconSource = "reminders.png",
      TargetType = typeof(ReminderPageCS)
    });

    listView = new ListView {
      ItemsSource = masterPageItems,
      ItemTemplate = new DataTemplate (() => {
        var grid = new Grid { Padding = new Thickness(5, 10) };
        grid.ColumnDefinitions.Add(new ColumnDefinition { Width = new GridLength(30) });
        grid.ColumnDefinitions.Add(new ColumnDefinition { Width = GridLength.Star });

        var image = new Image();
        image.SetBinding(Image.SourceProperty, "IconSource");
        var label = new Label { VerticalOptions = LayoutOptions.FillAndExpand };
        label.SetBinding(Label.TextProperty, "Title");

        grid.Children.Add(image);
        grid.Children.Add(label, 1, 0);

        return new ViewCell { View = grid };
      }),
      SeparatorVisibility = SeparatorVisibility.None
    };

    IconImageSource = "hamburger.png";
    Title = "Personal Organiser";
    Content = new StackLayout
    {
      Children = { listView }
    };
  }
}

다음 스크린샷에서는 각 플랫폼의 마스터 페이지를 보여 줍니다.The following screenshots show the master page on each platform:

세부 정보 페이지 만들기 및 표시Creating and Displaying the Detail Page

MainPage MasterDetailPage 인스턴스에서 ItemSelected 이벤트를 처리할 이벤트 처리기를 등록할 수 있도록 MasterPage 인스턴스에는 해당 ListView 인스턴스를 공개하는 ListView 속성이 포함됩니다.The MasterPage instance contains a ListView property that exposes its ListView instance so that the MainPage MasterDetailPage instance can register an event-handler to handle the ItemSelected event. 이렇게 하면 MainPage 인스턴스에서 Detail 속성을 선택한 ListView 항목을 나타내는 페이지로 설정할 수 있습니다.This enables the MainPage instance to set the Detail property to the page that represents the selected ListView item. 다음 코드 예제에서는 이벤트 처리기를 보여 줍니다.The following code example shows the event-handler:

public partial class MainPage : MasterDetailPage
{
    public MainPage ()
    {
        ...
        masterPage.listView.ItemSelected += OnItemSelected;
    }

    void OnItemSelected (object sender, SelectedItemChangedEventArgs e)
    {
        var item = e.SelectedItem as MasterPageItem;
        if (item != null) {
            Detail = new NavigationPage ((Page)Activator.CreateInstance (item.TargetType));
            masterPage.listView.SelectedItem = null;
            IsPresented = false;
        }
    }
}

OnItemSelected 메서드에서 수행하는 작업은 다음과 같습니다.The OnItemSelected method performs the following actions:

  • ListView 인스턴스에서 SelectedItem을 검색하여 null이 아닌 경우 세부 정보 페이지를 MasterPageItemTargetType 속성에 저장된 페이지 형식의 새 인스턴스로 설정합니다.It retrieves the SelectedItem from the ListView instance, and provided that it's not null, sets the detail page to a new instance of the page type stored in the TargetType property of the MasterPageItem. MasterPageIconImageSource 속성을 통해 참조된 아이콘이 iOS의 세부 정보 페이지에 표시되도록 페이지 형식이 NavigationPage 인스턴스에 래핑됩니다.The page type is wrapped in a NavigationPage instance to ensure that the icon referenced through the IconImageSource property on the MasterPage is shown on the detail page in iOS.
  • 다음에 MasterPage가 표시되면 ListView 항목이 선택되지 않도록 ListView에서 선택한 항목이 null로 설정됩니다.The selected item in the ListView is set to null to ensure that none of the ListView items will be selected next time the MasterPage is presented.
  • 세부 정보 페이지는 MasterDetailPage.IsPresented 속성을 false로 설정하여 사용자에게 표시됩니다.The detail page is presented to the user by setting the MasterDetailPage.IsPresented property to false. 이 속성은 마스터 페이지 또는 세부 정보 페이지의 표시 여부를 제어합니다.This property controls whether the master or detail page is presented. 마스터 페이지를 표시하려면 true로 설정하고, 세부 정보 페이지를 표시하려면 false로 설정해야 합니다.It should be set to true to display the master page, and to false to display the detail page.

다음 스크린샷에서는 마스터 페이지에서 선택한 후에 표시되는 ContactPage 세부 정보 페이지를 보여 줍니다.The following screenshots show the ContactPage detail page, which is shown after it's been selected on the master page:

세부 정보 페이지의 표시 동작 제어Controlling the Detail Page Display Behavior

MasterDetailPage에서 마스터 페이지 및 세부 정보 페이지를 관리하는 방법은 애플리케이션이 휴대폰 또는 태블릿에서 실행 중인지 여부, 디바이스의 방향 및 MasterBehavior 속성의 값에 따라 달라진다.How the MasterDetailPage manages the master and detail pages depends on whether the application is running on a phone or tablet, the orientation of the device, and the value of the MasterBehavior property. 이 속성은 세부 정보 페이지를 표시하는 방법을 결정합니다.This property determines how the detail page will be displayed. 가능한 값은 다음과 같습니다.It's possible values are:

  • Default – 페이지가 플랫폼 기본값을 사용하여 표시됩니다.Default – The pages are displayed using the platform default.
  • Popover – 세부 정보 페이지에서 마스터 페이지의 전체 또는 일부를 덮습니다.Popover – The detail page covers, or partially covers the master page.
  • Split – 마스터 페이지가 왼쪽에 표시되고, 세부 정보 페이지는 오른쪽에 표시됩니다.Split – The master page is displayed on the left and the detail page is on the right.
  • SplitOnLandscape – 디바이스가 가로 방향일 때 분할 화면이 사용됩니다.SplitOnLandscape – A split screen is used when the device is in landscape orientation.
  • SplitOnPortrait – 디바이스가 세로 방향일 때 분할 화면이 사용됩니다.SplitOnPortrait – A split screen is used when the device is in portrait orientation.

다음 XAML 코드 예제에서는 MasterBehavior 속성을 MasterDetailPage에 설정하는 방법을 보여 줍니다.The following XAML code example demonstrates how to set the MasterBehavior property on a MasterDetailPage:

<?xml version="1.0" encoding="UTF-8"?>
<MasterDetailPage xmlns="http://xamarin.com/schemas/2014/forms"
                  xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
                  x:Class="MasterDetailPageNavigation.MainPage"
                  MasterBehavior="Popover">
  ...
</MasterDetailPage>

다음 코드 예제에서는 C#에서 만든 해당 MasterDetailPage를 보여 줍니다.The following code example shows the equivalent MasterDetailPage created in C#:

public class MainPageCS : MasterDetailPage
{
    MasterPageCS masterPage;

    public MainPageCS ()
    {
        MasterBehavior = MasterBehavior.Popover;
        ...
    }
}

그러나 MasterBehavior 속성의 값은 태블릿 또는 데스크톱에서 실행되는 애플리케이션에만 영향을 줍니다.However, the value of the MasterBehavior property only affects applications running on tablets or the desktop. 휴대폰에서 실행되는 애플리케이션에는 항상 Popover 동작이 있습니다.Applications running on phones always have the Popover behavior.

요약Summary

이 문서에서는 MasterDetailPage를 사용하고 해당 정보 페이지 간에 이동하는 방법을 보여 주었습니다.This article demonstrated how to use a MasterDetailPage and navigate between its pages of information. Xamarin.Forms MasterDetailPage는 두 개의 관련 정보 페이지를 관리하는 페이지입니다. 이러한 페이지는 항목을 표시하는 마스터 페이지와 이 페이지의 항목에 대한 세부 정보를 표시하는 세부 정보 페이지입니다.The Xamarin.Forms MasterDetailPage is a page that manages two pages of related information – a master page that presents items, and a detail page that presents details about items on the master page.