윈도우8 개발 Hello, world! 출력하기

윈도우8 개발 Hello, world! 출력하기

윈도우8 개발 하려니 처음에 무엇부터 해야 할지 막막했다. 모든 것은 msdn에 설명이 되어 있다. 그중에서 모든 언어의 시작인 hello, world 를 출력해 보도록 하겠다.

시작 페이지 수정

MainPage.xaml 파일에 콘텐츠를 몇 가지 추가해 보겠습니다.

Hh986965.wedge(ko-kr,WIN.10).gif 시작 페이지를 수정하려면

솔루션 탐색기에서 MainPage.xaml을 두 번 클릭하여 XAML 편집기에서 엽니다.
페이지 제목을 변경하려면 페이지 위쪽 부근에서 AppName 리소스를 선택합니다.
팁 찾는 데 문제가 있으면 Ctrl+F를 눌러 빠른 찾기 상자를 열고 "AppName"을 검색합니다.
속성 창의 공통 아래에서 Text 속성에 대해 속성 마커를 클릭합니다. 속성 메뉴가 열립니다.
참고 속성 마커는 각 속성 값의 오른쪽에 있는 작은 상자 기호입니다. Text 속성 마커는 녹색으로, 리소스에 대해 설정되었음을 나타냅니다.
속성 메뉴에서 리소스 편집을 선택합니다. 리소스 편집 대화 상자가 열립니다.
리소스 편집 대화 상자에서 값을 "My Application"에서 "Hello, world!"로 변경합니다.
확인을 클릭합니다. 값이 "My Application"에서 "Hello, world!"로 변경됩니다.
XAML은 다음과 같이 업데이트됩니다.
XAML
<x:String x:Key="AppName">Hello, world!</x:String>

루트 Grid에서 <VisualStateManager.VisualStateGroups> 태그 바로 뒤에 사용자의 이름을 묻는 TextBlock, 사용자의 이름을 수용할TextBox 요소, Button 및 또 다른 TextBlock 요소가 포함된 StackPanel을 추가합니다. XAML 레이아웃에 대한 자세한 내용은 빠른 시작: 레이아웃 정의를 참조하세요.

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>

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

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

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

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

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

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

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

Hh986965.wedge(ko-kr,WIN.10).gif 이벤트 처리기를 추가하려면

XAML 또는 디자인 보기에서 MainPage.xaml에 추가한 Button을 선택합니다.
속성 창에서 이벤트 단추()를 클릭합니다.

