Windows Phone에서 페이지 탐색 수행 방법

2013-12-05

적용 대상: Windows Phone 8 | Windows Phone OS 7.1

 

이 항목에서는 앱에서 여러 콘텐츠 페이지 사이를 앞뒤로 탐색하는 방법을 설명합니다.

이 항목에는 다음 단원이 포함되어 있습니다.

 

이 섹션에서는 앱 기본 페이지로(부터) 탐색할 수 있는 추가 콘텐츠 페이지를 만듭니다.

추가 페이지를 만들려면

  1. 파일 | 새 프로젝트 메뉴 명령을 선택하여 새 프로젝트를 만듭니다.

  2. 새 프로젝트 창이 표시됩니다. Visual C# 템플릿을 확장한 다음 Windows Phone 템플릿을 선택합니다.

  3. Windows Phone 앱  템플릿을 선택합니다. 프로젝트 이름을 원하는 대로 입력합니다.

  4. MainPage.xaml의 디자이너 뷰에서 페이지 제목을 선택하고, 이 제목 텍스트를 XAML에서 직접 또는 Text 속성에서 기본 페이지로 변경합니다.

    AP_Con_mainpage
  5. 솔루션 탐색기에서 프로젝트 이름을 마우스 오른쪽 버튼으로 클릭하고 메뉴에서 추가를 선택한 다음 새 항목을 선택합니다.

  6. Windows Phone 세로 페이지를 선택하고 이름을 SecondPage로 변경한 다음 페이지 아래쪽에서 추가를 선택합니다.

  7. SecondPage.xaml의 디자이너 뷰에서 페이지 제목을 선택하고, 이 제목 텍스트를 XAML에서 직접 또는 Text 속성에서 두 번째 페이지로 변경합니다.

이 섹션에서는 MainPage.xamlSecondPage.xaml 페이지 사이를 앞뒤로 탐색하는 방법을 설명합니다.

페이지 사이를 탐색하려면

  1. MainPage.xaml에서 도구 상자HyperlinkButton 컨트롤을 디자이너 화면으로 끌어옵니다. 이 컨트롤을 선택하고 Content 속성을 두 번째 페이지로 이동으로 변경하거나 XAML에서 직접 이 작업을 수행합니다. 모든 텍스트가 보이도록 하려면 컨트롤 너비를 확장해야 할 수 있습니다.

  2. 하이퍼링크 버튼을 두 번 클릭하여 하이퍼링크 클릭 이벤트에 대한 이벤트 처리기를 추가합니다. MainPage.xaml.cs 파일이 열립니다.

  3. hyperlinkButton1_Click 이벤트 처리기에 다음 코드를 추가합니다.

    private void hyperlinkButton1_Click(object sender, RoutedEventArgs e)
            {
                NavigationService.Navigate(new Uri("/SecondPage.xaml", UriKind.Relative));
            }
    
    참고참고:

    위 작업은 하이퍼링크 컨트롤의 NavigateUri 속성을 두 번째 페이지로 설정하여 MainPage.xaml에서 수행할 수도 있습니다. 예를 들면 다음과 같습니다. NavigateUri = “/SecondPage.xaml”

  4. SecondPage.xaml에서 Button 컨트롤을 디자이너 화면으로 끌어옵니다. 이 컨트롤을 선택하고 Content 속성을 기본 페이지로 다시 이동으로 변경하거나 XAML에서 직접 이 작업을 수행합니다. 모든 텍스트가 보이도록 하려면 컨트롤 너비를 확장해야 할 수 있습니다.

  5. 이 버튼을 두 번 클릭하여 버튼 클릭 이벤트에 대한 이벤트 처리기를 추가합니다. SecondPage.xaml.cs 파일이 열립니다.

  6. button1_Click 이벤트 처리기의 경우 다음 코드를 추가합니다.

    
      private void button1_Click(object sender, RoutedEventArgs e)
            {
                NavigationService.GoBack();
            }
    
  7. 디버그 | 디버깅 시작 메뉴 명령을 선택하여 앱을 실행합니다. 이렇게 하면 에뮬레이터 창이 열리고 앱이 실행됩니다.

앱을 실행하면 앱이 기본 페이지의 두 번째 페이지로 구성된 것을 알 수 있습니다. 이벤트 처리기에 대상 URI가 구성된 하이퍼링크를 사용하여 기본 페이지에서 두 번째 페이지로 이동할 수 있습니다. 탐색 서비스의 GoBack() 메서드를 사용하여 두 번째 페이지에서 기본 페이지로 돌아갈 수도 있습니다.

참고참고:

이 예제에서는 GoBack() 메서드가 사용되었지만 하드웨어의 뒤로 버튼을 사용하여 이전 페이지로 돌아갈 수도 있습니다.

AP_Con_mainnavAP_Con_secnav

이 섹션에서는 한 페이지의 텍스트를 다른 페이지의 텍스트 블록 컨트롤에 추가합니다. 이전 프로젝트를 다음 절차에 사용합니다.

다른 페이지로 문자열 데이터를 전달하려면

  1. MainPage.xaml에서 도구 상자TextBox 컨트롤과 Button 컨트롤을 디자이너 화면으로 끌어온 다음 컨트롤을 나란히 배치합니다. 컨트롤 속성의 TextBox 컨트롤에 이미 있는 텍스트를 지웁니다. Button 컨트롤의 이름을 passParam으로 바꾸고, 버튼 텍스트를 XAML에서 직접 또는 컨트롤 속성에서 이동으로 변경합니다.

  2. 이동 버튼을 두 번 클릭하여 버튼 클릭 이벤트에 대한 이벤트 처리기를 추가합니다. MainPage.xaml.cs 파일이 열립니다.

  3. passParam_Click 이벤트 처리기의 경우 다음 코드를 추가합니다.

    
        private void passParam_Click(object sender, RoutedEventArgs e)
            {
                
                NavigationService.Navigate(new Uri("/SecondPage.xaml?msg=" + textBox1.Text, UriKind.Relative));
            }
    
    참고참고:

    이 코드 줄은 두 번째 페이지 콘텐츠로 이동한 다음 새로 만든 TextBox에 입력한 문자열 데이터를 전달하는 데 사용됩니다.

  4. SecondPage.xaml에서 도구 상자TextBlock 컨트롤을 디자이너 화면으로 끌어옵니다. 컨트롤 속성의 TextBlock 컨트롤에 이미 있는 텍스트를 지웁니다. 더 잘 보이도록 하려면 컨트롤의 높이와 너비를 확장하고 더 큰 글꼴 크기를 선택해야 할 수 있습니다. 또한 이 예제에서는 만든 TextBlock의 이름을 textBlock1로 지정합니다.

  5. SecondPage.xaml.cs에서 다음 메서드를 만듭니다.

       protected override void OnNavigatedTo(System.Windows.Navigation.NavigationEventArgs e)
            {
                base.OnNavigatedTo(e);
    
                string msg = "";
                
                if (NavigationContext.QueryString.TryGetValue("msg", out msg))
    
                    textBlock1.Text = msg;
    
               
            }
    
  6. 디버그 | 디버깅 시작 메뉴 명령을 선택하여 앱을 실행합니다. 이렇게 하면 에뮬레이터 창이 열리고 앱이 실행됩니다.

    기본 페이지TextBox 컨트롤에 일부 텍스트를 입력하고 이동을 탭합니다. 두 번째 페이지에 도달하면 입력한 텍스트가 두 번째 페이지TextBlock 컨트롤에 표시되어야 합니다.

    AP_Con_mainpasstxtAP_Con_secondpasstxt

표시:
© 2014 Microsoft