다음은 C++를 사용하여 UI가 XAML(Extensible Application Markup Language)로 정의된 Windows 스토어 앱 개발을 시작하는 방법입니다.

모든 유용한 Windows 스토어 앱은 전형적인 데스크톱 앱보다 좀 더 보기 좋고 반응성이 뛰어나고 보다 능률적으로 동작하도록 하는 특정 디자인 원칙을 따릅니다. Windows 스토어 앱을 만들려면 먼저 앱 계획을 읽는 것이 좋습니다.

다른 프로그래밍 언어를 사용하려면 다음 항목을 참조하세요.

• JavaScript를 사용하여 첫 Windows 스토어 앱 만들기

• C# 또는 Visual Basic을 사용하여 첫 Windows 스토어 앱 만들기

시작하기 전에...

• 이 자습서를 완료하려면 Windows 8.1 및 Visual Studio Express 2013 for Windows 또는 Express 버전이 아닌 Visual Studio 2013 중 하나를 사용해야 합니다. 다운로드하려면 도구 얻기를 참조하세요.
• 또한 개발자 라이선스도 있어야 합니다. 자세한 방법은 개발자 라이선스 얻기를 참조하세요.
• 표준 C++, XAML 및 XAML 개요에 나오는 개념을 이해하고 있어야 합니다.
• 여기에서는 Visual Studio의 기본 창 레이아웃을 사용한다고 가정합니다. 기본 레이아웃으로 재설정하려면 메뉴 모음에서 창 > 창 레이아웃 다시 설정을 선택합니다.
• 이 자습서의 전체 코드는 코드 갤러리의 Hello World(C++) 샘플에서 확인할 수 있습니다.

C++ 데스크톱 앱과 Windows 스토어 앱 비교

C++를 사용한 Windows 데스크톱 프로그래밍에 대한 기본 지식이 있는 개발자에게 Windows 스토어 앱 프로그래밍의 일부 측면은 익숙하지만 또 어떤 측면은 추가 학습이 필요할 수 있습니다.

같은 점

• 여전히 C++로 코딩을 사용합니다. 파일 I/O와 관련된 함수와 같은 특정 함수를 직접 호출할 수 없다는 점을 제외하고는 기존의 방식과 같이 STL, CRT, 다른 C++ 라이브러리에 액세스할 수 있습니다.

• 비주얼 디자이너에 익숙하다면 계속해서 비주얼 디자이너를 사용해도 좋습니다. UI를 직접 코딩하는 데 익숙한 경우 XAML을 직접 코딩할 수 있습니다.

• 여전히 Windows 운영 체제 형식과 사용자 지정 형식을 사용하는 앱을 만듭니다.

• 여전히 Visual Studio 디버거, 프로파일러 및 기타 개발 도구를 사용합니다.

• 여전히 Visual C++ 컴파일러를 사용하여 네이티브 컴퓨터 코드로 컴파일되는 앱을 만듭니다. C++로 만든 Windows 스토어 앱은 관리되는 런타임 환경에서 실행되지 않습니다.

새로운 점

• Windows 스토어 앱의 디자인 원칙은 데스크톱 앱과 상당히 다릅니다. 창 테두리, 레이블, 대화 상자 등은 별로 중요하지 않고 내용이 가장 중요합니다. 뛰어난 Windows 스토어 앱은 계획 단계 초기부터 이러한 원칙을 따릅니다.

• XAML을 사용하여 전체 UI를 정의합니다. UI와 핵심 프로그램 논리 간의 구분은 MFC 또는 Win32 앱에서보다 Windows 스토어 앱에서 훨씬 명확하게 나타납니다. 코드 파일에서 동작을 구현하기 위해 작업할 수도 있고 XAML 파일에서 UI의 모양을 구현하기 위해 작업할 수도 있습니다.

• 일부 기능에 Win32를 여전히 사용할 수 있지만 주로 탐색이 용이하고 개체 지향적인 새 API인 Windows 런타임에 대해 프로그래밍을 수행합니다.

• Windows 런타임 개체에 연결하는 경우를 제외하고 Visual C++ 구성 요소 확장(C++/CX)을 사용하는 경우 ISO C++로 코딩합니다. C++/CX는 C++ 예외 처리, 대리자, 이벤트 및 동적으로 만든 개체의 자동 참조 개수를 설정하는 방식으로 Windows 런타임 개체를 만들고 액세스하기 위한 특수 구문을 제공합니다. C++/CX를 사용할 경우 기본 COM 및 Windows 아키텍처의 세부 사항이 앱 코드에서 거의 다 숨겨져 있습니다. 자세한 내용은 C++/CX 언어 참조를 참조하세요. 그렇지만 원할 경우 Windows 런타임 C++ 템플릿 라이브러리를 사용하여 COM 인터페이스에 대해 직접 프로그래밍을 수행할 수도 있습니다.

• 앱은 일시 중단, 참 및 앱 바와 같은 새 개념을 지원하여 사용자를 위해 보다 통일된 환경을 만들 수 있습니다.

• 앱은 앱이 포함하는 형식, 사용하는 리소스 및 필요로 하는 기능(파일 액세스, 인터넷 액세스, 카메라 액세스 등)에 대한 메타데이터도 포함하는 패키지로 컴파일됩니다.

