본문 바로가기
Programming/Windows Phone

Hello Phone 사용자 인터페이스 설계하기

by 강철 벼룩 2010. 12. 16.
이번 시간에는 HelloPhone 애플리케이션에 대한 UI 요소를 만들어 본다. 이 애플리케이션은 아주 단순하다. 작업을 완료하면, 애플리케이션 UI는 캡션과 텍스트 상자, 그리고 버튼을 포함하게 된다. 이 애플리케이션을 사용하는 방법은 텍스트 상자에 약간의 텍스트를 입력하고 단추를 클릭하면, 애플리케이션에서 입력한 텍스트로 배너를 표시한다.

1. [솔루션 탐색기]에서 MainPage.xaml을 더블클릭해 디자이너에서 이 파일을 연다.

디자이너는 XAML 파일을 편집하기 위한 두 가지의 별도 뷰인 Design 뷰와 XAML 뷰를 제공한다. 디자인 모드에서 도구상자에서 컨트롤을 끌어다 놓는 인터랙티브 캔버스를 제공하고 있고 여기서 컨트롤들의 선택과 크기 변경, 이동, 속성 설정을 할 수 있다. XAML 모드에서는 마크업 편집기를 제공하므로 해당 페이지의 XAML을 편집할 수 있다. 디자이너 창의 탭으로 모드 변경을 한다. 분할 모드를 선택할 수도 있는데, 이 때는 편집 창이 동시에 두 개의 모드를 표시한다. 분할 모드에서 ExpandPane/CollapesePane 단추를 사용해 현재 모드의 보기 영역을 최대화 할 수 있다.

2. IDE에서 디자인 모드로 개체를 조작할 수 있지만, 이 작업에서는 XAML을 직접 편집하는데 초점을 둔다. 편집을 완료하고나면, 디자인 보기로 돌아와서 작업 결과를 검토해볼 것이다. 편집 모드를 XAML 보기로 설정하고 보기 영역을 최대화 하려면, 디자이너 창의 오른쪽 끝에 있는 XAML 탭을 더블 클릭한다. 마우스 커서를 탭위에 가져가면 해당 탭에 대한 툴팁을 표시한다.

[그림 32] XAML 뷰를 보여주는 XAML 디자이너

3. 기본 윈도우 폰 애플리케이션 템플릿이 생성한 XAML 마크업에서 LayoutRoot라는 Grid 컨테이너 요소를 찾는다. 이 것은 해당 페이지에서 요소들을 배치하기 위한 목적을 가진다. Grid 컨테이너의 RowDefinition 속성내에서 두 개의 기존 열 사이에 열을 추가하고 Height 속성을 Auto로 설정한다. 이 행에는 곧 텍스트 상자와 버튼을 하나 포함할 것이다.

...
  <Grid x:Name="LayoutRoot" Background="Transparent">
    <Grid.RowDefinitions>
      <RowDefinition Height="Auto"/>
      <RowDefinition Height="Auto"/>
      <RowDefinition Height="*"/>
    </Grid.RowDefinitions>
     ...
  </Grid>
</phone:PhoneApplicationPage>

Grid는 다른 컨트롤에 대한 컨테이너로 동작하는 레이아웃 요소다. 주요 목적은 자식 컨트롤의 위치를 정하고 배치하는 것이다. 몇몇 레이아웃 컨트롤은 대체 레이아웃 동작을 제공하기 위해 존재한다.

Canvas: 캔버스 영역에 상대적인 좌표를 사용해 자식 요소를 명시적으로 배치할 수 있는 영역을 정의한다.
Grid: 열과 행을 구성하는 유연한 그리드 영역을 정의한다.
StackPanel: 가로 또는 세로로 지정할 수 있는 한 줄에 자식 요소들을 배치한다.

더 자세한 내용은 실버라이트 레이아웃 시스템(
http://msdn.microsoft.com/ko-kr/library/cc645025(VS.95).aspx)을 참조하자.

4. 루트 Grid 요소는 다른 중첩 요소를 담고 있는데 각각은 Grid.Row 속성을 정의해 바깥 Grid의 다른 행에 할당된다. TitlePanel이라는 Grid 요소를 찾는다. 안쪽 Grid 내부의 첫 번째 TextBlock 요소의 Text 속성을 "Windows Phone 7" 문자열로 설정한다. 마찬가지로, 두 번째 TextBlock 요소의 Text 속성을 "Hello Phone"으로 설정한다.

[그림 33] 애플리케이션 캡션 설정

자식 요소를 컨테이너 그리드의 주어진 행에 할당하려면, 자식 요소 각각은 연결된 속성인 Grid.Row 속성에 대한 값을 지정해야 한다. 연결된 속성을 사용하면 다른 자식 요소에 부모 요소에서 정의한 속성에 대한 고유한 값을 지정할 수 있다. 이 경우 Grid 요소에 속하는 Row 속성이다.


5. 이제 ContentPanel이라는 Grid 요소를 찾아서 이 요소 내에 다음 XAML 마크업을 붙여 넣자

...
<Grid x:Name="LayoutRoot" Background="Transparent">
  ...
  <!--ContentPanel - place additional content here-->
  <Grid x:Name="ContentPanel" Grid.Row="1" Margin="12,0,12,0">
    <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>
...

Grid는 ColumnDefinitions 컬렉션에서 정의한 대로 각 열의 너비를 기반으로 페이지에서 자식 컨트롤을 배열한다. 첫 번째 열의 너비는 *로 지정되어 있는데, 이는 다른 모든 열이 할당된 이후 해당 행에서 사용되지 않은 공간을 채우도록 확장한다. 그리고 두 번째 열의 Auto는 해당 열의 콘텐츠에 맞도록 열의 크기를 조정한다.

6. 페이지의 디자인을 완료하기 위해, 사용자가 입력한 메시지를 배너로 담는 3 번째 행을 추가한다. 이 행을 만들려면, 다음 XAML 마크업을 바깥 Grid의 종료 태그 바로 전에 삽입한다.

...
<Grid x:Name="LayoutRoot" Background="Transparent">
  ...
  <Grid Grid.Row="2">
    <TextBlock Name="BannerTextBlock" Style="{StaticResource PhoneTextExtraLargeStyle}"
               Foreground="#FFFF9A00" HorizontalAlignment="Stretch"
               TextWrapping="Wrap" TextAlignment="Center" FontWeight="Bold" />
  </Grid>
</Grid>
...

7. 해당 창의 오른쪽 끝에 있는 [Design] 탭을 클릭해서 디자인 모드로 전환한다. 페이지의 컨트롤 레이아웃이 아래 그림과 같은지 검토한다.

[그림 34] 디자인 모드에서 페이지를 확인한다.