Xamarin.Forms 모달 페이지Xamarin.Forms Modal Pages

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

Xamarin.Forms는 모달 페이지를 지원합니다. 모달 페이지는 사용자가 작업이 완료되거나 취소될 때까지 다른 부분으로 이동할 수 없는 자체 포함된 작업을 완료하도록 권장합니다. 이 문서에서는 모달 페이지를 탐색하는 방법을 설명합니다.Xamarin.Forms provides support for modal pages. A modal page encourages users to complete a self-contained task that cannot be navigated away from until the task is completed or cancelled. This article demonstrates how to navigate to modal pages.

이 문서에서는 다음 토픽을 설명합니다.This article discusses the following topics:

  • 탐색 수행 – 모달 스택에 페이지를 푸시하고, 모달 스택에서 페이지를 팝하고, 뒤로 단추를 사용하지 않도록 설정하고, 페이지 전환에 애니메이션을 적용합니다.Performing navigation – pushing pages to the modal stack, popping pages from the modal stack, disabling the back button, and animating page transitions.
  • 탐색할 때 데이터를 전달 – 페이지 생성자 및 BindingContext를 통해 데이터를 전달합니다.Passing data when navigating – passing data through a page constructor, and through a BindingContext.

개요Overview

모달 페이지는 Xamarin.Forms에서 지원하는 페이지 형식이라면 어떤 것이든 될 수 있습니다.A modal page can be any of the Page types supported by Xamarin.Forms. 모달 페이지를 표시하려면 애플리케이션은 다음 다이어그램에 나온 것처럼 새 페이지를 모달 스택으로 푸시하여 활성 페이지가 되게 합니다.To display a modal page the application will push it onto the modal stack, where it will become the active page, as shown in the following diagram:

이전 페이지로 돌아가기 위해 애플리케이션은 다음 다이어그램에 나온 것처럼 모달 스택에서 현재 페이지를 팝하고 맨 위에 있는 새 페이지가 활성 페이지가 됩니다.To return to the previous page the application will pop the current page from the modal stack, and the new topmost page becomes the active page, as shown in the following diagram:

탐색 수행Performing Navigation

모달 탐색 메서드는 모든 Page 파생 형식의 Navigation 속성에 의해 노출됩니다.Modal navigation methods are exposed by the Navigation property on any Page derived types. 이러한 메서드는 모달 스택으로 모달 페이지를 푸시하고, 모달 스택에서 모달 페이지를 팝하는 기능을 제공합니다.These methods provide the ability to push modal pages onto the modal stack, and pop modal pages from the modal stack.

Navigation 속성은 또한 모달 스택의 모달 페이지를 얻을 수 있는 ModalStack 속성을 노출합니다.The Navigation property also exposes a ModalStack property from which the modal pages in the modal stack can be obtained. 그러나 모달 스택 조작을 수행하거나 모달 탐색에서 루트 페이지에 빼(pop)는 개념은 없습니다.However, there is no concept of performing modal stack manipulation, or popping to the root page in modal navigation. 이러한 작업이 기본 플랫폼에서 보편적으로 지원되지 않기 때문입니다.This is because these operations are not universally supported on the underlying platforms.

참고

NavigationPage 인스턴스는 모달 페이지 탐색을 수행하는 데 필요하지 않습니다.A NavigationPage instance is not required for performing modal page navigation.

페이지를 모달 스택에 푸시Pushing Pages to the Modal Stack

ModalPage로 이동하려면 다음 코드 예제에서 설명한 것처럼 현재 페이지의 Navigation 속성에서 PushModalAsync 메서드를 호출해야 합니다.To navigate to the ModalPage it is necessary to invoke the PushModalAsync method on the Navigation property of the current page, as demonstrated in the following code example:

async void OnItemSelected (object sender, SelectedItemChangedEventArgs e)
{
  if (listView.SelectedItem != null) {
    var detailPage = new DetailPage ();
    ...
    await Navigation.PushModalAsync (detailPage);
  }
}

