[Windows Phone 7] 실버라이트를 이용해 "Hello Silverlight" 출력하기

안녕하세요. 승미입니다.

지난 글에 이어 이번 글에서는 'Hello Silverlight'를 화면에 출력하는 간단한 실버라이트 어플리케이션을 만들어 WP7(Windows Phone 7) 에뮬레이터에서 작동시켜보겠습니다.

아직 실버라이트 WP7 개발 환경을 구축하지 않았다면 지난 글을 참고해서 개발 환경을 구축해주세요.

[Visual Studio 2010 Express for Windows Phone]을 실행시킵니다.

다음으로 실버라이트 프로젝트를 하나 생성하기 위해 [File] > [New Project]를 선택합니다.

그럼 다음 화면과 같이 생성할 프로젝트 타입을 선택하는 다이얼로그가 나타납니다.

왼쪽(Installed Templates)을 보면 Visual C#만 존재하며 그 하부에는 [Silverlight for Windows Phone] 그리고 [XNA Game Studio 4.0]만 존재하는 것을 확인할 수 있습니다.
즉, 현재는 WP7용 어플리케이션을 제작하는 방법으로 실버라이트나 XNA만 지원한다는 의미이며 아직 C, C++ SDK는 제공되지 않은 상태입니다.

우리는 실버라이트 프로젝트를 생성하기 위해 [Silverlight for Windows Phone]을 선택합니다.
그럼 화면 중앙 부분에 보이는 것처럼 총 3가지 타입의 실버라이트 프로젝트가 보여집니다.

1. [Windows Phone Application]은 빈 프로젝트로 이를 선택하면 최소한의 리소스만 생성되게 됩니다.
2. [Windows Phone List Application]은 기존 실버라이트 3의 [Navigation Project]와 비슷하며, 실제로 이 프로젝트를 생성하게 되면 여러 페이지를 Navigation하는 예제가 포함된 상태로 프로젝트가 생성됩니다.
3. [Windows Phone Class Library]는 기존 실버라이트 3의 [Class Library] 프로젝트와 비슷하며, 이 프로젝트에서는 다른 프로젝트에 참조되어 사용될 클래스 라이브러리를 생성하고자 할때 사용합니다.

[WIndows Phone Application]을 선택해 빈 프로젝트를 생성합니다.

그럼 위 화면과 같이 실버라이트 프로젝트가 생성됩니다.
가장 왼쪽은 xaml의 디자인을 보여주며 가운데는 xaml 파일의 내용을 보여줍니다.
가장 오른쪽에 있는 프로젝트 구조를 살펴보면 아시겠지만 기존 실버라이트 3 프로젝트 구조와 크게 다르지 않습니다.
하지만 XAML에는 PhoneApplicationPage라는 새로운 페이지를 사용하는데 이는 차후의 글에서 천천히 살펴보도록 하겠습니다.


그럼 화면에 'Hello Silverlight'를 출력하기 위해 XAML을 다음과 같이 작성합니다.

<Grid x:Name="LayoutRoot" Background="{StaticResource PhoneBackgroundBrush}">     <Grid.RowDefinitions>         <RowDefinition Height="Auto"/>         <RowDefinition Height="*"/>     </Grid.RowDefinitions>       <!--TitleGrid is the name of the application and page title-->     <Grid x:Name="TitleGrid" Grid.Row="0">         <TextBlock Text="MY APPLICATION" x:Name="textBlockPageTitle" Style="{StaticResource PhoneTextPageTitle1Style}"/>         <TextBlock Text="page title" x:Name="textBlockListTitle" Style="{StaticResource PhoneTextPageTitle2Style}"/>     </Grid>       <!--ContentGrid is empty. Place new content here-->     <Grid x:Name="ContentGrid" Grid.Row="1">         <TextBlock             Text="Hello Silverlight" FontSize="50"             VerticalAlignment="Center" HorizontalAlignment="Center"/>     </Grid> </Grid>

위에서 진하게 표시한 [TextBlock]만 추가한 것이며 나머지 부분은 디폴트로 생성되는 것을 사용했습니다.

이제 작성한 실버라이트 어플리케이션을 WP7 에뮬레이터를 이용해 실행시켜보겠습니다. 에뮬레이터를 실행시키기 위해 다음 화면과 같이 [Windows Phone 7 Emulator]를 선택합니다. 실제 디바이스가 있다면 이 부분을 [Windows Phone 7 Device]로 선택하시면 됩니다.

그리고 좌측에 있는 Debug 버튼을 클릭하거나 F5 버튼을 눌러서 어플리케이션을 실행합니다.

잠시 기다리면 먼저 WP7 Emulator가 실행되는 것을 확인할 수 있습니다. 그리고 다음 화면과 같이 'Hello Silverlight'가 화면에 출력되면 성공입니다.