생애 첫 번째 윈도우 폰 7 애플리케이션 만들기 1회

지난 강좌에서 만들어 본 Hello phone 프로젝트는 워밍업으로 생각하고, 이제 본격적으로 첫 애플리케이션을 만들어 보자. 이번 강좌도 윈도우 폰 개발 도구로 무료 Microsoft Visual Studio 2010 Express for Windows Phone과 윈도우 폰 에뮬레이터를 이용한다. 또한 윈도우 폰 7 트레이닝킷을 기본 경로로 설치했다는 가정하에 진행한다.

먼저 Visual Studio에서 윈도우 폰 애플리케이션 프로젝트를 생성하자. 생성하는 방법은 다음의 단계를 따른다.

1. [시작] | [모든 프로그램] | [Microsoft Visual Studio 2010 Express] | [Microsoft Visual Studio 2010 Express for Windows Phone] 클릭.

2. [File] | [New Project] 클릭.

3. [New Project] 대화 상자에서 [Silverlight for Windows Phone] 범주의 [Windows Phone Application] 템플릿을 선택하고, [이름]은 "WindowsPhonePuzzle"로 정한 뒤 [위치]는 앞서 설치한 윈도우 폰 7 트레이닝 킷의 위치(C:\WP7TrainingKitOffline\Labs\YourFirstWP7Application\Source\Ex1-CreatingWP7Apps)를 선택한다. 솔루션 이름은 편의상 "Begin"으로 입력한다.

위의 프로젝트 생성단계를 마치고 나면  Visual Studio의 솔루션 탐색기에 관련 하나의 솔루션과 하나의 프로젝트가 로드된다.

[그림 1] 솔루션 탐색기에 로드된 WindowsPhonePuzzle 애플리케이션

이제 홈 페이지를 위한 UI를 만들어 보자. 이번 작업에서는 애플리케이션의 홈 페이지에 대한 사용자 인터페이스를 만든다. 이 페이지는 시작 화면을 표시한다. 여기에는 애플리케이션을 나타내는 이미지와 시작 화면을 해제하고 게임 페이지를 찾는 버튼을 포함한다.

1. 우선 프로젝트에서 폴더를 만들어 애플리케이션이 사용하는 이미지를 포함하도록 한다. [솔루션 탐색기]에서, [WindowsPhonePuzzle] 프로젝트를 오른 클릭하고 [Add]|[New Folder]를 선택한다. 폴더 이름을 [Assets]으로 변경한다.

[그림 2] 새로운 Assets 폴더를 나타낸 솔루션 탐색기

2. 이제, 프로젝트에서 애플리케이션에서 사용하는 이미지를 추가한다. [솔루션 탐색기]에서 [Assets]를 오른 클릭하고 [Add]|[Existing Item]를 선택한다. [Add Existing Item] 대화상자에서 추가할 이미지 SplashImage.jpg와 Puzzle.jpg를 찾아서 등록한다. (해당 이미지는 최초에 설치한 트레이닝 킷의 [Source] 폴더에서 찾는다.)

비주얼 스튜디오에서 Silverlight for Windows Phone 프로젝트에 리소스 파일을 추가한 후 [Build Action] 값을 설정해 배포용으로 이들을 구성할 수 있다. 각 추가된 이미지는 프로젝트에 포함되어 빌드 동작에서 Resource로 설정되는데, 이는 프로젝트 어셈블리로 파일을 내장하는 것이다.

3. [솔루션 탐색기]에서 MainPage.xaml을 더블 클릭해 디자이너에서 이 파일을 로드한다.

4. [디자인] 뷰에서, "MY APPLICATION"이라는 TextBlock을 선택하고 [F4]를 눌러 속성창을 연다. [Text] 속성의 값을 "WINDOWS PHONE PUZZLE"로 변경한다.

[그림 3] 속성 창의 UI 요소 구성

5. "pane name"이라고 되어 있는 TextBlock을 선택하고 나서 [Text] 속성을 "start"로 변경한다.

6. 기본 윈도우 폰 애플리케이션 템플릿에서 생성한 XAML 마크업에서 "LayoutRoot"이라는 Grid 요소를 찾는다. 이 요소의 목적은 페이지의 요소를 배열하는 것이다. 루트 Grid 요소는 각각을 Grid.Row 속성을 정의해 바깥 그리드의 다른 행에 할당한 다른 중첩 요소를 포함할 수 있다. row1에 할당된 ContentPanel이라는 Grid 요소를 찾아서 다음 XAML 마크업을 넣는다.

<Grid x:Name="LayoutRoot" Background="Transparent">
  ...
  <!--ContentPanel - place additional content here-->
  <Grid x:Name="ContentPanel" Grid.Row="1" Margin="12,0,12,0">
    <Grid.RowDefinitions>
      <RowDefinition Height=".8*" />
      <RowDefinition Height=".2*" />
    </Grid.RowDefinitions>
    <Image Source="Assets/SplashImage.jpg" VerticalAlignment="Center" HorizontalAlignment="Center" Width="471" Height="492"  />
    <Button Content="START!" Name="StartButton" Grid.Row="1" VerticalAlignment="Center" HorizontalAlignment="Center" />
  </Grid>
</Grid>

추가한 마크업은 두개의 행을 만든다. 첫 번째 행은 시작화면에 대한 이미지를 포함하고, 두 번째 행은 페이지를 해제하고 메인 퍼즐 페이지를 탐색하는 버튼을 담는다.

7. 해당 버튼에 대한 이벤트 핸들러를 생성한다. 디자이너 화면의 [START]라는 버튼을 더블 클릭한다. "Click" 이벤트에 대한 구독이 만들어지고 코드 숨김파일이 열리며 커서가 StartButton_Click 이벤트 핸들러 메서드에 위치한다. 다음의 코드를 이 메서드의 바디에 붙여 넣는다.

private void StartButton_Click(object sender, RoutedEventArgs e)
{
  // navigate
  this.NavigationService.Navigate(new Uri("/PuzzlePage.xaml", UriKind.Relative));
}

PhoneApplicationPage 클래스는 NavigationService속성을 통해 페이지를 탐색하는 메서드와 속성을 제공한다. NavigationService의 Navigate 메서드를 호출하고 그 페이지에 매개변수로 URI를 넘길수 있다. GoBack과 GoForward 메서드를 사용해 탐색 이력의 정방향/역방향 탐색을 할 수 있다. 하드웨어 뒤로가기 버튼 또한 애플리케이션 내에서의 역방향 탐색을 제공한다. 위에서 나타낸 이벤트 핸들러는 NavigationService를 사용해 PuzzlePage.xaml로 간다.