언어: HTML | XAML

빠른 시작: 페이지 간 탐색(XAML)

Applies to Windows and Windows Phone

이 항목에서는 기본 탐색 개념을 설명하고 두 페이지 간에 탐색하는 앱을 만드는 방법을 소개합니다.

앱에 가장 적합한 탐색 패턴을 선택하는 방법을 보려면 탐색 패턴을 참조하세요.

앱 기능 전체 프로세스 시리즈의 일부로 플랫 탐색계층적 탐색 패턴의 작동 방법을 살펴보세요.

로드맵: 이 항목은 다음 항목과 연관되어 있습니다. 참고 항목:

앱에 사용할 여러 페이지를 만들고, 단일 웹 사이트에서 페이지 간에 탐색하는 방법과 유사하게 앱 내에서 사용자가 페이지 간에 탐색하도록 지원할 수 있습니다. Microsoft Visual Studio는 C# 또는 Microsoft Visual Basic으로 작성한 Windows 런타임 앱의 기본 탐색을 지원하는 페이지 템플릿을 제공합니다. 이 항목에서는 페이지 템플릿을 사용해 탐색을 지원하는 간단한 앱을 만듭니다.

참고  

Windows 런타임 앱에서 탐색이란 앱 간의 탐색이 아니라 앱 내 페이지 간의 탐색을 의미합니다.

사전 요구 사항

여기서는 C# 또는 Visual Basic로 작성한 기본 Windows 런타임 앱을 만들 수 있다고 가정합니다. 첫 번째 Windows 런타임 앱을 만드는 방법은 C# 또는 Visual Basic을 사용하여 첫 번째 Windows 런타임 앱 만들기를 참조하세요.

탐색 앱 만들기

Hh771188.wedge(ko-kr,WIN.10).gif빈 앱 만들기

  1. Visual Studio 메뉴에서 파일 > 새 프로젝트를 선택합니다.
  2. 새 프로젝트 대화 상자의 왼쪽 창에서 Visual C#, Visual Basic 또는 Visual C++ 노드를 선택합니다.
  3. 가운데 창에서 빈 앱을 선택합니다.
  4. 이름 상자에 BlankApp을 입력하고 확인 단추를 선택합니다.

    솔루션이 만들어지고 솔루션 탐색기에 프로젝트 파일이 나타납니다. 프로젝트 파일에 대한 설명은 Windows 런타임 앱용 C#, VB 및 C++ 프로젝트 템플릿을 참조하세요.

    중요  Visual Studio를 처음 실행하면 개발자 라이선스를 다운로드하라는 메시지가 표시됩니다. 자세한 내용은 개발자 라이선스 가져오기를 참조하세요.

  5. 프로그램을 실행하려면 Visual Studio 메뉴에서 디버그 > 디버깅 시작을 선택하거나 F5 키를 누릅니다.

    빈 페이지가 표시됩니다.

  6. 디버깅을 중지하고 Visual Studio로 돌아가려면 Shift+F5를 누릅니다.

이제 프로젝트에 두 페이지를 추가하는데, 이 두 페이지 간에 탐색하게 됩니다. 다음 단계를 두 번 수행하여 두 페이지를 추가합니다.

Hh771188.wedge(ko-kr,WIN.10).gif기본 페이지 추가

  1. 솔루션 탐색기에서 BlankApp 프로젝트 노드의 바로 가기 메뉴를 연 다음 추가 > 새 항목을 선택합니다.
  2. 새 항목 추가 대화 상자의 가운데 창에서 빈 페이지를 선택합니다.
  3. 이름 입력란에 page1(또는 page2)을 입력하고 추가 단추를 선택합니다.

이전 단계를 두 번 수행했으면 프로젝트에 다음 파일이 추가되었을 것입니다.

  • BasicPage1.xaml
  • BasicPage1.xaml.cs 또는 BasicPage1.xaml.vb
  • BasicPage2.xaml
  • BasicPage2.xaml.cs 또는 BasicPage2.xaml.vb