따라서 MainPage 인스턴스의 ListView에서 항목이 선택된 경우 ModalPage 인스턴스가 활성 페이지가 되는 모달 스택으로 푸시됩니다.This causes the ModalPage instance to be pushed onto the modal stack, where it becomes the active page, provided that an item has been selected in the ListView on the MainPage instance. ModalPage 인스턴스는 다음 스크린샷과 같이 표시됩니다.The ModalPage instance is shown in the following screenshots:

PushModalAsync가 호출되는 경우 다음 이벤트가 발생합니다.When PushModalAsync is invoked, the following events occur:

  • 기본 플랫폼이 Android가 아닌 경우 PushModalAsync를 호출하는 페이지에서 해당 OnDisappearing 재정의가 호출됩니다.The page calling PushModalAsync has its OnDisappearing override invoked, provided that the underlying platform isn't Android.
  • 탐색 중인 페이지에서는 OnAppearing 재정의가 호출됩니다.The page being navigated to has its OnAppearing override invoked.
  • PushAsync 작업이 완료됩니다.The PushAsync task completes.

그러나 이러한 이벤트가 발생하는 정확한 순서는 플랫폼에 따라 다릅니다.However, the precise order that these events occur is platform dependent. 자세한 내용은 Charles Petzold의 Xamarin.Forms 책 24장을 참조하세요.For more information, see Chapter 24 of Charles Petzold's Xamarin.Forms book.

참고

OnDisappearingOnAppearing 재정의에 대한 호출을 페이지 탐색의 보장된 표시로 다룰 수는 없습니다.Calls to the OnDisappearing and OnAppearing overrides cannot be treated as guaranteed indications of page navigation. 예를 들어 iOS에서 OnDisappearing 재정의는 애플리케이션이 종료될 때 활성 페이지에 호출됩니다.For example, on iOS, the OnDisappearing override is called on the active page when the application terminates.

모달 스택에서 페이지 팝Popping Pages from the Modal Stack

활성 페이지는 디바이스의 뒤로 단추(디바이스의 물리적 단추이든 화면상 단추이든 관계 없음)를 눌러 모달 스택에서 팝할 수 있습니다.The active page can be popped from the modal stack by pressing the Back button on the device, regardless of whether this is a physical button on the device or an on-screen button.

프로그래밍 방식으로 원래 페이지로 돌아가려면 ModalPage 개체가 다음 코드 예제에서 설명한 것처럼 PopModalAsync 메서드를 호출해야 합니다.To programmatically return to the original page, the ModalPage instance must invoke the PopModalAsync method, as demonstrated in the following code example:

async void OnDismissButtonClicked (object sender, EventArgs args)
{
  await Navigation.PopModalAsync ();
}

그러면 ModalPage 인스턴스가 모달 스택에서 제거되어 맨 위에 있는 새 페이지가 활성 페이지가 됩니다.This causes the ModalPage instance to be removed from the modal stack, with the new topmost page becoming the active page. PopModalAsync가 호출되는 경우 다음 이벤트가 발생합니다.When PopModalAsync is invoked, the following events occur:

  • PopModalAsync를 호출하는 페이지에서는 해당 OnDisappearing 재정의가 호출됩니다.The page calling PopModalAsync has its OnDisappearing override invoked.
  • 기본 플랫폼이 Android가 아닌 경우 반환되는 페이지에서는 해당 OnAppearing 재정의가 호출됩니다.The page being returned to has its OnAppearing override invoked, provided that the underlying platform isn't Android.
  • PopModalAsync 작업이 반환됩니다.The PopModalAsync task returns.

그러나 이러한 이벤트가 발생하는 정확한 순서는 플랫폼에 따라 다릅니다.However, the precise order that these events occur is platform dependent. 자세한 내용은 Charles Petzold의 Xamarin.Forms 책 24장을 참조하세요.For more information, see Chapter 24 of Charles Petzold's Xamarin.Forms book.

뒤로 단추 사용 안 함Disabling the Back Button

