티스토리 뷰

 

VS 2010 에서 Windows Phone Application 프로젝트를 생성해서 프로젝트 구조 및 Windows Phone 7 응용 프로그램에 대한 내용을 알아보고 간단한 디자인과 코드를 추가해서 디버깅, 실행해보도록 하겠습니다.

먼저 VS 2010을 시작하여 Silverlight for Windows Phone 프로젝트를 생성합니다.

프로젝트이름을 HelloWindowsPhone 이라는 프로젝트로 생성합니다.
 

생성된 프로젝트의 디자인, 솔루션 탐색기, App.xaml 등을 살펴봅니다 

프로젝트를 빌드하고 프로젝트를 시작해봅니다. 잠시 시간이 지나면 아래와 같은 에뮬레이터 화면을 볼 수 있습니다. 

    

이제 간단한 사용자 디자인을 해보도록 합니다. 아래와 같은 디자인으로 구성됩니다.

 

 

솔루션 탐색기에서 MainPage.xaml을 더블클릭하고 XAML 편집기에서 아래와 같이 코드를 작성합니다. 디자인 창으로 컨트롤을 끌어다 놓거나 XAML을 편집합니다.

Grid RowDefiniton을 아래와 같이 추가합니다  

<Grid.RowDefinitions>

<RowDefinition Height="Auto"/>

<RowDefinition Height="Auto"/>

<RowDefinition Height="*"/>

</Grid.RowDefinitions>


StackPanel 부분을 아래와 같이 변경합니다.

<StackPanel x:Name="TitlePanel" Grid.Row="0" Margin="24,24,0,12">

<TextBlock x:Name="ApplicationTitle" Text="Windows Phone 7" Style="{StaticResource PhoneTextNormalStyle}"/>

<TextBlock x:Name="PageTitle" Text="Hello Phone" Margin="-3,-8,0,0" Style="{StaticResource PhoneTextTitle1Style}"/>

</StackPanel 

ContentGrid의 하위 콘텐트를 아래와 같이 구성합니다. TextBox Button으로 구성됩니다.

<!--ContentPanel - place additional content here-->

<Grid x:Name="ContentGrid" Grid.Row="1">

<Grid.ColumnDefinitions>

<ColumnDefinition Width="*" />

<ColumnDefinition Width="Auto"/>

</Grid.ColumnDefinitions>

<TextBox Grid.Column="0" Name="MessageTextBox" FontSize="{StaticResource PhoneFontSizeExtraLarge}" Margin="20,20,10,20"/>

<Button Grid.Column="1" Name="ClickMeButton" Content="Click Me" HorizontalAlignment="Right" Padding="4" Margin="10,20,20,20" />

</Grid 

방금 위에서 수정한 Grid 아래 TextBlock을 아래와 같이 추가합니다.

<Grid Grid.Row="2">

<TextBlock Name="BannerTextBlock" FontSize="30"

Foreground="#FFFF9A00" HorizontalAlignment="Stretch"

TextWrapping="Wrap" TextAlignment="Center" FontWeight="Bold" />

</Grid
 

Click-Me 라는 버튼을 더블 클릭하거나 속성 창의 이벤트에서 Click 이벤트를 생성합니다

  

이벤트의 C# 코드는 아래와 같이 작성합니다.

private void ClickMeButton_Click(object sender, RoutedEventArgs e)

{

BannerTextBlock.Text = MessageTextBox.Text;

MessageTextBox.Text = String.Empty;

 

작성한 C# 코드의 첫 라인에 커서를 위치시키고 F9를 클릭해서 중단점을 아래와 같이 설정합니다 

 

에뮬레이터에서 장치의 키보드를 이용해서 값을 입력하고 버튼을 클릭하면 중단점으로 이동하게 됩니다 

  

중단점에서 지역 창이나 커서를 이용해서 사용자가 입력한 값을 확인할 수 있습니다.

F11을 눌러 한 단계씩 실행해봅니다 

 

이상으로 Windows Phone 7 Hello World를 살펴보았습니다. C#은 동일하고 XAML Silverlight 3 에서의 내용과 동일합니다. C# Silverlight 에 대한 내용을 알고 계시면 Windows Phone 7 에 쉽게 접근이 가능합니다.

VS 2010 뿐만 아니라 Expression Blend for Windows Phone을 통해서 XAML 디자인과 애니메이션 등을 진행할 수 있습니다.

 

댓글