이제 앱에 추가한 파일을 사용해야 합니다. BasicPage1.xaml을 다음과 같이 변경합니다.

  • pageTitle이란 이름의 TextBlock 요소를 찾아 Text 속성을 Page 1로 변경합니다. XAML은 다음과 같아야 합니다. "..."는 변경하지 않는 다른 특성을 나타냅니다.

    
    
    <TextBlock x:Name="pageTitle" Text="Page 1" .../>
    
    
  • 다음 XAML을 두 번째 자식 요소로서 루트 Grid에 추가합니다. StackPanel 요소는 Back 단추와 페이지 제목을 포함하는 Grid의 형제가 됩니다.

    
    <StackPanel Grid.Row="1"
                Margin="120,0,120,60">
        <HyperlinkButton Content="Click to go to page 2" Click="HyperlinkButton_Click"/>
    </StackPanel>
    
    

BasicPage2.xaml을 다음과 같이 변경합니다.

  • pageTitle이란 이름의 TextBlock 요소를 찾아 Text 속성을 Page 2로 변경합니다. XAML은 다음과 같습니다.

    
    
    <TextBlock x:Name="pageTitle" Grid.Column="1" Text="Page 2" 
               Style="{StaticResource PageHeaderTextStyle}"/>
    
    
  • 다음 XAML을 두 번째 자식 요소로서 루트 Grid에 추가합니다. StackPanel 요소는 Back 단추와 페이지 제목을 포함하는 Grid의 형제가 됩니다.

    
    <StackPanel Grid.Row="1"
                Margin="120,0,120,60">
        <TextBlock HorizontalAlignment="Left" Name="tb1" Text="Hello World!"/>
    </StackPanel>
    
    

BasicPage1.xaml.cs 또는 BasicPage1.xaml.vb의 BasicPage1 클래스에 다음 코드를 추가합니다.


Private Sub HyperlinkButton_Click(sender As Object, e As RoutedEventArgs)
	Me.Frame.Navigate(GetType(BasicPage2))
End Sub	

이제 새 페이지가 준비되었으니 앱이 시작될 때 BasicPage1이 처음 나타나도록 만들어야 합니다. app.xaml.cs/vb를 열고 BlankPage 대신 BasicPage1을 사용하여 Frame.Navigate를 호출하도록 OnLaunched 메서드를 변경합니다. 관련 코드 줄은 다음과 같습니다.


    If Not rootFrame.Navigate(GetType(BasicPage1), e.Arguments) Then
...

참고  여기서 코드는 앱의 초기 창 프레임에 대한 탐색이 실패할 경우 Navigate의 반환 값을 사용하여 앱 예외를 발생시킵니다. Navigatetrue를 반환하면 탐색이 수행됩니다.

이제 앱을 테스트할 준비가 되었습니다. 앱을 시작하고 Click to go to page 2라는 링크를 클릭합니다. 두 번째 페이지의 상단에 "Page 2"가 나타날 것입니다. Windows 스토어 앱에서는 페이지 제목의 왼쪽에 Back 단추가 있습니다. 첫 번째 페이지로 돌아가려면 이 단추를 클릭합니다. Windows Phone 스토어 앱에서는 휴대폰의 뒤로 버튼을 클릭하여 첫 번째 페이지로 돌아갑니다.

Frame 및 Page 클래스

앱이 기능을 추가하기 전에, 지금 추가한 페이지에서 앱의 탐색을 지원하는 방법을 살펴보겠습니다.

App.xaml.cs/vb/cpp 파일은 Frame을 만듭니다. 기존 프레임이 없는 경우 Frame을 현재 창의 콘텐츠가 되게 합니다. 프레임의 콘텐츠가 null이면 앱은 코드 숨김 App.xaml에 지정된 대로 홈페이지로 이동합니다. 예를 들어, 그리드 앱에서 코드는 rootFrame.Navigate(typeof(GroupedItemsPage), "AllGroups") )입니다.