Android에서 사용자는 항상 디바이스에서 표준 뒤로 단추를 눌러 이전 페이지를 반환할 수 있습니다.On Android, the user can always return to the previous page by pressing the standard Back button on the device. 모달 페이지에서 사용자가 페이지를 나가기 전에 자체 포함된 작업을 완료해야 하는 경우 애플리케이션은 뒤로 단추를 사용하지 않도록 설정해야 합니다.If the modal page requires the user to complete a self-contained task before leaving the page, the application must disable the Back button. 이 작업은 모달 페이지에서 Page.OnBackButtonPressed 메서드를 재정의하여 수행할 수 있습니다.This can be accomplished by overriding the Page.OnBackButtonPressed method on the modal page. 자세한 내용은 Charles Petzold의 Xamarin.Forms 책 24장을 참조하세요.For more information see Chapter 24 of Charles Petzold's Xamarin.Forms book.

페이지 전환에 애니메이션 적용Animating Page Transitions

각 페이지의 Navigation 속성은 또한 다음 코드 예제에 나온 것처럼 탐색하는 동안 페이지 애니메이션을 표시할지 여부를 제어하는 boolean 매개 변수가 포함된 재정의 푸시 및 팝 메서드를 제공합니다.The Navigation property of each page also provides overridden push and pop methods that include a boolean parameter that controls whether to display a page animation during navigation, as shown in the following code example:

async void OnNextPageButtonClicked (object sender, EventArgs e)
{
  // Page appearance not animated
  await Navigation.PushModalAsync (new DetailPage (), false);
}

async void OnDismissButtonClicked (object sender, EventArgs args)
{
  // Page appearance not animated
  await Navigation.PopModalAsync (false);
}

기본 플랫폼에서 지원되는 경우 매개 변수를 true로 설정하면 페이지 전환 애니메이션을 사용하도록 설정되고, boolean 매개 변수를 false로 설정하면 페이지 전환 애니메이션을 사용하지 않도록 설정됩니다.Setting the boolean parameter to false disables the page-transition animation, while setting the parameter to true enables the page-transition animation, provided that it is supported by the underlying platform. 그러나 이 매개 변수가 없는 푸시 및 팝 메서드는 기본적으로 애니메이션을 사용하도록 설정합니다.However, the push and pop methods that lack this parameter enable the animation by default.

탐색 시 데이터 전달Passing Data when Navigating

경우에 따라 페이지에서 탐색하는 동안 다른 페이지로 데이터를 전달해야 합니다.Sometimes it's necessary for a page to pass data to another page during navigation. 페이지 생성자를 통해 데이터를 전달하는 방법과 새 페이지의 BindingContext를 데이터로 설정하는 방법의 두 방법으로 이 작업을 수행할 수 있습니다.Two techniques for accomplishing this are by passing data through a page constructor, and by setting the new page's BindingContext to the data. 각 방법을 이제 차례차례 설명하겠습니다.Each will now be discussed in turn.

페이지 생성자를 통해 데이터 전달Passing Data through a Page Constructor

탐색하는 동안 다른 페이지로 데이터를 전달하기 위한 가장 간단한 방법은 다음 코드 예제에 나와 있는 페이지 생성자 매개 변수를 통하는 것입니다.The simplest technique for passing data to another page during navigation is through a page constructor parameter, which is shown in the following code example:

public App ()
{
  MainPage = new MainPage (DateTime.Now.ToString ("u")));
}

이 코드는 ISO8601 형식의 현재 날짜 및 시간으로 전달하는 MainPage 인스턴스를 생성합니다.This code creates a MainPage instance, passing in the current date and time in ISO8601 format.

MainPage 인스턴스는 다음 코드 예제에 나온 것처럼 생성자 매개 변수를 통해 데이터를 수신합니다.The MainPage instance receives the data through a constructor parameter, as shown in the following code example:

public MainPage (string date)
{
  InitializeComponent ();
  dateLabel.Text = date;
}

그런 다음, Label.Text 속성을 설정하여 데이터를 페이지에 표시합니다.The data is then displayed on the page by setting the Label.Text property.

BindingContext를 통해 데이터 전달Passing Data through a BindingContext