팁 속성 창이 표시되지 않으면 Alt+Enter를 눌러 이 창을 엽니다.
이벤트 목록 맨 위에서 Click 이벤트를 찾습니다. 해당 이벤트의 텍스트 상자에 Click 이벤트를 처리하는 함수의 이름을 입력합니다. 이 예에서는 "Button_Click"을 입력합니다.
Enter 키를 누릅니다. 이벤트 처리기 메서드가 만들어지고 이벤트 발생 시 실행될 코드를 추가할 수 있도록 코드 편집기에서 열립니다.
(C# 전용) XAML 편집기에서 Button에 대한 XAML이 Click 이벤트로 업데이트됩니다.
XAML
<Button Content="Say "Hello"" Click="Button_Click"/>
코드 숨김 페이지에서 만든 이벤트 처리기에 코드를 추가합니다. 이 이벤트 처리기에서 nameInput TextBox 컨트롤에서 사용자의 이름을 읽어 온 다음 이를 사용해 인사말을 만듭니다. greetingOutputTextBlock을 사용하여 결과를 표시합니다.
C#

VB
private void Button_Click(object sender, RoutedEventArgs e) { greetingOutput.Text = "Hello, " + nameInput.Text + "!"; }
F5 키를 눌러 앱을 빌드 및 실행합니다. 텍스트 상자에 자신의 이름을 입력하고 단추를 클릭하면 앱에서 개인 설정 인사말을 표시합니다.

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

테마 선택

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

Hh986965.wedge(ko-kr,WIN.10).gif 밝은 테마로 전환하려면

솔루션 탐색기에서 App.xaml을 두 번 클릭하여 엽니다.

여는 Application 태그에 RequestedTheme 속성을 추가하고 해당 값을 Light로 설정합니다. RequestedTheme="Light".

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">

앱을 실행합니다. 이제 밝은 테마를 사용합니다.

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

표준 스타일 사용

이 자습서 앞 부분에서 App.xaml 파일에 StandardStyles.xaml ResourceDictionary에 대한 참조가 포함되어 있다고 했습니다.

XAML

            <ResourceDictionary.MergedDictionaries>

                <!-- 
                    Styles that define common aspects of the platform look and feel
                    Required by Visual Studio project and item templates
                 -->
                <ResourceDictionary Source="Common/StandardStyles.xaml"/>
            </ResourceDictionary.MergedDictionaries>

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

Hh986965.wedge(ko-kr,WIN.10).gif 요소의 스타일을 지정하려면

XAML 또는 디자인 보기에서 MainPage.xaml에 추가한 TextBlock을 선택합니다.
속성 창에서 속성 단추()를 클릭합니다.

팁 속성 창이 표시되지 않으면 Alt+Enter를 눌러 이 창을 엽니다.
기타 그룹을 확장하고 스타일 속성을 찾습니다.
스타일 속성 옆의 작은 사각형을 클릭하여 메뉴를 엽니다.
메뉴에서 로컬 리소스 > BasicTextStyle을 선택합니다.
BasicTextStyle은 StandardStyles.xaml ResourceDictionary에 정의되어 있는 리소스입니다.

디자이너에서 텍스트의 모양이 변경됩니다. XAML 편집기에서 TextBlock에 대한 XAML이 업데이트됩니다.
XAML
<TextBlock Text="What's your name?" Style="{StaticResource BasicTextStyle}"/>

프로세스를 반복하여 greetingOutputTextBlock 요소에 BasicTextStyle을 할당합니다.

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

XAML

        <StackPanel Grid.Row="1" Margin="120,30,0,0">
            <TextBlock Text="What's your name?" Style="{StaticResource BasicTextStyle}"/>
            <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 x:Name="greetingOutput" Style="{StaticResource BasicTextStyle}"/>
        </StackPanel>

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

스타일이 지정된 텍스트가 포함된 앱 화면

직접 스타일 만들기

앱의 모양과 느낌을 사용자 지정하려는 경우 시스템 스타일을 무시하고 처음부터 다시 만들 필요가 없습니다. 변경할 스타일을 다시 정의하여 조금씩 변경하는 편이 작업하기 쉽습니다.

실제로 직접 만드는 것보다 표준 스타일을 재정의하는 것이 더 낫습니다. 앱을 고대비 모드로 실행하는 경우 고대비를 지원하는 색 구성표에서 기본 스타일 색의 변경 사항을 자동으로 다시 정의합니다.

고유한 스타일을 만들고 StandardStyles.xaml ResourceDictionary 뒤에 포함시켜 표준 스타일에서 어떠한 스타일도 재정의할 수 있습니다. 자세한 내용은 빠른 시작: 컨트롤 스타일 지정을 참조하세요.

Hh986965.wedge(ko-kr,WIN.10).gif 고유한 스타일을 사용하려면

XAML 또는 디자인 보기에서 MainPage.xaml에 추가한 greetingOutput TextBlock을 선택합니다.
기타 그룹을 확장하고 스타일 속성을 찾습니다.
스타일 속성 옆의 작은 사각형을 클릭하여 메뉴를 엽니다.
메뉴에서 새 리소스로 변환...을 선택합니다. 스타일 리소스 만들기 대화 상자가 열립니다.
참고 수정할 스타일이 이미 선택되어 있어야 합니다. 이 예에서는 이전 단계에서 BasicTextStyle이 선택되었습니다.
스타일 리소스 만들기 대화 상자에서 리소스 키로 "BigGreenTextStyle"을 입력하고 옵션을 선택하여 응용 프로그램에서 리소스를 정의합니다.
확인을 클릭합니다. 새 스타일이 App.xaml에서 만들어지고 TextBlock이 새 스타일 리소스를 사용하도록 업데이트됩니다.
XAML
<TextBlock x:Name="greetingOutput" Style="{StaticResource BigGreenTextStyle}"/>
스타일 속성 옆의 작은 사각형을 클릭하여 메뉴를 다시 엽니다.
메뉴에서 리소스 편집을 선택합니다. App.xaml이 편집기에서 열립니다.

"BigGreenTextStyle" 리소스에서 Foreground 값을 "Green"으로, FontSize 값을 "36"으로 변경합니다.

XAML

            <Style x:Key="BigGreenTextStyle" TargetType="TextBlock">
                <Setter Property="Foreground" Value="Green"/>
                <Setter Property="FontSize" Value="36"/>
                <Setter Property="FontFamily" Value="{StaticResource ContentControlThemeFontFamily}"/>
                <Setter Property="TextTrimming" Value="WordEllipsis"/>
                <Setter Property="TextWrapping" Value="Wrap"/>
                <Setter Property="Typography.StylisticSet20" Value="True"/>
                <Setter Property="Typography.DiscretionaryLigatures" Value="True"/>
                <Setter Property="Typography.CaseSensitiveForms" Value="True"/>
            </Style>

F5 키를 눌러 앱을 빌드 및 실행합니다. 이제 인사말이 큰 녹색 문자로 표시됩니다.

요약

축하합니다. 첫 번째 자습서를 마쳤습니다! Metro 스타일 앱에 콘텐츠를 추가하는 방법을 알아보았습니다. 또한 대화형 작업을 추가하는 방법과 앱의 스타일을 지정하는 방법도 알아보았습니다.

샘플 다운로드

난관에 봉착했나요? 또는 작업의 확인이 필요하세요? 그렇다면 완성된

C# 및 Visual Basic으로 시작하기: Hello World 및 블로그 뷰어 샘플을 다운로드하세요.

처음 만들어 본 윈도우8 앱 개발 과정 캡쳐

● 예제를 참고로 작성
http://msdn.microsoft.com/ko-kr/library/windows/apps/hh986965.aspx

엔돌슨의 IT이야기

윈도우8 개발 Hello, world! 출력하기

시작 페이지 수정

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

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

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

테마 선택

표준 스타일 사용

직접 스타일 만들기

요약

샘플 다운로드

티스토리툴바

윈도우8 개발 Hello, world! 출력하기

시작 페이지 수정

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

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

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

테마 선택

표준 스타일 사용

직접 스타일 만들기

요약

샘플 다운로드

관련글

티스토리툴바