• Windows 스토어에서 인증 프로세스를 통해 앱의 안정성이 확인되면 그에 따라 수백 만의 잠재 고객을 두게 됩니다.

C++로 작성한 Hello World Windows 스토어 앱

첫 번째로 작성할 앱은 대화형 작업, 레이아웃 및 스타일의 일부 기본 기능을 보여 주는 "Hello World"입니다.

다음과 같은 기본 사항에서 시작해 보겠습니다.

• Visual Studio Express 2013 for Windows에서 Windows 스토어 앱 프로젝트를 만드는 방법

• 만든 다양한 프로젝트 파일을 이해하는 방법

• C++/CX의 확장 이해 및 사용 시기

먼저 Visual Studio에서 프로젝트 만들기

1. Visual Studio Express 2013 for Windows를 설치합니다. 이 프로그램을 열고 메시지가 나타나면 Visual C++ 개발 설정을 선택합니다.

2. 메뉴 모음에서 파일 > 새로 만들기 > 프로젝트를 선택합니다.

3. 새 프로젝트 대화 상자의 설치됨 창에서 Visual C++를 확장합니다.

4. 왼쪽 창에서 Windows 스토어를 선택합니다.

5. 가운데 창에서 빈 앱(XAML)을 선택합니다.

6. 프로젝트 이름을 입력합니다. 여기에서는 HelloWorld라고 입력합니다.

   
   

7. 확인 단추를 선택합니다. 프로젝트 파일이 생성됩니다.

계속하기 전에 프로젝트 파일을 살펴보겠습니다. 솔루션 탐색기 창의 맨 위에서 모든 파일 표시 단추를 선택하여 빈 앱(XAML) 템플릿이 만든 프로젝트 파일을 표시합니다. 지정한 프로젝트 이름에 따라 다음과 같이 표시됩니다.

수정하는 파일

먼저 수정할 수 있는 프로젝트 파일을 살펴보겠습니다. 일반적으로 프로젝트 폴더 바로 아래에 있는 파일은 모두 수정할 수 있습니다.

직접 사용하지 않는 파일

이러한 파일은 Visual Studio의 *.xaml 페이지에서 탐색할 때마다 XAML 디자이너 또는 편집기에 의해 다시 생성됩니다. 이러한 파일은 XAML의 직접 "변환"인 C++ 코드로 구성되어 있습니다. XAML 요소를 참조하는 코드를 작성할 경우 실제로는 이러한 자동 생성된 변수를 참조하는 것입니다. 이러한 파일을 통해 partial 클래스가 작동하는 방식, 변수가 선언되고 있는 위치 등을 파악할 수 있습니다. 이들을 임의적으로 수정하면 다음에 앱을 빌드하거나 XAML 페이지에서 다른 위치로 이동할 때 변경한 내용을 덮어씌우게 되므로 수정하지 않도록 해야 합니다. 주 프로젝트 폴더(예: app.xaml.h, app.xaml.cpp)에 정의된 partial 클래스의 일부를 변경합니다.

코드 개요

솔루션 탐색기에서 MainPage.xaml을 열고 XAML 편집기 창에서 해당 태그를 살펴보세요. <Grid> 요소가 포함된 <Page> 요소가 보입니다. 이제 MainPage.g.h를 엽니다. Windows::UI::Xaml::Controls::Page에서 파생되고 Windows::UI::Xaml::Controls::Grid 멤버 변수를 포함하는 MainPage 클래스가 나타납니다.

XAML 태그의 각 요소 형식에는 연결된 Windows 런타임 형식이 있습니다. XAML에 요소를 추가하면 Visual Studio는 사용자가 해당 요소를 Windows 런타임 형식으로 참조하는 코드 숨김 요소를 작성할 수 있도록 C++ 소스 코드를 생성합니다. 모든 요소가 C++ 프로젝트 코드에서 참조되는 것은 아니며 명시적으로 참조한 요소만 참조됩니다.

MainPage.g.h 파일을 다시 살펴보겠습니다. MainPage는 partial ref class로 선언되어 있습니다.

partial ref class MainPage : public Windows::UI::Xaml::Controls::Page… {…}

partial 및 ref 키워드는 분명히 ISO 표준 C++가 아니며 Windows 런타임 형식의 인스턴스를 만들 때 특별히 사용하는 구성 요소 확장입니다. ref 키워드는 해당 클래스가 Windows 런타임 참조 형식임을 나타냅니다. 즉, ref를 사용하면 많은 차세대 COM 코드를 작성하는 데 드는 시간을 절약할 수 있습니다. 클래스 멤버 선언에 Platform::Object^가 있습니다. "^" 기호는 "hat"이라고 하며 "개체 핸들"을 의미합니다. 이 기호는 동적 메모리에서 Windows 런타임 형식을 만들 때 "*" 대신 사용하세요. 또한 C++ auto 키워드를 사용할 수도 있습니다. 여기서 컴파일러는 해당 형식을 추론합니다. Platform namespace는 C++에 한정됩니다. 여기에는 Windows 런타임 유형 시스템의 C++ "프로젝션"에 필수적인 public 및 private 유형이 있습니다.

Grid^ grid = ref new Grid(); // or: auto grid = ref new Grid();
grid->Width = 600;

