내보내기(0) 인쇄
모두 확장
정보
요청한 주제가 아래에 표시됩니다. 그러나 이 주제는 이 라이브러리에 포함되지 않습니다.

빠른 시작: Windows Phone 8의 XAML을 사용하여 사용자 인터페이스 만들기

2014-06-18

적용 대상: Windows Phone 8 및 Windows Phone Silverlight 8.1 | Windows Phone OS 7.1

 

XAML(Extensible Application Markup Language)은 Windows Phone 사용자 인터페이스를 정의하는 데 사용됩니다. XAML 은 컨트롤, 도형, 텍스트 및 기타 Windows Phone 화면 콘텐츠와 같은 앱 UI를 만들 수 있는 선언적 언어입니다. XAML 은 HTML과 유사한 요소와 특성으로 구성됩니다. 하지만 XAML 은 XML을 기반으로 하므로 올바른 형식을 포함하는 XML 규칙을 따라야 합니다. 경우에 따라 "Visual Studio 나 Blend for Visual Studio 와 같은 도구를 사용하여 UI를 만들려는 경우 왜 XAML 에 신경을 써야 하는지" 궁금할 수 있습니다. 태그를 생성하는 도구가 있어도, 어김없이 XAML 을 이해하거나 수정하고 싶어질 것입니다. 게다가, 때로 세련된 컨트롤을 원하거나 어떻게 진행되고 있는지만 알고 싶을 때 손으로 직접 UI를 코딩하는 것이 더 쉽습니다.

이 항목에는 다음 단원이 포함되어 있습니다.

 

다음은 버튼을 만드는 간단한 XAML 예제입니다.

<Grid x:Name="ContentPanel" Grid.Row="1" Margin="12,0,12,0">
   <Button Height="72" Width="160" Content="Click Me" />
</Grid>

이 앱을 실행하면 다음과 같이 표시될 수 있습니다.

Windows Phone emulater image with button control

Button 컨트롤은 <Button> 요소에 의해 지정됩니다. WidthHeight 특성은 버튼의 크기를 지정합니다. <Grid>는 Visual Studio 에서 새 Windows Phone 앱을 만들면 생성되며, 개체의 위치를 지정하는 데 사용됩니다. 화면 레이아웃에 관한 자세한 내용은 Windows Phone 8의 레이아웃을 참조하세요.

Visual Studio 를 사용하여 XAML 을 생성할 수 있습니다. 예를 들어, 버튼을 도구 상자에서 디자인 화면으로 끌어 올 수 있습니다. 다음은 Visual Studio 가 생성할 수 있는 XAML 입니다. 실제 XAML 은 다르게 표시될 수 있습니다.

<Grid x:Name="ContentGrid" Grid.Row="1">
   <Button Content="Button" Height="72" HorizontalAlignment="Left" Margin="152,273,0,0" Name="button1" VerticalAlignment="Top" Width="160" />
</Grid>

Visual Studio 에서는 HorizontalAlignmentMargin과 같은 특성을 더 추가하여 버튼의 위치를 지정합니다. 이러한 추가 기능은 필요한 사항이 매우 구체적일 경우에는 바람직하지 않을 수 있습니다. 물론 Visual Studio UI를 사용하여 이러한 특성을 변경할 수도 있지만 경우에 따라 XAML 을 바로 편집하는 것이 좋을 수도 있습니다.

XAML 과 같은 선언적 언어 사용에 대한 최고의 장점 중 하나는 UI를 구성하는 태그와 앱이 일을 수행하게 만드는 코드 간을 분명히 구분한다는 것입니다. 예를 들어, 팀의 디자이너는 UI 환경을 디자인한 다음 프로시저 코드를 추가하도록 XAML 을 개발자에게 전달할 수 있습니다. 디자이너와 개발자가 같은 사람(종종 있는 경우처럼)이더라도, UI를 XAML 파일(.xaml)에 저장하고 프로시저 코드는 코드 숨김 파일(.cs 및 .vb)에 저장할 수 있습니다.

XAML 요소는 <Button />처럼 프로시저 코드에서 개체를 인스턴스화하는 것과 같습니다. 예를 들어, 다음 XAML 을 고려해 보겠습니다.

<Grid x:Name="ContentPanel" Grid.Row="1" Margin="12,0,12,0">
   <Button Height="72" Width="160" Content="Click Me" />
</Grid>


다음은 이 XAML 을 C# 또는 Visual Basic에서 어떻게 쓸 수 있는지를 보여 줍니다.