탐색하는 동안 다른 페이지로 데이터를 전달하는 또 다른 방법은 다음 코드 예제에 표시된 대로 새 페이지의 BindingContext를 데이터로 설정하는 것입니다.An alternative approach for passing data to another page during navigation is by setting the new page's BindingContext to the data, as shown in the following code example:

async void OnItemSelected (object sender, SelectedItemChangedEventArgs e)
{
  if (listView.SelectedItem != null) {
    var detailPage = new DetailPage ();
    detailPage.BindingContext = e.SelectedItem as Contact;
    listView.SelectedItem = null;
    await Navigation.PushModalAsync (detailPage);
  }
}

이 코드는 DetailPage 인스턴스의 BindingContextContact 인스턴스로 설정한 다음, DetailPage로 이동합니다.This code sets the BindingContext of the DetailPage instance to the Contact instance, and then navigates to the DetailPage.

그런 다음, 다음 XAML 코드 예제에 표시된 대로 DetailPage는 데이터 바인딩을 사용하여 Contact 인스턴스 데이터를 표시합니다.The DetailPage then uses data binding to display the Contact instance data, as shown in the following XAML code example:

<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             x:Class="ModalNavigation.DetailPage">
    <ContentPage.Padding>
      <OnPlatform x:TypeArguments="Thickness">
        <On Platform="iOS" Value="0,40,0,0" />
      </OnPlatform>
    </ContentPage.Padding>
    <ContentPage.Content>
        <StackLayout HorizontalOptions="Center" VerticalOptions="Center">
            <StackLayout Orientation="Horizontal">
                <Label Text="Name:" FontSize="Medium" HorizontalOptions="FillAndExpand" />
                <Label Text="{Binding Name}" FontSize="Medium" FontAttributes="Bold" />
            </StackLayout>
              ...
            <Button x:Name="dismissButton" Text="Dismiss" Clicked="OnDismissButtonClicked" />
        </StackLayout>
    </ContentPage.Content>
</ContentPage>

다음 코드 예제는 C#에서 데이터 바인딩이 어떻게 수행되는지를 보여줍니다.The following code example shows how the data binding can be accomplished in C#:

public class DetailPageCS : ContentPage
{
  public DetailPageCS ()
  {
    var nameLabel = new Label {
      FontSize = Device.GetNamedSize (NamedSize.Medium, typeof(Label)),
      FontAttributes = FontAttributes.Bold
    };
    nameLabel.SetBinding (Label.TextProperty, "Name");
    ...
    var dismissButton = new Button { Text = "Dismiss" };
    dismissButton.Clicked += OnDismissButtonClicked;

    Thickness padding;
    switch (Device.RuntimePlatform)
    {
        case Device.iOS:
            padding = new Thickness(0, 40, 0, 0);
            break;
        default:
            padding = new Thickness();
            break;
    }

    Padding = padding;
    Content = new StackLayout {
      HorizontalOptions = LayoutOptions.Center,
      VerticalOptions = LayoutOptions.Center,
      Children = {
        new StackLayout {
          Orientation = StackOrientation.Horizontal,
          Children = {
            new Label{ Text = "Name:", FontSize = Device.GetNamedSize (NamedSize.Medium, typeof(Label)), HorizontalOptions = LayoutOptions.FillAndExpand },
            nameLabel
          }
        },
        ...
        dismissButton
      }
    };
  }

  async void OnDismissButtonClicked (object sender, EventArgs args)
  {
    await Navigation.PopModalAsync ();
  }
}

그런 다음, 일련의 Label 컨트롤로 데이터를 페이지에 표시합니다.The data is then displayed on the page by a series of Label controls.

데이터 바인딩에 대한 자세한 내용은 데이터 바인딩 기본을 참조하세요.For more information about data binding, see Data Binding Basics.

요약Summary

이 문서에서는 모달 페이지를 탐색하는 방법을 설명했습니다.This article demonstrated how to navigate to modal pages. 모달 페이지는 사용자가 작업이 완료되거나 취소될 때까지 다른 부분으로 이동할 수 없는 자체 포함된 작업을 완료하도록 권장합니다.A modal page encourages users to complete a self-contained task that cannot be navigated away from until the task is completed or cancelled.