Frame 클래스는 주로 탐색과 Navigate, GoBack, GoForward 등의 메서드 구현을 담당합니다. Frame에 콘텐츠를 표시하려면 Navigate 메서드를 사용합니다. 이전 예에서 App.OnLaunched 메서드는 Frame을 만들고 BasicPage1Navigate 메서드로 전달합니다. 그러면 메서드는 앱 현재 창의 콘텐츠를 Frame으로 설정합니다. 그 결과 앱의 창에 BasicPage1을 포함하는 Frame이 포함됩니다.

BasicPage1Page 클래스의 하위 클래스입니다. Page 클래스에는 Frame 속성이 있는데, 이는 Page를 포함하는 Frame을 가져오는 읽기 전용 속성입니다. HyperlinkButtonClick 이벤트 처리기가 Frame.Navigate(typeof(BasicPage2))를 호출하면 앱 창의 FrameBasicPage2의 콘텐츠가 표시됩니다.

일시 중단 관리자

중요  

SuspensionManager 도우미 클래스는 다음 프로젝트 템플릿에서 제공됩니다.

Windows 앱허브 앱, 그리드 앱, 분할 앱
Windows Phone 앱허브 앱, 피벗 앱
범용 앱허브 앱

 

SuspensionManager 도우미 클래스는 빈 앱 템플릿에서 제공되지 않습니다.

설치하는 동안 SuspensionManagerFrame을 등록합니다. SuspensionManager는 템플릿의 기본 폴더에 제공되는 도우미 클래스로, 앱이 종료되면 상태를 저장하고 로드하는 데 사용되는 구현을 제공합니다.

모든 앱은 운영 체제에서 지정한 응용 프로그램 수명 주기를 이동합니다. 리소스 제약, 시스템 종료, 다시 부팅 등의 이유로 시스템에서 앱을 종료할 경우 앱을 다시 시작할 때 데이터가 복원되어야 합니다. SuspensionManager는 개발자의 이러한 작업을 도와 주기 위해 제공됩니다.

SuspensionManager는 전역 세션 상태를 캡처하여 응용 프로그램의 프로세스 수명 관리를 간소화합니다. 세션 상태는 다양한 조건에서 자동으로 지워지며, 세션 간에 전달하기에는 편리하지만 응용 프로그램이 손상되거나 업그레이드될 경우에는 삭제되어야 할 정보를 저장할 때만 사용해야 합니다. 여기에는 기본적으로 임시 UI 데이터가 포함됩니다.

SuspensionManager 에는 SessionState 및 KnownTypes라는 두 개의 속성이 있습니다.

  • SessionState는 현재 세션의 전역 세션 상태에 대한 액세스를 제공합니다. 이 상태는 SaveAsync 메서드에 의해 직렬화되고 RestoreAsync 메서드에 의해 복원됩니다. 모든 데이터는 DataContractSerialization을 사용하여 저장 및 복원되며 가능한 한 압축되어야 합니다. 또한 문자열 및 다른 자체 포함 데이터 형식을 사용하는 것이 좋습니다.
  • KnownTypes는 세션 상태를 읽고 쓸 때 SaveAsync 및 RestoreAsync 메서드에서 사용되는 DataContractSerializer에 제공되는 사용자 지정 형식 목록을 저장합니다. 초기에는 비어 있지만 직렬화 프로세스를 사용자 지정하기 위해 다른 형식이 추가될 수 있습니다.

SuspensionManager는 SessionState 사전에 상태를 저장합니다. 이 사전은 Frame에 고유하게 바인딩되는 키에 대해 FrameState를 저장합니다. 각 FrameState 사전은 해당 특정 프레임에 대한 탐색 상태에 각 페이지의 상태를 보관합니다. 각 페이지는 탐색 매개 변수와 사용자가 추가하기로 결정하는 다른 상태를 저장합니다.

