Share via


페이지 항목 템플릿 추가(C#/VB/C++ 및 XAML을 사용하는 Windows 스토어 앱)

Windows 스토어 앱에 페이지 항목 템플릿을 추가하고 페이지 간을 손쉽게 탐색할 수 있습니다. Windows 스토어 항목 템플릿에 대한 설명은 Windows 스토어 앱용 C#, VB 및 C++ 항목 템플릿을 참조하세요.

컨트롤이 포함되지 않은 최소한의 템플릿인 빈 앱 프로젝트 템플릿으로 프로젝트를 만들어 보겠습니다. 그리드 형태 앱분할 앱 템플릿과 마찬가지로 빈 앱 템플릿은 프레임을 만들고 빈 페이지로 이동합니다.

그리드 형태 앱과 분할 앱을 구성하는 페이지, 빈 페이지 및 기본 페이지를 비롯하여 앱에 추가할 수 있는 페이지에는 여러 가지가 있습니다. 각 항목 페이지 템플릿은 새 XAML 파일 및 연관된 코드 숨김 파일(.vb, .cs, .h, .cpp)을 만듭니다.

빈 앱 템플릿에서 탐색 앱을 만드는 것으로 시작하겠습니다.

JJ655407.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를 누릅니다.

이제 두 번째 페이지를 추가하겠습니다.

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

  1. 솔루션 탐색기에서 BlankApp 프로젝트 노드의 바로 가기 메뉴를 연 다음 추가 > 새 항목을 선택합니다.

  2. 새 항목 추가 대화 상자의 가운데 창에서 빈 페이지를 선택합니다.

  3. 이름 상자에 page2를 입력하고 추가 단추를 선택합니다.

    다른 프로젝트 파일 page2.xaml.vb, page2.xaml.cs 또는 page2.xaml.cpp 중 파일 하나(Visual C++을 사용 중인 경우는 page2.xaml.h까지 두 개)과 함께 page2.xaml 파일이 만들어집니다.

이제 페이지 간 탐색을 위한 코드를 추가합니다. 지금 만드는 탐색 앱은 한 페이지에서 다른 페이지로 이동하기 위해 button-click 이벤트를 사용합니다.

JJ655407.wedge(ko-kr,WIN.10).gif탐색 코드 추가

  1. 솔루션 탐색기에서 MainPage.xaml을 엽니다.

  2. 도구 상자에서 단추를 디자인 화면으로 끕니다.

  3. XAML(Extensible Application Markup Language) 또는 디자인 보기에서 MainPage.xaml에 추가한 단추를 선택합니다.

  4. 속성 창에서 이벤트 단추(이벤트 단추)를 클릭합니다.

  5. 이벤트 목록 맨 위에서 Click 이벤트를 찾습니다. 해당 이벤트의 텍스트 상자에 Click 이벤트를 처리하는 함수의 이름을 입력합니다. 이 예에서는 "Button_Click"을 입력합니다.

    속성 창의 이벤트 목록

  6. Enter 키를 누릅니다. 이벤트 처리기 메서드가 만들어지고 이벤트 발생 시 실행될 코드를 추가할 수 있도록 코드 편집기에서 열립니다.

  7. 새 이벤트 처리기에서 다음 코드를 추가합니다.

    this.Frame.Navigate(typeof(page2));
    
    Me.Frame.Navigate(GetType(BlankPage1))
    
  8. 앱을 실행하려면 F5 키를 누릅니다.

    다음 페이지 단추를 클릭하면 page2.xaml은 기본 콘텐츠를 로드하여 표시합니다.탐색 앱의 2페이지

    앱의 첫 페이지로 돌아가려면 뒤로 단추를 클릭합니다.

관련 항목

Windows 스토어 앱용 C#, VB 및 C++ 항목 템플릿

검색 계약 항목 템플릿 추가