2일차. UWP "Hello, World!" 앱 만들기 (2/3)

프로젝트 수정

MainPage.xaml 수정

   이전 게시글에서 대충 분석해 보았으니 이제 다시 예제로 돌아와서 "Hello, World!" 앱을 만들어 보겠습니다. 먼저 MainPage.xaml을 열어서 예제대로 수정해 봅시다. 기존의 StackPanel 태그 내용을 전부 삭제한 후 문서에 있는 XAML로 교체합니다. 지금쯤 되면 슬슬 감이 오실 거라고 생각합니다. StackPanel의 Margin 속성은 말 그대로 컨텐츠의 마진을 설정하는 속성이며 왼쪽 위쪽 오른쪽 아래쪽 순서대로 적용됩니다. TextBlock 태그는 사용자가 수정할 수 없는 텍스트를 생성합니다. 안드로이드에서는 TextView와 유사합니다. TextBox는 수정할 수 있는 텍스트 박스로 안드로이드의 EditText와 유사하죠. Button의 Content라는 속성이 새로 생겼는데 이는 <Button>Content</Button>를 빈 요소로 만든 것입니다. 위의 경우 <Button x:Name="inputButton">Say "Hello"</Button>라고 써도 동일한 동작을 보장할 걸로 예상됩니다.

 

실행 결과

   MainPage.cpp에 MyButton()에 관련된 내용은 지워주고 다시 컴파일해주면 위와 같이 바뀐 것을 확인할 수 있습니다. MainPage.xaml에서 보이던 그 화면 그대로 출력되네요. 하지만 아직 이벤트를 설정하지 않았기 때문에 동작하지는 않습니다. 이제 이벤트를 설정해 주겠습니다.

 

MainPage.xaml의 inputButton에 Click 이벤트 선언

MainPage.h에 inputButton_Click 메서드 정의

MainPage.cpp에 inputButton_Click 메서드 구현

   먼저 MainPage.xaml에서 inputButton 버튼에 Click 이벤트에 대한 이벤트 처리기를 선언해줍시다.  그 다음에 MainPage.h에서 xaml에서 설정한 이름과 동일한 이름의 메서드를 정의하고 MainPage.cpp에서 선언해주는 게 다입니다. 코드를 보면 greetingOutput이라는 TextBlock에 "Hello ~~~!"라고 출력될 거라고 예상할 수 있습니다. 이제 다시 컴파일해봅시다.

 

01

실행 결과

   네. 예상한 대로 실행되는 것을 확인할 수 있습니다.

 

 

 

 

참고

docs.microsoft.com/ko-kr/windows/uwp/get-started/create-a-basic-windows-10-app-in-cppwinrt

C++/WinRT를 사용하여 'Hello, World!' 앱 만들기 - UWP applications