일반적으로 ref 클래스는 IInspectable 인터페이스를 구현하며 해당 수명이 스마트 포인터에 의해 관리되는 COM 개체입니다. Windows 런타임은 언어 독립적 ABI(추상 이진 인터페이스)를 정의합니다. 이 인터페이스는 가상 시스템을 통해 실행되지 않고 기본적으로 컴퓨터 코드에서 실행됩니다. C++/CX를 사용하면 보수적인 COM보다는 현대적인 C++와 유사한 관용구 형태로 이 ABI에 대한 프로그래밍을 수행할 수 있습니다. Windows 런타임 형식을 만들고 액세스할 때 특히 C++/CX를 사용하세요. Windows 런타임과 연결되지 않는 ref 클래스의 라이브러리, 모듈 및 함수는 ISO 표준 C++로만 작성할 수 있습니다. 표준 C++와 C++/CX를 같은 함수에서 혼합해서 사용하는 것은 일반적입니다. 이러한 모든 코드는 네이티브 C++로 컴파일됩니다. C++/CX에 대한 자세한 내용은 Visual C++ 언어 참조(C++/CX)를 참조하세요.

partial 키워드는 이 클래스의 선언이 다른 코드 파일(MainPage.xaml.h 파일)에서 계속됨을 컴파일러에 알려 줍니다. MainPage 클래스에 변수나 함수를 추가해야 할 경우 MainPage.xaml.h 및 MainPage.xaml.cpp에서 하면 됩니다. XAML 편집기를 통해 변수나 다른 상용구 코드를 추가해야 할 경우 *.g.h 및 *.g.hpp 파일에서 하면 됩니다. 클래스 정의는 두 부분으로 구성되어 있지만 코딩할 때나 컴파일할 때 하나의 클래스로 동작합니다. 일반적으로 *.g.* 파일은 솔루션 탐색기에서 기본적으로 숨기기 때문에 안전하게 무시할 수 있습니다. 이제 각 파일의 의미와 기능을 확인했으므로 수정할 파일을 좀 더 쉽게 찾을 수 있도록 모든 파일 표시 아이콘을 선택할 수 있습니다.

1단계: MainPage 바꾸기

빈 앱 프로젝트 템플릿의 MainPage은 빈 페이지 템플릿에 기초합니다. 여기에는 Page를 인스턴스화하기 위한 최소한의 XAML과 코드가 포함되어 있습니다. 그러나 Windows 스토어용 앱을 만들려면 추가 작업이 필요합니다. 예를 들어, 한 페이지로 구성된 단순한 앱조차도 서로 다른 레이아웃과 보기에 맞춰야 하고, 일시 중지될 경우 상태를 저장해야 하며, 다시 시작될 때 상태를 복원해야 합니다. Visual Studio의 다른 프로젝트 및 Page 템플릿에는 보기 및 상태 관리로 도움을 주는 약간의 추가 코드와 도우미 클래스가 포함되어 있습니다. 빈 앱 프로젝트 템플릿을 사용하는 경우 해당 레이아웃과 도우미 클래스를 활용할 수 있도록 빈 MainPage를 다른 Page 템플릿 중 하나로 바꾸는 것이 좋습니다.

경축! 아무것도 안하여 에스천사게임즈가 새로운 모습으로 재오픈 하였습니다.
어린이용이며, 설치가 필요없는 브라우저 게임입니다.
https://s1004games.com

이 예제에서는 기본 MainPage를 기본 페이지 템플릿을 사용하는 페이지로 대체합니다. 이 시리즈에서 나중에 나오는 자습서에서는 보기 및 상태 관리를 위해 이 템플릿에 사용되는 도우미 클래스를 사용합니다. Visual Studio에 포함된 Page 템플릿에 대한 자세한 내용은 C#, VB 및 C++ 항목 템플릿을 참조하세요.

새 앱에서 MainPage를 바꾸려면

1. 솔루션 탐색기에서 MainPage.xaml에 대한 바로 가기 메뉴를 연 다음 제거를 선택합니다. 대화 상자에서 삭제를 선택합니다. 동일한 방식으로 MainPage.xaml.cpp 및 MainPage.xaml.h도 삭제합니다. 나중에 이 파일을 동일한 이름의 다른 파일로 바꾸기 때문에 파일을 영구적으로 삭제합니다.
2. 메뉴 모음에서 프로젝트 > 새 항목 추가를 선택합니다. 새 항목 추가 대화 상자가 열립니다. 이 대화 상자는 새 프로젝트 대화 상자와 비슷합니다.
3. 왼쪽 창의 Visual C++ 아래에서 Windows 스토어를 선택합니다.
4. 가운데 창에서 프로젝트에 추가할 페이지 유형으로 기본 페이지로 선택합니다.
5. 페이지의 이름을 "PhotoPage.xaml"로 입력합니다.

   중요  기본 이름인 "BasicPage"을 그대로 두면 프로젝트가 제대로 빌드되지 않습니다.

6. 추가 단추를 선택합니다.

   빈 앱 템플릿(빈 페이지가 아닌)에 새 페이지를 처음 추가하는 경우 Visual Studio에서 추가에 사용되는 파일이 프로젝트에 없다는 메시지가 나타납니다. 예 단추를 선택하면 여러 유틸리티 클래스에 대한 이러한 파일도 프로젝트의 공용 폴더에 추가됩니다.

   페이지의 XAML 및 코드 숨김 파일이 프로젝트에 추가됩니다.

