윈폰 매뉴얼

3-3-2.프레임과 페이지

실버라이트 응용 프로그램은 Application 클래스로 표현되며 이 객체를 정의하는 파일이 바로 App.xaml과 App.xaml.cs이다. 이 파일을 열어 보면 Application으로부터 파생된 App 클래스를 선언함으로써 응용 프로그램을 정의한다. 앱은 하나의 프레임과 여러 개의 페이지로 구성된다. 프레임은 프로그램의 화면이라고 할 수 있으며 PhoneApplicationFrame 클래스로 표현한다. App.xaml.cs에 선언된 RootFrame이 바로 프레임이다.

프레임 안에는 여러 개의 페이지가 존재한다. 페이지는 PhoneApplicationPage 클래스로 표현하며 MainPage.xaml.cs는 이 클래스로부터 파생된 MainPage 클래스를 정의한다. 마법사가 만든 프로젝트에는 MainPage밖에 없지만 이후 SencondPage, ThirdPage 등의 페이지를 얼마든지 추가할 수 있다. 페이지 안에는 패널 및 컨트롤들이 계층적으로 배치되어 사용자 UI를 구성한다. 이 배치 관계를 한눈에 보고 싶으면 툴바에서 Document Outline창을 열어 보면 된다. 다음은 바로 앞에서 만든 Canvas1 예제의 객체 배치도이다.

페이지를 루트로 하며 최상위에 그리드가 있고 그안에 제목을 표시하는 스택 패널과 내용을 표시하는 컨텐트 패널 그리드가 있다. 컨텐트 패널 안에는 캔버스가 있고 캔버스안에 버튼과 사각형 도형들이 다수 배치되어 있다. 객체끼리의 포함관계를 보여주는 이 계층도를 비주얼 트리(Visual Tree)라고 한다. 비주얼 트리를 통해 객체간의 중첩 구조를 한눈에 살펴볼 수 있으며 트리에서 객체를 선택하면 디자인 뷰에도 선택된다.

프로그램을 구성하는 요소들 중 앱이나 프레임은 단지 존재할 뿐이며 특별한 경우가 아니면 건드릴 필요가 없다. 반면 페이지는 전체적인 배치와 화면의 속성을 조정하기 위해 프로그래밍할 경우가 많다. 다음은 페이지의 속성들이며 이 속성값들은 페이지 전체의 모양과 동작에 영향을 끼친다.

속성	설명
FontFamily	글꼴의 모양을 지정한다.
FontSize	글꼴의 크기를 지정한다.
Foreground	전경 색상을 지정한다.
SupportedOrientations	화면의 가능한 방향을 지정한다.
Orientation	초기 방향값을 지정한다.
shell:SystemTray.IsVisible	위쪽의 시스템 트레이를 보일 것인지 아닌지를 지정한다. 디폴트는 True이나 False로 변경하면 전체 화면을 다 사용하는 앱을 만들 수 있다.

마법사가 만든 프로젝트는 이 속성들을 기본값으로 지정하지만 필요하다면 XAML 파일에서 PhoneApplicationPage 엘리먼트의 속성을 편집하여 언제든지 변경할 수 있다. 글꼴 관련 속성은 페이지에 속한 모든 컨트롤에 적용되어 일관된 글꼴이 적용되도록 한다. SupportedOrientations 속성은 가능한 화면 방향값의 종류이며 다음 셋중 하나의 값을 지정한다.

값	설명
Portrait	세로 방향만 지원한다.
Landscape	가로 방향의 왼쪽, 오른쪽 두 가지를 지원한다.
PortraitOrLandscape	세 방향을 모두 지원한다.

Orientation 속성은 페이지의 초기 방향을 지정한다. 지원 가능한 방향과 초기 방향은 의미가 다르다는 것을 유의하자. 지원 가능하다는 것은 장비를 회전시키면 해당 방향으로 바뀔 수 있다는 뜻이고 초기 방향은 최초 실행시의 방향을 지정한다. 초기 방향은 다음과 같은 값들을 지정할 수 있다.

속성값	설명
None	초기 방향을 지정하지 않는다.
Portrait, PortraitUp	세로 방향이다.
Landscape	가로 방향이다.
LandscapeLeft	가로 왼쪽 방향이다.
LandscapeRight	가로 오른쪽 방향이다.
PortraitDown	이 모드는 현재 지원하지 않는다.

수직 방향 하나가 있고 수평은 왼쪽, 오른쪽 두 가지가 있다. 수직으로 거꾸로 선 방향은 별 실용성이 없으므로 지원하지 않는다. 마법사로 프로젝트를 새로 생성하면 세로 모드만 지원하며 초기 방향도 세로이다.

SupportedOrientations="Portrait" Orientation="Portrait"

화면 방향의 디폴트는 세로 방향인 Portrait여서 화면이 항상 세로 방향이다. 에뮬레이터를 돌려도 화면은 언제나 세로 방향으로 유지된다. 과연 그런지 Canvas1 예제를 실행한 후 에뮬레이터를 왼쪽으로 돌려 보자. 에뮬레이터 오른쪽의 툴바에서 버튼을 누르면 왼쪽으로 회전된다. 장비의 회전은 사용자가 직접 하는 것이며 코드에서 강제로 특정 방향으로 바꾸는 방법은 없다. 에뮬레이터의 이 버튼은 실장비를 회전시키는 흉내를 낸다.