즉, Frame이 만들어질 때 개발자가 해당 프레임에 대해 상태를 저장하기를 원하면 즉시 등록되어야 합니다. 이는 (SuspensionManager.RegisterFrame(rootFrame, "AppFrame")) 호출을 사용하여 등록됩니다. 각 프레임에는 프레임과 연결된 고유한 키가 있어야 합니다. 일반적으로 대부분의 앱은 단일 프레임을 갖게 되며, 두 번째 프레임을 선언할 경우에는 마찬가지로 등록해야 합니다. 프레임이 등록되면 두 개의 연결된 속성이 프레임에 설정됩니다. 첫 번째 속성은 프레임에 연결한 키이고, 두 번째 속성은 프레임에 연결될 세션 상태의 사전입니다. 이전에 등록된 프레임은 즉시 탐색 및 상태를 복원하게 됩니다. 프레임을 등록 취소할 수도 있습니다. 프레임을 등록 취소하면 모든 탐색 상태와 히스토리가 삭제됩니다.

그리고 중요한 호출 SaveAsyncRestoreAsync가 있습니다. SaveAsync는 전체 SessionState를 저장하는 데 사용됩니다. SuspensionManager.RegisterFrame을 통해 등록된 모든 프레임은 현재 탐색 스택을 보존하며, 활성 페이지에 데이터를 저장할 기회를 제공합니다. 그런 다음 SessionState는 DataContractSerializer를 사용하여 직렬화되고 ApplicationData에 정의된 대로 로컬 폴더에 저장된 파일에 기록됩니다.

RestoreAsync는 이전에 저장한 SessionState를 읽는 데 사용됩니다. RegisterFrame에 등록된 모든 프레임은 이전 탐색 상태를 복원하며, 이를 통해 해당 프레임의 활성 페이지가 상태를 복원할 수 있는 기회가 제공됩니다. 다시, SaveAsync에서처럼 DataContractSerializer는 응용 프로그램의 로컬 폴더에서 파일에 저장된 상태를 역직렬화합니다.

앱 상태를 저장하려고 시도할 때 흔히 발생하는 두 가지 오류가 있습니다.

  • 개별 페이지에서 저장된 형식은 C# 및 VB에서 DataContractSerializer로 직렬화할 수 있어야 합니다. 이를 위해서는 사용자 지정 형식을 저장하거나 복원할 수 있도록 사전에 등록해야 합니다. SuspensionManager는 컬렉션에 있는 형식을 DataContractSerializer로 전달하는 KnownTypes 컬렉션을 제공합니다. SuspensionManager가 App.xaml에 대한 코드 숨김의 OnLaunched 재정의에서 상태를 복원하기 위해 호출될 때 형식을 등록하기 좋은 위치는 앱 생성자입니다.
    
            public App()
            {
                this.InitializeComponent();
                this.Suspending += OnSuspending;
                SuspensionManager.KnownTypes.Add(typeof(MyCustomType));
            }
    
    
    
  • 탐색을 사용하여 전달된 매개 변수는 플랫폼에서 직렬화할 수 있어야 합니다. 탐색 스택을 저장하고 복원할 때는 Frame.GetNavigationState()Frame.SetNavigationState()를 호출합니다. 이러한 호출 둘 다 내부 직렬화 형식을 사용하며 Frame.Navigate()에 매개 변수로 전달되는 모든 형식은 플랫폼에서 직렬화할 수 있어야 합니다.
SuspensionManagerNavigationHelper 구현으로 래핑되어 사용됩니다.

NavigationHelper 는 다음과 같이 중요한 편의성을 제공하는 페이지 구현입니다.

  • Navigate, GoBack, GoForward에 대한 이벤트 처리기
  • 탐색을 위한 마우스 및 키보드 바로 가기
  • 탐색에 대한 상태 관리 및 프로세스 수명 관리