7. 메뉴 모음에서 빌드 > 솔루션 빌드를 선택하여 앱을 빌드합니다.

   중요  종속되어 있는 도우미 클래스가 빌드될 때까지 디자이너의 새 페이지에 오류가 표시됩니다.

2단계: 앱 시작

지금 매우 간단한 앱을 만들었습니다. 앱의 모양이 궁금한 경우 F5 키를 눌러 디버깅 모드에서 앱을 빌드, 배포 및 시작합니다. 먼저 기본 시작 화면이 나타납니다. 시작 화면은 이미지(splashscreen.png)와 배경색(앱의 매니페스트 파일에 지정됨)으로 정의됩니다. 여기서는 이에 대해 다루지 않지만 시작 화면은 손쉽게 사용자 지정할 수 있습니다. 방법을 알아보려면 시작 화면 추가를 참조하세요.

시작 화면이 사라진 다음 앱이 나타납니다. 여기에는 검은색 화면에 뒤로 화살표 및 제목 "My Application"이 표시됩니다.

앱을 닫는 단추나 명령은 없습니다. 닫기 제스처를 사용하거나 Alt+F4를 눌러 닫을 수 있지만 일반적으로 Windows 스토어 앱을 닫지 않습니다. 2부: 앱 수명 주기 및 상태 관리를 참조하세요. Windows 키를 눌러 시작 화면으로 이동합니다. 앱을 배포하면 시작 화면에 타일이 추가됩니다. 앱을 다시 실행하려면 시작 화면에서 해당 타일을 탭 또는 클릭하거나 Visual Studio에서 F5 키를 눌러 디버깅 모드에서 실행합니다.

아직 기능은 많지 않지만 첫 Windows 스토어 앱이 작성되었습니다. 축하합니다.

앱 디버깅을 시작하려면 Visual Studio로 돌아간 다음 메뉴 모음에서 디버그 > 디버깅 중지를 선택하여 앱을 닫습니다. Microsoft Visual Studio에서 디버그하는 동안에는 파일을 수정할 수 없습니다.

자세한 내용은 Visual Studio에서 Windows 스토어 앱 실행을 참조하세요.

3단계: 시작 페이지 수정

파일에 포함된 항목

Visual Studio 템플릿을 사용하여 프로젝트를 만들 경우 템플릿은 프로젝트에 일부 파일을 추가합니다. 파일을 보거나 수정하려면 솔루션 탐색기에서 파일을 두 번 클릭합니다. 폴더와 같이 XAML 파일을 확장하여 관련 코드 파일을 볼 수 있습니다. 기본적으로 XAML 파일은 디자인 화면과 XAML 편집기가 모두 표시되는 분할 보기로 열립니다.

이 자습서에서는 App.xaml, App.xaml.h, App.xaml.cpp, MainPage.xaml 및 MainPage.xaml.h and MainPage.xaml.cpp. 파일로만 작업합니다.

App.xaml

App.xaml은 앱 전체에서 사용되는 리소스를 선언하는 파일입니다. 빈 앱에는 리소스가 추가되어 있지 않고 페이지도 정의되어 있지 않습니다.

<Application
    x:Class="HelloWorld.App"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:local="using:HelloWorld">

</Application>

App.xaml.h 및 App.xaml.cpp

App.xaml.h and .cpp는 App.xaml의 코드 숨김 파일입니다. 코드 숨김은 완전한 클래스를 만들기 위해 XAML 페이지의 partial 클래스와 연결된 코드입니다. App.xaml.cpp는 앱의 진입점입니다. 모든 코드 숨김 페이지와 같이 여기에는 InitializeComponent 메서드를 호출하는 생성자가 포함되어 있습니다. InitializeComponent 메서드는 작성하지 않습니다. 이 메서드는 Visual Studio에서 생성되며 그 주요 목적은 XAML 파일에 선언된 요소를 초기화하는 것입니다. App.xaml.cpp에는 앱의 활성화와 일시 중단을 처리하는 메서드도 포함되어 있습니다. 앱 수명 주기 및 상태 관리 자습서에서 이러한 메서드에 코드를 추가합니다.

//
// App.xaml.h
// Declaration of the App class.
//

#pragma once

#include "App.g.h" //This is the auto-generated part of the partial class.

namespace HelloWorld
{
    /// <summary>
    /// Provides application-specific behavior to supplement the default  
    /// Application class.
    /// </summary>
    ref class App sealed
    {
    protected:
        virtual void OnLaunched(Windows::ApplicationModel::Activation::LaunchActivatedEventArgs^ e) override;

    internal:
        App();

    private:
        void OnSuspending(Platform::Object^ sender, Windows::ApplicationModel::SuspendingEventArgs^ e);
    };
}

//
// App.xaml.cpp
// Implementation of the App class.
//

#include "pch.h"
#include "MainPage.xaml.h"

using namespace HelloWorld;

