[C++] 윈도우10 앱(Universal Windows App) 개발 시작하기

Visual Studio 2015에서 유니버셜 윈도우 앱(Universal Windows App)을 개발할 수 있습니다.

시작은 역시 Hello World부터 시작합니다.

먼저 메뉴에서 File > New > Project로 프로젝트를 생성합니다.

다음과 같이 Installed > Templates > Visual C++ > Universal의 Blank App을 선택합니다.

프로젝트 이름은 HelloWorld입니다.

만약 첫 번째 UWP(Universal Windows Platform) 프로젝트인 경우 개발자 모드 활성화 다이얼로그가 뜹니다.

개발자 모드를 설정하면 됩니다.

설정의 업데이트 및 복구에서 개발자용 메뉴로 이동하면 개발자 모드를 활성화하는 것이 가능합니다.

다양한 파일들이 포함된 프로젝트가 생성됩니다.

Windows 8.1을 위한 앱 개발과 다른점은 하나의 프로젝트로 모든 디바이스에서 구동이 된다는 점입니다.

App.xaml은 이 앱의 객체로 앱이 시작되거나 중단될 때의 코드 등을 추가할 수 있습니다.

pch.h와 pch.cpp는 프리컴파일된 헤더파일로 다른 파일에서 공통으로 사용된 헤더를 추가할 수 있습니다.

MainPage.xaml과 그 밑의 코드는 실제 화면에 표시되는 시작 페이지입니다.

앱 개발은 XAML로 구현되는 디자인과 C++, C#, JavaScript 등으로 구현되는 코드 부분으로 나눠집니다.

처음 디자이너가 UI 레이아웃을 잡은 상태에서 개발과 동시에 디자인의 수정이 동시에 가능합니다.

이제 Hello World를 구현해 봅니다.

1. 시작 페이지(MainPage.xaml)에 컨트롤 추가

MainPage.xaml을 열고 Grid 태그의 사이에 다음 XAML 코드를 추가합니다.

<StackPanel  Margin="120,30,0,0">
    <TextBlock HorizontalAlignment="Left" Text="Hello World" FontSize="36"/>
    <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 Hello"/>
    </StackPanel>
    <TextBlock x:Name="greetingOutput"/>
</StackPanel>

XAML 코드를 추가하면 바로 위에 표시가 되며 이것으로 간단한 앱이 만들어집니다.

F5를 눌러서 빌드하고 실행하면 먼저 X자의 박스 모양이 표시되는데 스플래시 스크린(Splash Screen)입니다.

XAML 코드를 살펴보면 StackPanel이 먼저 생성됩니다.

그리고 그 하위에 TextBlock과 다시 StackPanel이 추가되었습니다.

하위의 StackPanel에는 입력을 받는 TextBox와 Button이 추가되어 있습니다.

마지막으로 처음 StackPanel의 하위에 존재하는 TextBlock으로 끝납니다.

StackPanel은 컨트롤을 순서에 맞춰서 차곡차곡 쌓아주는 역할을 합니다.

Shift + F5를 누르면 디버깅이 중지됩니다.

2. 이벤트 핸들러 작성

화면에 버튼이 존재하지만 클릭해도 아무런 반응이 없기 때문에 클릭 이벤트를 처리할 핸들러를 작성해야 합니다.

MainPage.xaml의 디자인 화면에서 Say Hello 버튼을 클릭합니다.

Alt + Enter를 눌러서 Properties Windows를 열고 이벤트 핸들러 추가 버튼을 클릭합니다.

아래의 이미지에 표시된 번개 모양의 아이콘이 이벤트 핸들러 추가 버튼입니다.

이제 버튼에서 발생할 수 있는 이벤트의 리스트를 확인할 수 있고 상단에 Click을 볼 수 있습니다.

간단하게 Click 옆의 텍스트 박스에서 마우스를 더블 클릭하면 이벤트 핸들러가 생성됩니다.

클릭 이벤트 핸들러의 이름은 Button_Click이고 원하는 이름을 직접 입력해서 생성해도 됩니다.

MainPage.xaml의 Button 선언부가 다음과 같이 변경됩니다.

<Button Content="Say Hello" Click="Button_Click"/>

MainPage.xaml.cpp와 .h 파일에 핸들러 메소드가 생성됩니다.

다음과 같이 소스 코드를 작성합니다.

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

XAML에 정의된 greetingOutput이나 nameInput 등의 컨트롤 이름을 그대로 사용 가능한 것을 알 수 있습니다.

다시 F5를 눌러서 실행하고 이름을 입력한 이후에 버튼을 클릭합니다.

정상적으로 하단에 환영 인사가 표시가 됩니다.

원래 하얀 배경으로 표시가 되는데 위와 같이 어두운 배경으로 변경하는 방법은 아래 링크를 참조하면 됩니다.

2015/10/05 - [Programming/Windows App] - [C++] 윈도우10 앱(Universal Windows App)기본 테마 변경

이것으로 가장 기본적인 Hello World가 완성이 됩니다.