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

 

이번에는 총 4번에 거쳐 퍼즐 보드를 표시하고 게임을 실행하는 페이지를 만들어 본다. 페이지는 클릭 시에 여러 조각으로 나눠진 후 랜덤 방식으로 보드에 재배치된 이미지를 표시 한다.  게임의 로직은 PuzzleGame 클래스에 포함되어 있다. 페이지의 컨트롤들의 레이아웃을 생성한 뒤 보드를 초기화하고 사용자 인터페이스 이벤트에 응답하는데 필요한 애플리케이션 로직을 추가한다. 그 다음 멀티 터치 지원을 추가해 사용자가 손가락으로 보드상의 퍼즐 조각을 드래그해 재 배열하도록 해준다. 마지막 단계로, 퍼즐을 풀어 성공할 때 멋있는 시각적 효과를 생성하는 애니메이션 스토리 보드를 만든다. 

이번 3회에서는 새로운 페이지를 애플리케이션에 추가해 퍼즐 보드를 표시하고 게임을 하는 동안 수행한 전체 이동 횟수를 가지는 상태 패널 뿐만 아니라 퍼즐 이미지를 표시하는데 필요한 사용자 인터페이스 요소를 추가한다.

1. 앞서 "생애 첫 번째 윈도우 폰 7 애플리케이션 만들기2회"에서 완료한 단계 이후로 이어진다. [솔루션 탐색기]에서  WindowsPhonePuzzle 프로젝트 노드를 오른 클릭하고 [Add]|[New Item]을 선택한다. [Add New Item] 대화상자에서 템플릿 목록의 [Windows Phone Portrait] 페이지를 선택하고 이름을 "PuzzlePage.xaml"로 설정한 뒤 [Add]를 클릭해 프로젝트에 새로운 페이지를 추가한다.

[그림 7] 프로젝트 새로운 페이지 추가하기

2. 새로운 페이지의 XAML뷰에서  LayoutRoot 요소의 RowDefinitions 섹션을 찾아 첫 번째 행에 대한 Height 속성의 값을 0.2*로 설정한다.

[그림 8] 컨테이너 그리드의 레이아웃 구성하기

높이를 별표(*)로 지정하는 것은 해당 행이 다른 모든 행이 할당된 후에 레이아웃 그리드에서 가능한 영역까지 늘어난다는 뜻이다. 위 그림 8의 정의에서 첫 번째 행의 경우 처럼 배율 크기 조정 높이가 승수를 포함 할 때, 사용되지 않은 공간은 승수의 값에 기반을 둔 모든 "배율 크기 조정" 행 사이에 비례해 할당된다. 따라서 위 정의의 첫 번째 행은 가용한 공간의 1/6째를 차지 한다.

3. LayoutRoot 그리드 내부에서, 기본 페이지 템플릿의 일부로 포함된 기존 TitlePanel와 ContentPanel 요소를 삭제한다.

4.  RowDefinitions 바로 아래 다음의 강조된 코드에서 보인 것처럼 StackPanel 컨테이너 요소 두 개를 삽입한다.

<Grid x:Name="LayoutRoot" Background="Transparent">
  <Grid.RowDefinitions>
    <RowDefinition Height="0.2*"/>
    <RowDefinition Height="*"/>
  </Grid.RowDefinitions>
  <StackPanel Orientation="Vertical" VerticalAlignment="Stretch">
  </StackPanel>
  <StackPanel Orientation="Vertical" VerticalAlignment="Top" Grid.Row="1">
  </StackPanel>
</Grid>

5.  첫 번째 StackPanel 요소에서 다음의 강조된 XAML 마크업을 삽입한다.

 

...
<Grid x:Name="LayoutRoot" Background="Transparent">
  ...
  <StackPanel Orientation="Vertical" VerticalAlignment="Stretch">
    <Button x:Name="SolveButton" Content="SOLVE" Margin="10" HorizontalAlignment="Center" Click="SolveButton_Click" />
    <StackPanel x:Name="StatusPanel" Orientation="Horizontal" HorizontalAlignment="Center" Visibility="Collapsed">
      <TextBlock HorizontalAlignment="Center" Text="Your Moves: " TextWrapping="Wrap" Foreground="#FFD0D0D0" FontSize="17.333"/>
      <TextBlock x:Name="TotalMovesTextBlock" HorizontalAlignment="Center" Text="N" TextWrapping="Wrap" Foreground="#FFFFB000" FontSize="17.333"/>
    </StackPanel>
  </StackPanel>
  <StackPanel Orientation="Vertical" VerticalAlignment="Top" Grid.Row="1">
  </StackPanel>