using namespace Platform;
using namespace Windows::ApplicationModel;
using namespace Windows::ApplicationModel::Activation;
using namespace Windows::Foundation;
using namespace Windows::Foundation::Collections;
using namespace Windows::UI::Xaml;
using namespace Windows::UI::Xaml::Controls;
using namespace Windows::UI::Xaml::Controls::Primitives;
using namespace Windows::UI::Xaml::Data;
using namespace Windows::UI::Xaml::Input;
using namespace Windows::UI::Xaml::Interop;
using namespace Windows::UI::Xaml::Media;
using namespace Windows::UI::Xaml::Navigation;

// The Blank Application template is documented at 
// http://go.microsoft.com/fwlink/?LinkId=234227

/// <summary>
/// Initializes the singleton application object. This is the first line of 
/// authored code that's executed, and as such is the logical equivalent of 
/// main() or WinMain().
/// </summary>
App::App()
{
    InitializeComponent();
    Suspending += ref new SuspendingEventHandler(this, &App::OnSuspending);
}

/// <summary>
/// Invoked when the application is launched normally by the end user.	Other 
/// entry points will be used - for example, when the application is launched 
/// to open a specific file.
/// </summary>
/// <param name="e">Details about the launch request and process.</param>
void App::OnLaunched(Windows::ApplicationModel::Activation::LaunchActivatedEventArgs^ e)
{

#if _DEBUG
    // Show graphics profiling information while debugging.
    if (IsDebuggerPresent())
    {
        // Display the current frame rate counters.
        DebugSettings->EnableFrameRateCounter = true;
    }
#endif

    auto rootFrame = dynamic_cast<Frame^>(Window::Current->Content);

    // Do not repeat app initialization when the Window already has content,
    // just ensure that the window is active.
    if (rootFrame == nullptr)
    {
        // Create a Frame to act as the navigation context and associate it 
        // with a SuspensionManager key.
        rootFrame = ref new Frame();

        if (e->PreviousExecutionState == ApplicationExecutionState::Terminated)
        {
            // TODO: Restore the saved session state only when appropriate, 
            // scheduling the final launch steps after the restore is 
            // complete.

        }

        if (rootFrame->Content == nullptr)
        {
            // When the navigation stack isn't restored, navigate to the first
            // page, and configure the new page by passing required 
            // information as a navigation parameter.
            if (!rootFrame->Navigate(TypeName(MainPage::typeid), e->Arguments))
            {
                throw ref new FailureException("Failed to create initial page");
            }
        }
        // Place the frame in the current Window.
        Window::Current->Content = rootFrame;
        // Ensure the current window is active.
        Window::Current->Activate();
    }
    else
    {
        if (rootFrame->Content == nullptr)
        {
            // When the navigation stack isn't restored, navigate to the first 
            // page, and configure the new page by passing required
            // information as a navigation parameter.
            if (!rootFrame->Navigate(TypeName(MainPage::typeid), e->Arguments))
            {
                throw ref new FailureException("Failed to create initial page");
            }
        }
        // Ensure the current window is active.
        Window::Current->Activate();
    }
}

/// <summary>
/// Invoked when application execution is being suspended.	Application state 
/// is saved without knowing whether the app will be terminated or
/// resumed with the contents of memory still intact.
/// </summary>
/// <param name="sender">The source of the suspend request.</param>
/// <param name="e">Details about the suspend request.</param>
void App::OnSuspending(Object^ sender, SuspendingEventArgs^ e)
{
    (void) sender;	// Unused parameter
    (void) e;	// Unused parameter

    //TODO: Save application state and stop any background activity.
}

MainPage.xaml

MainPage.xaml 파일에서는 앱의 UI를 정의합니다. XAML 태그를 사용하여 요소를 직접 추가하거나, Visual Studio의 디자인 도구를 사용할 수 있습니다. 기본 페이지 템플릿은 MainPage(또는 직접 입력한 이름)라는 클래스를 만듭니다. 또한 기본 페이지 템플릿에는 뒤로 단추와 페이지 제목 같은 일부 기본 콘텐츠도 포함되어 있습니다.

<Page
    x:Name="pageRoot"
    x:Class="HelloWorld.MainPage"
    DataContext="{Binding DefaultViewModel, RelativeSource={RelativeSource Self}}"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:local="using:HelloWorld"
    xmlns:common="using:HelloWorld.Common"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    mc:Ignorable="d">

    <Page.Resources>
        <!-- TODO: Delete this line if the key AppName is declared in App.xaml -->
        <x:String x:Key="AppName">My Application</x:String>
    </Page.Resources>

    <!--
        This grid acts as a root panel for the page that defines two rows:
        * Row 0 contains the back button and page title
        * Row 1 contains the rest of the page layout
    -->
    <Grid Background="{StaticResource ApplicationPageBackgroundThemeBrush}">
        <Grid.ChildrenTransitions>
            <TransitionCollection>
                <EntranceThemeTransition/>
            </TransitionCollection>
        </Grid.ChildrenTransitions>
        <Grid.RowDefinitions>
            <RowDefinition Height="140"/>
            <RowDefinition Height="*"/>
        </Grid.RowDefinitions>

        <!-- Back button and page title -->
        <Grid>
            <Grid.ColumnDefinitions>
                <ColumnDefinition Width="Auto"/>
                <ColumnDefinition Width="*"/>
            </Grid.ColumnDefinitions>
            <AppBarButton x:Name="backButton" Height="95" Margin="10,46,0,0"
                          Command="{Binding NavigationHelper.GoBackCommand, ElementName=pageRoot}" 
                          AutomationProperties.Name="Back"
                          AutomationProperties.AutomationId="BackButton"
                          AutomationProperties.ItemType="Navigation Button"
                          Icon="Back"/>
            <TextBlock x:Name="pageTitle" Text="{StaticResource AppName}" Style="{StaticResource HeaderTextBlockStyle}" Grid.Column="1" 
                       IsHitTestVisible="false" TextWrapping="NoWrap" VerticalAlignment="Bottom" Margin="0,0,30,40"/>

        </Grid>
    </Grid>