에뮬레이터만 돌아갈 뿐 화면에는 아무런 변화가 없다. 그러나 SupportedOrientations 속성을 변경하면 가로 방향으로 바꿀 수 있으며 세로와 가로를 둘 다 지원할 수도 있다. 다음 예제를 보자.

Canvas2

<phone:PhoneApplicationPage

x:Class="Canvas2.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="PortraitOrLandscape" Orientation="Portrait"

shell:SystemTray.IsVisible="True">

<Grid.RowDefinitions>

</Grid.RowDefinitions>

</StackPanel>

<Rectangle Fill="Red" Canvas.Left="178" Canvas.Top="253"

Width="100" Height="100"/>

</Canvas>

</Grid>

</phone:PhoneApplicationPage>

페이지의 SupportedOrientations 속성을 PortraitOrLandscape로 변경하여 가로, 세로를 모두 지원하도록 했다. 컨텐트 패널의 중앙에는 빨간색 사각형을 하나 배치하였다. 캔버스의 크기는 대략 (456, 607) 정도이고 사각형은 100*100의 크기를 가지므로 (178, 253) 좌표에 놓으면 정확하게 화면 중앙이 된다. 과연 그런지 확인해 보자.

디버거로 캔버스 크기를 조사하고 대충이나마 계산하여 좌표를 결정했으므로 사각형은 과연 캔버스의 중앙에 나타난다. 그러나 이 좌표는 어디까지나 현재 장비에서만 중앙일 뿐이며 환경이 바뀌면 그렇지 않을 수도 있다. 장비의 해상도가 높아지면 캔버스가 커지며 이렇게 되면 (178, 253) 좌표는 중앙보다는 훨씬 더 왼쪽 위가 될 것이다.

장비가 바뀌지 않더라도 화면 방향이 바뀌면 사각형은 역시 중앙을 벗어난다. 에뮬레이터를 왼쪽으로 회전시키면 480*800 해상도가 800*480으로 바뀌며 따라서 캔버스 크기도 바뀌기 때문이다. 실장비에서는 센서에 의해 화면 방향이 수시로 바뀐다. 가로, 세로 방향을 다 지원하도록 페이지 속성을 설정했으므로 에뮬레이터를 돌리면 배치가 가로 기준으로 바뀌지만 사각형의 좌표까지 조정해 주는 것은 아니다.

보다시피 캔버스의 절대 좌표 지정 방식은 테스트 예제를 만들 때나 컨트롤의 좌표를 섬세하게 조정할 때는 편리하지만 장비 호환성에는 지극히 불리하다. 반면 스택 패널이나 그리드는 화면의 크기를 고려하여 차일드의 위치나 크기를 결정하므로 이런 문제가 훨씬 덜하다. 과연 그런지 그리드로 똑같은 예제를 만들어 보자.

GridOrient

<phone:PhoneApplicationPage

x:Class="GridOrient.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="PortraitOrLandscape" Orientation="Portrait"

shell:SystemTray.IsVisible="True">

<Grid.RowDefinitions>

</Grid.RowDefinitions>

</StackPanel>

<Grid.RowDefinitions>

</Grid.RowDefinitions>

<Grid.ColumnDefinitions>

</Grid.ColumnDefinitions>

<Rectangle Fill="Red" Grid.Row="1" Grid.Column="1"

Width="100" Height="100"/>

</Grid>

</phone:PhoneApplicationPage>

3행 3열의 그리드를 생성하고 정중앙의 1,1 셀에 사각형을 배치했다. 행열의 속성에 특별히 크기를 지정하지 않았으므로 모든 셀은 균등한 크기를 가지며 따라서 중앙셀은 항상 그리드의 가운데 자리를 차지할 것이다. 이 셀에 사각형을 놓았으므로 화면 회전과 상관없이 사각형도 언제나 그리드의 중앙에 배치된다.

설사 장비의 해상도가 바뀌더라도 그리드는 새 해상도에 맞게 균등 분할을 조정하므로 가운데 셀이 항상 중앙이다. 원론적인 방법을 설명하기 위해 9셀 그리드를 사용했는데 사실 이 예제는 셀을 9개나 나눌 필요도 없이 1셀 그리드안에 사각형을 배치하기만 해도 문제가 해결된다. 다음과 같이 코드를 변경해도 효과는 동일하며 안쪽의 그리드는 삭제해도 상관없다.

</Grid>

그리드의 셀안에서 모든 컨트롤은 자동으로 중앙 정렬되기 때문이다. 캔버스는 오로지 지정한 좌표에 컨트롤을 무식하게 배치할 뿐이지만 그리드는 균등 분할, 비율 분할 등의 섬세한 배치 규칙을 제공하고 셀 내에서 정렬까지 조정할 수 있다. 이런 장치를 잘 활용하면 일관된 배치를 쉽게 만들어낼 수 있으며 코드까지 활용하면 방향 전환 이벤트를 받아 방향에 따라 완전히 다른 배치를 만들 수도 있다.