안녕하세요. 너만바라보면입니다.

우리가 16강까지 윈도우폰7 망고에 대해 기능을 학습해 보는 시간을 가졌습니다. 윈도우폰7이 뭔지 망고버전은 무엇인지 알아보았습니다. 또한 윈도우폰7의 기능을 직접 실습해 보는 시간을 가져보았고 윈도우폰7 망고에서 새롭게 추가된 기능에 대해서도 실습을 통해 알아보았습니다.

 

제가 여러분들에게 가장 기본적인 기능은 알려드렸다고 생각하여 17강부터는 실제 어플리케이션을 제작하여 배포하는 과정을 알아보도록 하겠습니다. 우리는 이번강의부터 19강까지 3강에 걸쳐 직접 애플리케이션을 만들어보고 App Hub에 올리는 것을 알아보도록 하겠습니다.

 

우리가 직접 만들 애플리케이션은 퍼즐 게임 애플리케이션입니다. 퍼즐 게임을 한번이라도 다들 해보셨을것이라 생각합니다. 랜덤으로 섞이는 그림 조각을 완성시키는 것이죠?

우리는 이 애플리케이션에서 우리가 그동안 배웠던 것을 복습해보고 ISOLATE STORAGE를 이용하여 저장하는 방법도 배워볼 것입니다.

이 모든 자료는 msdn의 자료를 재구성 하였으므로 msdn의 강좌를 참고하셔도 상관 없습니다.

 

지금부터 시작하겠습니다. ~

 

1.PNG

우선 WindowsPhonePuzzle이라는 프로젝트 를 가진 Puzzle 솔루션을 생성합니다. 그 다음 Asset이라는 폴더를 생성하시고 이 게시물에 첨부된 압축파일을 푸셔서 Puzzle.jpg , SplashImage.jpg Asset 폴더 내에 가져옵니다. 이정도는 식은 죽 먹기이죠?

 

3.PNG

그 다음 해야할 일은 바로 타이틀을 바꾸는 일입니다. 위와 같이 바꾸셔도 되고 여러분들이 원하는 네임으로 하셔도 상관 없습니다.

4.PNG

그다음 가장 중요한 UI를 만드는 작업입니다. 위와 같이 작성해 주시면 됩니다.

 

5.PNG

위와 같은 UI가 완성됩니다. Start 버튼을 누르면 이미지가 랜덤으로 섞이면서 퍼즐을 맞춰야 하는 게임이 되겠죠?

 

6.PNG

버튼에 대한 이벤트 핸들러를 작성할 것입니다. 위 화면은 스타트 버튼을 클릭했을경우NavigationService Navigate 메서드를 호출하고 페이지의 URI를 매게변수로 전달 할 수 있습니다.

7.PNG

우리는 완성된 애플리케이션을 제작할 것입니다. 그렇기 때문에 에러페이지도 만들어 줘야 합니다. 잘못된 이벤트가 발생되었을때는 에러메시지를 띄워 사용자에게 알려줘야 겠죠? 에러페이지를 위의 화면과 같이 생성합니다.

8.PNG

위와 같이 ErrorPage.xaml 파일의 UI를 작성해 주세요.

9.PNG

그다음에는 ErrorPage.xamlNavigation 기능을 쓸 수 있도록 네임스페이스를 삽입합니다.

 

 10.PNG

ErrorPage.xaml.cs에서 더 작업해야 할 부분이 남아있습니다. 에러페이지를 작성했다고 끝난 것이 아니죠? 우리는 mainpage에서 에러가 날 경우 errorpage로 연결시켜줘야 합니다. 에러 페이지로 이동시 ErroText.Text로 연결되는 Exception 개체를 설정합니다.
11.PNG

 

그다음  에러 메시지를 표시하도록 이벤트 핸들러를 연결시켜야 합니다. App.xaml.cs 파일을 열어 App 클래스에서 Application_UnhandledException을 찾습니다. 그리고 위의 코드와 같이 바꿔줍니다. 그렇다면 Application_UnhandedException은 무엇일가요? 애플리케이션 차원에서 처리되지 않은 에러는 이 곳에서 완벽하게 처리됩니다. 우리가 이곳에서 모든 에러가 처리가 되야 하죠. e.Handler True로 설정하신 것을 보실 수 있습니다. 이것은  UnhandledException 핸들러가 완료된 후 추가로 처리하지 않기 위해서 설정한 것이죠.

이렇게 처리한 후 ErrorPage 클래스에 처리되지 않은 예외를 여기에 저장하고 난 뒤 오류 메시지를 표시하도록 Source에서 지정하였습니다. URI에 연결되어 에러메시지가 표시되는 것이죠.

사실 일반적으로 실습하는 단계에서는 이 과정을 생략하였습니다만 여러분들이 직접 애플리케이션을 제작해 배포할때는 꼭 고려해 보셔야 합니다. 에러메시지로 연결되지 않고 예외 발생시 그냥 무한정 뻗어(?)버린다면 그 애플리케이션은 사용자에게 외면을 받을 수 밖에 없을 것입니다.

 

우리가 저번시간에 작업했던 파일에서 계속 추가되는 작업입니다. PuzzzlePage.xaml 이라는 페이지를 추가합니다.

<!--LayoutRoot is the root grid where all page content is placed-->

<Grid x:Name="LayoutRoot" Background="Transparent">

        <Grid.RowDefinitions>

            <RowDefinition Height="0.2*"/>

            <RowDefinition Height="*"/>

        </Grid.RowDefinitions>

 

        <StackPanel Orientation="Vertical" VerticalAlignment="Stretch">

            <Button x:Name="SolveButton" Content="풀기" 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">

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

            <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="퍼즐을 시작하기 위해 그림을 누르세요." TextWrapping="Wrap"

                       Foreground="#FFD0D0D0" FontSize="17.333"/>

        </StackPanel>

    </Grid>

 

위의 화면과 같이 UI를 지정해 줍니다. 위의 xaml 코드는 여러 색상을 사용하는 Linear Gradient Brush로 그려지는 Border요소를 정의합니다. Border요소 내에는 하나의 Canvas 요소가 있는데요. 이 컨테이너 요소는 해당 영역에 상대적인 좌표를 이용해 다른 하위 요소의 위치를 명시적으로 지정하는 역할을 하기도 합니다.

 1.PNG

위의 화면이 퍼즐 애플리케이션의 UI 모습입니다. 사실 UI는 여러분들께서 위와 같이 똑 같은 형태로 안하셔도 되고 조금 변형을 주셔도 됩니다. 하지만 중요한건 TextBlock의 경우 게임이 진행될때는 나타나지 않는다는 점입니다. 그림을 누르고 난 뒤에도 저 메시지가 나오면 안되겠죠? 그것은 뒤에서 지정해 줄 것입니다.

이번시간에는 우리가 만들 애플리케이션의 에러페이지를 처리하는 방법과 퍼즐게임 UI를 제작해 보았습니다.

다음시간에는 퍼즐 보드를 제대로 만들어 보도록 하겠습니다. 다음시간에 뵙겠습니다. ~~





안녕하세요.윈도우폰에 관심이 많은 너만바라보면 입니다.