</Page>

MainPage.xaml.h 및 MainPage.xaml.cpp

MainPage.xaml의 코드 숨김 페이지인 MainPage.xaml.h and MainPage.xaml.cpp에서는 앱 논리와 이벤트 처리기를 추가할 수 있습니다. Basic Page 클래스에는 컨트롤을 바인딩하려는 페이지별 데이터를 저장하는 PropertySet인 보기 모델이 이미 포함되어 있습니다. 이 클래스에는 또한 NavigationHelper가 있습니다. 이 개체는 프로젝트의 \Common\ 폴더에 있는 NavigationHelper.h에 정의되어 있으며 여러 페이지로 된 앱에서 앞으로 및 뒤로 탐색을 가능하게 하는 메서드가 포함되어 있습니다. 이 클래스에는 또한 사용자가 페이지로 이동하거나 페이지에서 나올 때 수행되는 작업을 가능하게 하는 두 개의 이벤트 처리기도 있습니다. LoadState 및 SaveState 이벤트 처리기 메서드는 페이지로 처음 이동하거나 데이터가 보기 모델에 추가될 때 NavigationHelper 클래스에 의해 호출됩니다.

//
// MainPage.xaml.h
//

#pragma once

#include "MainPage.g.h"
#include "Common\NavigationHelper.h"

namespace HelloWorld
{
    /// <summary>
    /// A basic page that provides characteristics that are common to most 
    /// applications.
    /// </summary>
    [Windows::UI::Xaml::Data::Bindable]
    public ref class MainPage sealed
    {
    public:
        MainPage();
        property Windows::Foundation::Collections::PropertySet^ DefaultViewModel
        {
            Windows::Foundation::Collections::PropertySet^ get();
        }
        property Common::NavigationHelper^ NavigationHelper
        {
            Common::NavigationHelper^ get();
        }

    protected:
        virtual void OnNavigatedTo(Windows::UI::Xaml::Navigation::NavigationEventArgs^ e) override;
        virtual void OnNavigatedFrom(Windows::UI::Xaml::Navigation::NavigationEventArgs^ e) override;

    private:
        void LoadState(Platform::Object^ sender, Common::LoadStateEventArgs^ e);
        void SaveState(Platform::Object^ sender, Common::SaveStateEventArgs^ e);

        static Windows::UI::Xaml::DependencyProperty^ _defaultViewModelProperty;
        static Windows::UI::Xaml::DependencyProperty^ _navigationHelperProperty;
    };
}

//
// MainPage.xaml.cpp
// Implementation of the MainPage class.
//

#include "pch.h"
#include "MainPage.xaml.h"

using namespace HelloWorld;

using namespace Platform;
using namespace Windows::Foundation;
using namespace Windows::Foundation::Collections;
using namespace Windows::UI::Xaml;
using namespace Windows::UI::Xaml::Controls;
using namespace Windows::UI::Xaml::Controls::Primitives;
using namespace Windows::UI::Xaml::Data;
using namespace Windows::UI::Xaml::Input;
using namespace Windows::UI::Xaml::Media;
using namespace Windows::UI::Xaml::Navigation;

// The Blank Page item template is documented at 
// http://go.microsoft.com/fwlink/?LinkId=234238.

MainPage::MainPage()
{
	InitializeComponent();
}

/// <summary>
/// Invoked when this page is about to be displayed in a Frame.
/// </summary>
/// <param name="e">Event data that describes how this page was reached. 
/// The Parameter property is typically used to configure the page.</param>
void MainPage::OnNavigatedTo(NavigationEventArgs^ e)
{
	(void) e;	// Unused parameter
}

시작 페이지 수정

지금부터 약간의 콘텐츠를 앱에 추가해 보겠습니다.

시작 페이지를 수정하려면

1. 솔루션 탐색기에서 MainPage.xaml를 엽니다.
2. 페이지 제목을 변경하려면 XAML 디자이너에서 페이지 위쪽 가까이에 있는 "My Application" 텍스트를 선택합니다.

   pageTitle이라는 TextBlock이 속성 창에 표시되고 있는지 확인합니다.

3. 속성 창에는 선택한 개체에 대한 속성과 값의 목록이 포함되어 있습니다. 각 속성 값의 옆에는 클릭하여 속성 메뉴를 열 수 있는 작은 상자 기호인 속성 마커가 있습니다. Text 속성 마커는 녹색으로, 리소스에 대해 설정되었음을 나타냅니다.

   속성 창의 공용 아래에서 Text 속성에 대해 속성 마커를 클릭합니다. 속성 메뉴가 열립니다.

   
   