위에서 설명된 구현을 제공하는 것 외에도 각 페이지에서 구현된 OnNavigatedTo()OnNavigatedFrom() 이벤트 처리기에서 NavigationHelper를 호출해야 합니다. 이러한 이벤트가 발생하면 NavigationHelper는 LoadState() 및 SaveState()의 페이지별 구현을 호출합니다. 각 페이지에서 이러한 함수의 구현을 사용자 지정할 수 있습니다. 이러한 함수는 각각 OnNavigatedTo()OnNavigatedFrom() 대신 사용되어야 합니다.

  • Applies to Windows Phone

참고  Windows Phone에서는 앱이 일시 중단되면 OnNavigatedFrom()이 호출됩니다. 앱이 다시 시작될 때 OnNavigatedTo()는 호출되지 않습니다.

Frame에 페이지를 표시하려고 하면 OnNavigatedFrom()이 호출됩니다. 새 페이지로 이동할 때는 페이지에 연결된 상태를 로드합니다. 페이지가 복원 중이면 이전에 저장된 페이지 상태가 복원됩니다. 그런 다음 각 페이지가 반응할 수 있도록 LoadState가 호출됩니다. LoadState는 OnNavigatedTo로 전달되는 원래 탐색 매개 변수 및 이전 페이지 상태(있는 경우) 등 두 개의 매개 변수를 사용합니다.

Frame에 페이지를 더 이상 표시하지 않으려는 경우 OnNavigatedFrom()이 호출됩니다. 페이지에서 벗어날 경우에는 페이지가 현재 상태를 저장하도록 합니다. 빈 사전은 SaveState()로 전달됩니다. 각 페이지는 SaveState를 재정의하고 키 사전에 개체를 저장합니다(문자열을 개체로 저장). 그런 다음 이 사전은 페이지와 연결되고 SuspensionManager는 지정된 프레임에 대한 추적을 유지하는 SessionState에 추가됩니다.

참고  

  • 개별 페이지에 저장된 데이터는 DataContractSerializer에서 직렬화하는 데 사용할 수 있어야 합니다.
  • 또한 종료됨 외에 다른 이유로 앱이 종료될 경우 이 상태는 손실되므로 임시 UI 정보만 저장해야 합니다.

페이지 템플릿에서 탐색 지원

앞에서 탐색 페이지를 만들 때 기본 페이지 템플릿을 사용했습니다. 이 템플릿과 탐색을 지원하는 기타 템플릿은 페이지의 왼쪽 맨 위에 Back 단추를 제공하는 페이지를 만듭니다. 단추를 사용하도록 설정하는 경우에만 단추가 표시됩니다. 따라서 첫 번째 페이지에서는 Back 단추를 볼 수 없지만 두 번째 페이지에서는 볼 수 있습니다.

다음 페이지 템플릿은 동일한 탐색 지원을 제공합니다.

  • 기본 페이지
  • 그룹 세부 정보 페이지
  • 그룹화된 항목 페이지
  • 항목 세부 정보 페이지
  • 항목 페이지
  • 분할 페이지
  • 허브 페이지
  • 검색 결과 페이지

페이지 간 정보 전달

이 앱은 두 페이지 간에 탐색하지만, 아직 흥미로운 것은 나오지 않았습니다. 앱에 여러 페이지가 있으면 정보를 공유해야 하는 경우가 많습니다. 첫 번째 페이지에서 두 번째 페이지로 정보를 전달해보겠습니다.

BasicPage1.xaml에서, 앞서 추가한 StackPanel을 다음 XAML로 바꿉니다.


<StackPanel Grid.Row="1"
    Margin="120,0,120,60">
    <TextBlock Text="Enter your name"/>
    <TextBox Width="200" HorizontalAlignment="Left" Name="tb1"/>
    <HyperlinkButton Content="Click to go to page 2" Click="HyperlinkButton_Click"/>