' Initialize the button
Dim myButton As New Button()' Set its properties
myButton.Width = 160
myButton.Height = 72
myButton.Content = "Click Me"
'Attach it to the visual tree, specifically as a child of 
'the Grid object (named 'ContentPanel'). In other words, position
'the button in the UI.
ContentPanel.Children.Add(myButton)

UI의 경우, XAML에는 프로시저 코드보다 더 읽기 쉽고 간결하다는 장점이 있습니다. 하지만, 때로 프로시저 코드를 사용하여 UI를 동적으로 만들어야 합니다.

다음은 XAML 에서 속성 값을 지정하는 두 가지 방법입니다.

  • 특성 요소 구문

  • 속성 요소 구문

특성 요소 구문은 위의 예제에서 본 HTML에서 익숙할 수 있는 특성="값" 구문입니다. 다음 예제에서는 빨간색 직사각형이 만들어집니다. Fill은 미리 정의된 색상 이름으로 설정된 특성입니다.

<Rectangle Fill="Red" />

또는, 속성 요소 구문을 사용하여 색상 값을 지정할 수도 있습니다.

<Rectangle>
   <Rectangle.Fill>
      <SolidColorBrush Color="Red" />
   </Rectangle.Fill>
</Rectangle>

이 경우에는 단순히 문자열 Red를 사용하기보다 Fill 속성이 요구하는 유형의 SolidColorBrush 개체를 명시적으로 지정하게 됩니다. 이 예제에서는 속성 요소 구문이 동일한 작업을 수행하는 장황한 방식임을 추정할 수 있습니다. 하지만, 모든 속성 값이 간단한 특성 문자열을 사용하여 지정할 수 있는 것은 아닙니다. 예를 들어, 속성의 값으로 사용된 개체의 속성을 여러 개 지정해야 할 경우 속성 요소 구문을 사용해야 할 수 있습니다. 다음 예제에서는 Rectangle을 만들지만 간단한 빨간색 채우기 대신 그라데이션을 사용합니다.

<!-- This rectangle is painted with a diagonal linear gradient. -->
<Rectangle Width="200" Height="200">
   <Rectangle.Fill>
      <LinearGradientBrush StartPoint="0,0" EndPoint="1,1">
         <GradientStop Color="Yellow" Offset="0.0" />
         <GradientStop Color="Red" Offset="0.25" />
         <GradientStop Color="Blue" Offset="0.75" />
         <GradientStop Color="LimeGreen" Offset="1.0" />
      </LinearGradientBrush>
   </Rectangle.Fill>
</Rectangle>

이 앱을 실행하면 다음과 같이 표시될 수 있습니다.

Gradient filled rectangle control

표시된 것처럼, Fill 속성은 복잡한 개체(LinearGradientBrush)를 사용하여 그라데이션을 만듭니다. 이와 같은 경우에는, 단순히 값을 특성에 할당된 문자열로 지정하기보다 속성 요소 구문을 사용해야 합니다.

XAML 에서는, 아래에 다른 요소(노드)(자식)가 있을 수 있는 요소(<Button /><Grid> 등)가 있습니다. 이 부모/자식 관계는 개체를 화면에 배치하는 방식과, 개체가 사용자가 시작한 이벤트에 응답하는 방식과 같은 사항들을 지정합니다. 다음 예제를 살펴보세요.

이 앱을 실행하면 다음과 같이 표시될 수 있습니다.

Stack panel control showing element placement
<Grid x:Name="ContentPanel" Background="Red" Grid.Row="1" Margin="12,0,12,0">
   <StackPanel Margin="20" Background="Blue" >
      <TextBlock Name="firstTextBlock" FontSize="30">First TextBlock</TextBlock>
      <TextBlock Name="secondTextBlock" FontSize="30">Second TextBlock</TextBlock>
      <TextBlock Name="thirdTextBlock" FontSize="30">Third TextBlock</TextBlock>
   </StackPanel>
</Grid>

파란색 StackPanel은 빨간색 Grid 내에 들어 있습니다. TextBlock 요소는 StackPanel(TextBlock 요소는 StackPanel의 자식임) 내에 들어 있습니다. 또한 TextBlock 요소는 XAML 에서 선언한 순서로 차곡차곡 쌓여 있습니다.

다음 트리 다이어그램은 요소들 간 관계를 보여 줍니다.

Tree diagram depicting relationships among UI elem