4. 속성 메뉴에서 리소스 편집을 선택합니다. 리소스 편집 대화 상자가 열립니다.
5. 리소스 편집 대화 상자에서 값을 "My Application"에서 "Hello, world!"로 변경합니다.
6. 확인 단추를 선택합니다.

   앱 이름을 직접 텍스트 블록에 입력하는 대신 텍스트 블록의 Text 속성이 바인딩되어 있는 문자열 리소스를 업데이트했습니다. 이렇게 리소스를 사용하면 텍스트를 재사용할 수 있고, 유지 관리하기가 편리하며, 지역화하기도 쉽습니다. MainPage.xaml에서 AppName 리소스 정의에 대한 XAML은 다음과 같이 업데이트됩니다.

   XAML

   복사

   <x:String x:Key="AppName">Hello, world!</x:String>
   
   

7. MainPage.xaml용 XAML에서 UI에 대한 컨트롤을 추가합니다.

   루트 Grid에서 닫는 태그의 바로 앞에 다음 XAML을 추가합니다. 여기에는 사용자의 이름을 묻는 TextBlock, 사용자의 이름을 수용할 TextBox 요소, Button 및 또 다른 TextBlock 요소가 포함된 StackPanel이 포함되어 있습니다.

   XAML

   복사

           <StackPanel Grid.Row="1" Margin="120,30,0,0">
               <TextBlock Text="What's your name?"/>
               <StackPanel Orientation="Horizontal" Margin="0,20,0,20">
                   <TextBox x:Name="nameInput" Width="300" HorizontalAlignment="Left"/>
                   <Button Content="Say &quot;Hello&quot;"/>
               </StackPanel>
               <TextBlock x:Name="greetingOutput"/>
           </StackPanel>
   
   
   

   이 내용은 탐색, 레이아웃 및 보기 문서에서 XAML 레이아웃에 대해 더 자세히 설명합니다.

8. F5 키를 눌러 앱을 실행합니다. 모양은 다음과 같습니다.

   

   
   

   TextBox에 입력할 수는 있지만 지금은 Button을 클릭해도 아무것도 수행되지 않습니다. 다음 단계에서 이 단추의 Click 이벤트에 대해 개인 설정 인사말을 표시하는 이벤트 처리기를 만들고 이벤트 처리기 코드를 MainPage.xaml.h 및 MainPage.xaml.cpp 파일에 추가하게 됩니다.

4단계: 이벤트 처리기 만들기

XAML 요소는 특정 이벤트가 발생할 때 메시지를 보낼 수 있습니다. 이러한 이벤트 메시지는 이벤트에 응답하여 기회를 제공합니다. 이벤트 처리기 메서드에 응답 코드를 배치합니다. 많은 앱에서 가장 일반적인 이벤트는 사용자가 Button을 클릭하는 것입니다.

단추의 Click 이벤트에 대한 이벤트 처리기를 만들어 보겠습니다. 이 이벤트 처리기는 nameInput TextBox 컨트롤에서 사용자의 이름을 가져와 greetingOutput TextBlock에 인사말을 출력하는 데 사용합니다.

터치, 마우스 및 펜 입력에 대해 작동하는 이벤트 사용

어떤 이벤트를 처리해야 할까요? 다양한 장치에서 실행될 수 있으므로 터치 입력을 염두에 두고 Windows 스토어 앱을 디자인해야 합니다. 또한 앱은 마우스 또는 스타일러스의 입력도 처리할 수 있어야 합니다. 다행히 Click 및 DoubleTapped와 같은 이벤트는 장치 독립적입니다. Microsoft .NET 프로그래밍에 익숙한 경우 MouseMove, TouchMove 및 StylusMove와 같은 마우스, 터치 및 스타일러스 입력에 대한 별도의 이벤트를 보았을 것입니다. Windows 스토어 앱에서는 이러한 개별 이벤트가 터치, 마우스 및 스타일러스 입력에 대해 동일하게 작동하는 하나의 PointerMoved 이벤트로 대체됩니다.

이벤트 처리기를 추가하려면

1. MainPage.xaml의 XAML 또는 디자인 보기에서 이전에 추가한 StackPanel의 "Say Hello" Button을 선택합니다.
2. 속성 창에서 이벤트 단추()를 선택합니다.
3. 이벤트 목록 맨 위에서 Click 이벤트를 찾습니다. 해당 이벤트의 텍스트 상자에 Click 이벤트를 처리하는 함수의 이름을 입력합니다. 이 예에서는 "Button_Click"을 입력합니다.

   

   
   

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

   이와 동시에 MainPage.xaml에서 Button에 대한 XAML은 다음과 같이 Click 이벤트 처리기를 선언하도록 업데이트됩니다.

   XAML

   복사

   <Button Content="Say &quot;Hello&quot;" Click="Button_Click"/>
   
   

5. MainPage.xaml.cpp에서 방금 만든 Button_Click 이벤트 처리기에 다음 코드를 추가합니다. 이 코드는 nameInput TextBox 컨트롤에서 사용자 이름을 검색한 다음 이 이름을 사용하여 인사말을 만듭니다. greetingOutput TextBlock은 결과를 표시하는 데 사용됩니다.
   C++

   복사

   void HelloWorld::MainPage::Button_Clicked(Platform::Object^ sender, Windows::UI::Xaml::RoutedEventArgs^ e)
   {
       greetingOutput->Text = "Hello, " + nameInput->Text + "!";
   }
   
   