</Grid>
...

6. 다음으로 두 번째 StackPanel 요소 내에 다음의 강조된 XAML 마크업을 삽입한다.

 

...
<Grid x:Name="LayoutRoot" Background="Transparent">
  ...
  <StackPanel Orientation="Vertical" VerticalAlignment="Top" Grid.Row="1">
    <Border x:Name="CongratsBorder" Height="30" Background="#FFF10DA2" HorizontalAlignment="Center" Width="443" RenderTransformOrigin="0.5,0.5" UseLayoutRounding="False" Opacity="0">
      <Border.RenderTransform>
        <TransformGroup>
          <ScaleTransform/>
          <SkewTransform/>
          <RotateTransform/>
          <TranslateTransform/>
        </TransformGroup>
      </Border.RenderTransform>
      <TextBlock HorizontalAlignment="Center" Text="CONGRATULATIONS!" TextWrapping="Wrap" Foreground="White" FontSize="17.333" VerticalAlignment="Center" FontWeight="Bold"/>
    </Border>
  </StackPanel>
</Grid>

…

 

이 Border 요소는 퍼즐을 풀었을 때 표시되는 메시지를 담는다. Border는 RenderTransform을 포함한다. 이 변환은 나중에 시각적 효과를 만들 애니메이션 스토리보드에 필요하다.

7. 아래쪽 StackPanel의 콘텐트를 완료하기위해 다음의 강조된 XAML을 이전 단계에서 삽입한 마크업 바로 아래에 넣는다.
 

...
<Grid x:Name="LayoutRoot" Background="Transparent">
  ...
  <StackPanel Orientation="Vertical" VerticalAlignment="Top" Grid.Row="1">
    <Border x:Name="CongratsBorder"...>
    </Border>
    <Border x:Name="border" BorderThickness="3" Background="#FF262626" HorizontalAlignment="Center" VerticalAlignment="Center" Padding="1" RenderTransformOrigin="0.5,0.5">
      <Border.RenderTransform>
        <TransformGroup>
          <ScaleTransform/>
          <SkewTransform/>
          <RotateTransform/>
          <TranslateTransform/>
        </TransformGroup>
      </Border.RenderTransform>
      <Border.BorderBrush>
        <LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">
          <GradientStop Color="#FFF10DA2" Offset="0"/>
          <GradientStop Color="#FFEE7923" Offset="1"/>
        </LinearGradientBrush>
      </Border.BorderBrush>
      <Canvas Height="435" Width="435">
        <Image x:Name="PreviewImage" Height="435" Width="435" Opacity="0.2" />
        <Canvas x:Name="GameContainer" Width="435" Height="435" />
      </Canvas>
    </Border>
    <TextBlock x:Name="TapToContinueTextBlock" HorizontalAlignment="Center" Text="Tap the picture to start the puzzle" TextWrapping="Wrap" Foreground="#FFD0D0D0" FontSize="17.333"/>
  </StackPanel>
</Grid>

 

위의 XAML 마크업은 여러 색을 사용하는 선형 그라데이션 브러시로 그린 Border 요소를 정의한다. 이 요소는 시각적 효과를 제공하기 위해 애니메이션 스토리보드를 생성할 때 필요한 RenderTransform 을 지정한다. Border  요소 내에는 하나의 Canvas 요소가 있다. 이 컨테이너 요소는 해당 영역에 상대적인 좌표를 사용해 다른 자식 요소를 명시적으로 위치시키는데 사용된다. Canvas 자식 요소들 중에는 퍼즐의 해답(PreviewImage)을 미리보기를 가진 워터마크를 보여주는 Image 요소와 퍼즐의 조각을 담는 내부 Canvas(GameContainer)가 있다. 또한 마크업은  게임 시작 방법 지시를 표시하는 TextBlock 요소 (TapToContinueTextBlock)를 포함한다. 이 요소는 게임이 진행되는 동안 숨겨져 있다.

8.  디자인 뷰로 전환해 페이지의 레이아웃을 확인한다.

[그림 9] 윈도우 폰 퍼즐 애플리케이션 사용자 인터페이스