1. 윈도우폰을 개발하기 위해서 먼저 프로젝트를 생성한다.
- SDK를 설치 하면 [파일]-[새로 만들기]-[프로젝트]를 눌렀을 때 'Visual C#'에서 'Silverlight For Windows Phone'을 볼 수 있다.
2. OK를 누르면 아래와 같이 프로젝트가 생성된다.
3. Solution Explorer를 확인 보면 아래 이미지와 같다.
중요한 파일은 'App.xaml'과 ' MainPage.xaml' 파일이다.
- App.xaml 파일은 Application 전체에서 사용되는 자원(Resource)를 저장하는데 사용한다. 해당하는 자원으로는 색 스키마, 그레이디언트 브러시, 스타일 등을 들수 있다.
- MainPage는 실버라이트 프로그램에서 두 번째로 중요한 클래스이다. 두 번째 스켈레톤 파일인 MainPage.xaml과 MainPage.xaml.cs에서 구현된다. 소규모 실버라이트 프로그램이라면 아마 이 두 파일을 편집하면서 대부분의 시간을 보낼 것이다.
- MainPage.xaml의 루트 엘리먼트에 모든 페이지에 적용되는 FontFamily, FontSize, Foreground 설정이 있다. MainPage.xaml의 바디(body)에는 Grid, StackPanel, TextBlock이라는 이름을 갖는 엘리먼트를 부모-자식 관계를 가지도록 선언 되어 있다.
4. 비주얼스튜디오에서 생성한 실버라이트 프로그램의 시각적 트리는 아래와 같다.
PhoneApplicationFrame
PhoneApplicationPage
Grid (이름 "LayoutRoot")
StackPanel (이름 "TitlePanel")
TextBlock (이름 "ApplicationTitle")
TextBlock (이름 "PageTitle')
Grid (이름 "ContentPanel") |
제목 줄을 제외한 그리드 부분에 해당하는 화면 공간을 콘텐트 영역이라고 하고 TextBlock을 넣어보자.
|
<phone:PhoneApplicationPage
x:Class="HelloWindowsPhoneApp.MainPage"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:phone="clr-namespace:Microsoft.Phone.Controls;assembly=Microsoft.Phone"
xmlns:shell="clr-namespace:Microsoft.Phone.Shell;assembly=Microsoft.Phone"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
mc:Ignorable="d" d:DesignWidth="480" d:DesignHeight="768"
FontFamily="{StaticResource PhoneFontFamilyNormal}"
FontSize="{StaticResource PhoneFontSizeNormal}"
Foreground="{StaticResource PhoneForegroundBrush}"
SupportedOrientations="Portrait" Orientation="Portrait"
shell:SystemTray.IsVisible="True">
<!--LayoutRoot is the root grid where all page content is placed-->
<Grid x:Name="LayoutRoot" Background="Transparent">
<Grid.RowDefinitions>
<RowDefinition Height="Auto"/>
<RowDefinition Height="*"/>
</Grid.RowDefinitions>
<!--TitlePanel contains the name of the application and page title-->
<StackPanel x:Name="TitlePanel" Grid.Row="0" Margin="12,17,0,28">
<TextBlock x:Name="ApplicationTitle" Text="MY APPLICATION" Style="{StaticResource PhoneTextNormalStyle}"/>
<TextBlock x:Name="PageTitle" Text="page name" Margin="9,-7,0,0" Style="{StaticResource PhoneTextTitle1Style}"/>
</StackPanel>
<!--ContentPanel - place additional content here-->
<Grid x:Name="ContentPanel" Grid.Row="1" Margin="12,0,12,0">
<TextBlock Text="Hello, Windows Phone 7!" HorizontalAlignment="Center" VerticalAlignment="Center" />
</Grid>
</Grid>
<!--Sample code showing usage of ApplicationBar-->
<!--<phone:PhoneApplicationPage.ApplicationBar>
<shell:ApplicationBar IsVisible="True" IsMenuEnabled="True">
<shell:ApplicationBarIconButton IconUri="/Images/appbar_button1.png" Text="Button 1"/>
<shell:ApplicationBarIconButton IconUri="/Images/appbar_button2.png" Text="Button 2"/>
<shell:ApplicationBar.MenuItems>
<shell:ApplicationBarMenuItem Text="MenuItem 1"/>
<shell:ApplicationBarMenuItem Text="MenuItem 2"/>
</shell:ApplicationBar.MenuItems>
</shell:ApplicationBar>
</phone:PhoneApplicationPage.ApplicationBar>-->
</phone:PhoneApplicationPage> |
파란색 폰트로 표시한 부분을 입력하고 "빌드" 하면 'Windows Phone 7 Emulator"에 아래와 같은 화면이 나타난다.
이것으로 간단하게 프로그램의 맨 첫번째 단추인 "Hello"를 화면에 띄웠다.
PhoneApplicationPage, Grid, StackPanel, TextBlock은 모두 실버라이트 클래스이다., XML안에서는 엘리먼트가 된다. 클래스 속성(Property)은 XML 엘리먼트의 특성(Attribute)과 연결된다.
윈도우 폰7의 실버라이트 프로그램의 시각적 구조(Visual layout)는 항상 PhoneApplicationFrame 형식의 개체로 시작되고 이 개체를 하나만 가지고 있도 보통 프레임이라고 부른다. 프로그램은 PhoneApplicationPage 개체의 여러 인스턴트를 가질수 있고 이것을 페이지라고 부른다.
위 예제 결과는 페이지를 1개 가지고 있는 프로그램이다.