6. F5 키를 눌러 앱을 빌드 및 실행합니다. 텍스트 상자에 이름을 입력하고 단추를 클릭하면 앱에서 개인 설정 인사말을 표시합니다.

   

   
   

5단계: 시작 페이지 스타일 지정

테마 선택

앱의 모양과 느낌은 손쉽게 사용자 지정할 수 있습니다. 기본적으로 앱은 어두운 스타일의 리소스를 사용합니다. 시스템 리소스에는 밝은 테마도 있습니다. 테스트해 보고 어떻게 보이는지 확인해 보겠습니다.

밝은 테마로 전환하려면

1. 솔루션 탐색기에서 App.xaml를 엽니다.
2. 여는 Application 태그에서 RequestedTheme 속성을 추가하고 값을 Light로 설정합니다.
   XAML

   복사

   RequestedTheme="Light"
   
   

   다음은 밝은 테마가 추가된 전체 Application 태그입니다.

   XAML

   복사

   <Application
       x:Class="HelloWorld.App"
       xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
       xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
       xmlns:local="using:HelloWorld" 
       RequestedTheme="Light">
   
   

3. F5 키를 눌러 앱을 빌드 및 실행합니다. 이제 밝은 테마를 사용합니다.

   

   
   

어떤 테마를 사용해야 할까요? 어느 것이든 원하는 것을 사용하면 됩니다. 주로 이미지 또는 동영상을 표시하는 앱에는 어두운 테마를 사용하는 것이 좋고, 텍스트가 많이 들어 있는 앱에는 밝은 테마를 사용하는 것이 좋습니다. 사용자 지정 색 구성표를 사용하려는 경우 앱의 모양과 느낌에 가장 잘 맞는 테마를 사용하세요.

참고  앱이 시작되면 테마가 적용됩니다. 앱이 실행되는 동안에는 테마를 변경할 수 없습니다.

시스템 스타일 사용

지금은 모든 텍스트가 매우 작아서 읽기가 어렵습니다. 간편하게 앱의 요소에 시스템 스타일을 적용하여 멋있게 보이도록 만들 수 있습니다.

요소의 스타일을 변경하려면

1. 솔루션 탐색기에서 MainPage.xaml를 엽니다.
2. XAML 또는 디자인 보기에서 이전에 추가한 "What's your name?" TextBlock을 선택합니다.
3. 속성 창에서 속성 단추()를 선택합니다.
4. 텍스트 그룹을 확장하고 글꼴 크기를 16px로 설정합니다.
5. 기타 그룹을 확장하고 스타일 속성을 찾습니다.
6. 스타일 속성 오른쪽에 있는 속성 마커를 클릭하여 메뉴를 열고 시스템 리소스 > BaseTextBlockStyle을 선택합니다.

   BaseTextBlockStyle은 <root>\Program Files\Windows Kits.1\Include\winrt\xaml\design\generic.xaml의 ResourceDictionary에 정의된 리소스입니다.

   

   
   

   XAML 디자인 화면에서 텍스트의 모양이 변경됩니다. XAML 편집기에서 TextBlock에 대한 XAML이 업데이트됩니다.

   XAML

   복사

   <TextBlock Text="What's your name?" Style="{StaticResource BasicTextStyle}"/>
   
   

7. 프로세스를 반복하여 글꼴 크기를 설정하고 greetingOutputTextBlock 요소에 BaseTextBlockStyle을 할당합니다.

   팁  이 TextBlock에는 텍스트가 없지만 XAML 디자인 화면 위로 포인터를 이동하면 TextBlock의 위치가 파란색 윤곽선으로 표시되므로 이를 선택할 수 있습니다.

   이제 XAML은 다음과 같습니다.

   XAML

   복사

           <StackPanel Grid.Row="1" Margin="120,30,0,0">
               <TextBlock Style="{ThemeResource BaseTextBlockStyle}" FontSize="16" Text="What's your name?"/>
               <StackPanel Orientation="Horizontal" Margin="0,20,0,20">
                   <TextBox x:Name="nameInput" Width="300" HorizontalAlignment="Left"/>
                   <Button Content="Say &quot;Hello&quot;" Click="Button_Click"/>
               </StackPanel>
               <TextBlock Style="{ThemeResource BaseTextBlockStyle}" FontSize="16" x:Name="greetingOutput"/>
           </StackPanel>
   
   

8. F5 키를 눌러 앱을 빌드 및 실행합니다. 이제 모양은 다음과 같습니다.

요약

축하합니다! 첫 번째 자습서를 완료했습니다. 이 자습서에서는 Windows 스토어 앱에 콘텐츠와 대화형 작업을 추가하는 방법과 그 모양을 변경하는 방법에 대해 알아보았습니다.

코드 보기

난관에 봉착했나요? 또는 작업의 확인이 필요하세요? 코드 갤러리의 Hello World(C++) 샘플을 참조하세요.

다음 단계

이 시리즈의 다음 자습서, 앱 수명 주기 및 상태 관리에서는 앱 수명 주기가 작동하는 방식과 앱의 상태를 저장하는 방법에 대해 알아봅니다.