시각적 트리는 콘텐츠를 보여 주는 방식을 결정하는 것 외에 이벤트를 처리하는 방식에도 영향을 줄 수 있습니다. 많은 일반적인 이벤트(라우트된 이벤트라고 함)가 트리 내에서 "버블링"합니다. 예를 들어 마우스 왼쪽 버튼을 클릭(MouseLeftButtonDown 이벤트)하면 처리하는 StackPanel에 이벤트 처리기를 추가할 수 있습니다. 다음 XAML 에서는 commonMouseHandler라는 MouseLeftButtonDown 이벤트 처리기를 StackPanel에 추가하는 방법을 보여 줍니다.

<Grid Background="Red" x:Name="ContentPanel" Grid.Row="1" Margin="12,0,12,0">
   <StackPanel Margin="20" Background="Blue" MouseLeftButtonDown="commonMouseHandler">
      <TextBlock Name="firstTextBlock" FontSize="30" >First TextBlock</TextBlock>
      <TextBlock Name="secondTextBlock" FontSize="30" >Second TextBlock</TextBlock>
      <TextBlock Name="thirdTextBlock" FontSize="30" >Third TextBlock</TextBlock>
   </StackPanel>
</Grid>

다음은 이벤트를 처리하는 프로시저 코드를 보여 줍니다.

Private Sub commonMouseHandler(ByVal sender As System.Object, _ByVal e As System.Windows.Input.MouseButtonEventArgs)    
   Dim feSource As FrameworkElement = e.OriginalSource
   Select Case feSource.Name
      Case "firstTextBlock"
         firstTextBlock.Text = firstTextBlock.Text & " Click!"
      Case "secondTextBlock"
         secondTextBlock.Text = secondTextBlock.Text & " Click!"
      Case "thirdTextBlock"
         thirdTextBlock.Text = thirdTextBlock.Text & " Click!"
   End Select
End Sub

다음 다이어그램은 이벤트가 트리 위쪽으로 버블링하는 방식을 보여 줍니다.

Tree diagram depicting event hierarchy

예를 들어, 사용자가 TextBlock을 클릭한다고 가정해 봅시다.

  1. MouseLeftButtonDown 이벤트가 부모 StackPanel로 버블링합니다.

  2. 다음으로, MouseLeftButtonDown 이벤트는 트리 위쪽 Grid로 버블링합니다.

이벤트는 계속하여 트리 위쪽으로 버블링하므로 Grid 요소의 MouseLeftButtonDown 이벤트도 "수신"합니다.

XAML 을 사용하여 정적 UI를 표시는 물론 그 이상의 작업도 할 수 있습니다. 단순히 태그를 사용하여 애니메이션을 만들고, 동영상을 포함하고 데이터에 바인딩할 수 있습니다. 다음은 XAML 로 만든 간단한 애니메이션의 예입니다.

<StackPanel Background="#FDF5E6">
   <StackPanel.Resources>
      <Storyboard x:Name="myStoryboard">
         <DoubleAnimationUsingKeyFrames
         Storyboard.TargetName="myRectangle"
         Storyboard.TargetProperty="Height">
         <!-- This key frame resets the animation to its starting
               value (30) at the beginning of the animation. -->
         <LinearDoubleKeyFrame Value="30" KeyTime="0:0:0" />
         <!-- Spline animations are used to create acceleration. This
               SplineDoubleKeyFrame creates an animation that starts out slow
               and then speeds up. The rectangle "falls". -->
         <SplineDoubleKeyFrame KeySpline="0,0 1,0" Value="300" KeyTime="0:0:0.8" />
         <!-- This spline animation creates the "bounce" at the end where
               the rectangle shortens its length quickly at first and then
               slows down and stops. -->
         <SplineDoubleKeyFrame KeySpline="0.10, 0.21 0.00, 1.0" Value="250"
            KeyTime="0:0:1.5" />
         </DoubleAnimationUsingKeyFrames>
      </Storyboard>
   </StackPanel.Resources>
   <Rectangle x:Name="myRectangle" MouseLeftButtonDown="Mouse_Clicked" Fill="Blue" 
      Width="200" Height="30" />
</StackPanel>
' When the user clicks the rectangle, the animation begins.
Private Sub Mouse_Clicked(ByVal sender As Object, ByVal e As MouseEventArgs)
   myStoryboard.Begin
End Sub

XAML 을 사용하여, 레이아웃이나 다른 정적 UI보다는 콘텐츠의 동작을 지정하는 예입니다. Storyboard 요소는 어떤 개체를 애니메이션으로 만들 것인지와 같은 애니메이션의 일반적인 속성을 정의합니다. LinearDoubleKeyFrame과 같은 Storyboard의 자식 요소는 애니메이션이 실행되는 방식을 지정합니다.

표시:
© 2014 Microsoft