</StackPanel>


BasicPage1.xaml.cs 또는 BasicPage1.xaml.vb에서 HyperlinkButton_Click 이벤트 처리기를 다음 코드로 바꿉니다.


    Private Sub HyperlinkButton_Click(sender As Object, e As RoutedEventArgs)

        Me.Frame.Navigate(GetType(BasicPage2), tb1.Text)

    End Sub
	

BasicPage2.xaml.cs 또는 BasicPage2.xaml.vb에서 빈 navigationHelper_LoadState 메서드를 다음과 같이 채웁니다.


    Private Sub navigationHelper_LoadState((e As NavigationHelper.LoadStateEventArgs)
        Dim name As String = TryCast(e.NavigationParameter, String)
        If Not String.IsNullOrWhiteSpace(name) Then
            tb1.Text = "Hello, " & name
        Else
            tb1.Text = "Name is required.  Go back and enter a name."
        End If
    End Sub

앱을 실행하고, 입력란에 이름을 입력하고, Click to go to page 2라는 링크를 클릭합니다. HyperlinkButtonClick 이벤트에서 this.Frame.Navigate(typeof(BasicPage2), tb1.Text);를 호출하면, BasicPage2가 로드될 때 tb1.Text 속성이 전달됩니다. 그런 다음 BlankPage2navigationHelper_LoadState 메서드는 이벤트 데이터에서 값을 가져와 메시지를 표시하는 데 사용합니다.

페이지 캐싱

마지막 예를 실행했을 때, BasicPage2Back 단추를 클릭하면 BasicPage1TextBox가 빈 상태로 나타나는 것을 보았을 것입니다. 앱의 사용자가 뒤로 돌아가서 이전 페이지에서 내용을 변경하고자 한다고 가정하겠습니다. BasicPage1에 작성할 필드가 여러 개 있는 경우 앱이 해당 페이지로 돌아갈 때 필드가 초기화되면 사용자가 불편할 것입니다. NavigationCacheMode 속성을 사용하여 페이지가 캐시되도록 지정할 수 있습니다. BasicPage1의 생성자에서 NavigationCacheModeEnabled로 설정합니다.


Sub New()
    InitializeComponent()
    ...
    Me.NavigationCacheMode = Windows.UI.Xaml.Navigation.NavigationCacheMode.Enabled
End Sub


이제 앱을 실행하고 BasicPage2에서 BasicPage1로 돌아가면 BasicPage1TextBox에 값이 유지됩니다.

요약

이 항목에서는 페이지 간에 탐색하는 간단한 앱을 만드는 방법을 배웠습니다. 한 페이지에서 다른 페이지로 정보를 전달하는 방법, 그리고 페이지의 상태가 캐시되도록 지정하는 방법도 배웠습니다.

다음 단계

여러 가지 PageFrame 기능을 함께 사용하는 전체 샘플은 XAML 탐색 샘플을 참조하세요. 이 샘플에는 다음을 포함하여 여기에서 설명하지 않은 기능이 포함되어 있습니다.

관련 항목

페이지 간 이동
디자이너용
탐색 패턴
명령 패턴
레이아웃
뒤로 단추
허브 컨트롤에 대한 지침
앱 바에 대한 지침(Windows 런타임 앱)
앱 바에 접근성 구현
개발자용(XAML)
Windows.UI.Xaml.Controls Hub class
Windows.UI.Xaml.Controls AppBar class
Windows.UI.Xaml.Controls CommandBar class
첫 번째 앱 - 3부: 탐색, 레이아웃 및 보기
첫 번째 앱 - C++ Windows 스토어 앱에서 탐색 및 보기 추가(자습서 3/4)
XAML 허브 컨트롤 샘플
XAML AppBar 컨트롤 샘플
XAML 탐색 샘플
앱 바 추가(XAML)

 

 

표시:
© 2014 Microsoft