이 항목은 아직 평가되지 않았습니다.- 이 항목 평가

Windows Phone의 레이아웃 및 패널

2012-12-11

적용 대상: Windows Phone 8 | Windows Phone OS 7.1

이 항목에서는 Windows Phone 레이아웃 시스템에 대해 설명합니다. 세련되고 성능이 좋은 사용자 인터페이스를 제작하려면 앱 요소를 페이지에 배치하는 방법과 레이아웃 계산이 수행되는 방법 및 시기를 이해해야 합니다.

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

레이아웃이라는 용어는 Windows Phone 앱에서 개체의 크기 및 위치를 지정하는 프로세스를 말합니다. 표시 개체를 배치하려면 Panel 또는 다른 컨테이너 개체에 배치해야 합니다. 부모 Panel에서 Panel 요소의 Children 컬렉션에 속하는 멤버가 화면에서 그려지는 방법을 결정하는 레이아웃 동작을 정의했습니다. 이는 집약적인 프로세스로서 Children 컬렉션이 클수록 계산 수도 많습니다. 컬렉션을 소유하는 Panel 요소가 정의하는 레이아웃 동작을 기준으로 보다 복잡한 레이아웃 계산도 수행할 수 있습니다. Canvas와 같이 상대적으로 간단한 레이아웃은 Grid와 같은 보다 복잡한 Panel이 필요하지 않을 때 뛰어난 성능을 제공합니다.

자식 UIElement가 해당 위치를 변경할 때마다 레이아웃 시스템에 의한 새 처리 단계가 트리거될 수 있습니다. 레이아웃 시스템을 호출할 수 있는 이벤트를 이해하는 것이 중요합니다. 불필요한 호출로 인해 앱 성능이 저하될 수 있기 때문입니다.

가장 간단한 레이아웃은 화면에서 크기 조정, 배치 및 그리기를 수행할 요소가 되는 재귀 시스템입니다. 레이아웃 시스템은 Children 컬렉션의 각 멤버에 대해 두 처리 단계인 측정 처리 단계 및 정렬 처리 단계를 차례로 수행합니다. 측정 처리 단계에서는 각 자식 요소에 대해 원하는 크기를 결정하고, 정렬 처리 단계에서는 각 자식 요소의 크기와 위치를 최종적으로 선택합니다.

참고참고:

요소 레이아웃에 대해 알아볼 때는 해당 요소의 경계 상자 레이아웃에 대해 알아보는 것이 보다 정확합니다. 자세한 내용은 이 항목 뒷부분의 요소 경계 상자를 참조하세요.

기본 Panel 레이아웃 동작을 재정의하기 위해 각 Panel 유형은 자체 MeasureOverrideArrangeOverride 메서드를 제공하여 고유한 레이아웃 동작을 수행합니다. 이는 레이아웃 시스템이 호출될 때마다 발생하는 일련의 이벤트입니다.

  1. 각 자식 UIElement가 측정됩니다.

  2. Width, HeightMargin과 같이 FrameworkElement에 정의된 크기 조정 속성이 평가됩니다.

  3. Orientation 스택과 같은 Panel 관련 논리가 적용됩니다.

  4. 모든 자식 항목을 측정한 후에 내용이 정렬됩니다.

  5. Children 컬렉션이 화면에 그려집니다.

  6. Children이 컬렉션에 더 추가되거나, WidthHeight와 같은 Children의 레이아웃 속성이 변경되거나, UpdateLayout 메서드가 호출되면 프로세스가 다시 호출됩니다.

이 프로세스 및 이 프로세스가 호출되는 방법은 이후 단원에 자세히 정의되어 있습니다.

경계 상자는 Windows Phone 앱의 모든 요소를 둘러싼다는 사실을 이해하는 것이 중요합니다. 이러한 추상화는 레이아웃 시스템의 동작을 파악하는 데 도움이 됩니다. 레이아웃 시스템이 FrameworkElement를 배치할 때 실제로는 해당 요소가 포함된 사각형(레이아웃 슬롯)이 배치됩니다.

LayoutInformation 클래스는 요소 레이아웃 슬롯 및 표시 가능 영역의 기하학적 경계를 반환하기 위해 제공됩니다. 레이아웃 슬롯의 크기는 시스템에서 사용 가능한 화면 크기, 제약 조건의 크기, 레이아웃 고유 속성(예: 여백 및 안쪽 여백) 그리고 부모 Panel 요소의 개별 동작을 계산하여 결정합니다. 시스템에서는 이 데이터를 사용하여 특정 Panel의 모든 자식 항목의 위치를 계산할 수 있습니다. Border와 같이 부모 요소에 정의된 크기 조정 특성은 자식 항목에 영향을 줍니다.

다음 그림에서는 부모 패널의 크기, 자식 요소 및 자식이 들어 있는 레이아웃 슬롯을 보여 줍니다.

Layout Slot

실제로 자식에 대해 할당되는 영역은 자식 요소보다 훨씬 크다는 것을 알 수 있습니다. 각 자식에 대한 레이아웃 슬롯의 크기는 부모 컨테이너가 결정합니다. 부모는 자식이 요청하는 것보다 공간을 많거나 적게 할당할 수 있습니다. GetLayoutSlot을 호출하면 레이아웃 슬롯의 크기를 가져올 수 있습니다. 그런 후에 부모가 자식에 대해 설정된 맞춤 속성을 기준으로 해당 레이아웃 슬롯 내에 자식의 위치를 정합니다.

다음 그림에서는 회전되어 할당된 레이아웃 슬롯을 벗어나는 자식 요소를 보여 줍니다.

Layout Clip

이 경우 레이아웃 시스템은 자식 요소를 클리핑하여 레이아웃 슬롯 내에 포함되는 요소 부분만 표시합니다. 빨간색 윤곽선이 그려진 이 표시 가능한 영역을 레이아웃 클립이라고 하며, GetLayoutClip을 호출하면 레이아웃 클립의 크기를 가져올 수 있습니다. GetLayoutClipGeometry 개체를 반환하므로 표시 가능한 영역이 반드시 사각형인 것은 아닙니다.

요소 주위의 경계 상자는 부모 컨테이너에 요소가 더 추가되면 변경될 수 있습니다. 즉, 경계 상자는 추가되는 요소의 유형 및 크기에 따라 축소되거나 확장될 수 있습니다.

요소를 화면에 렌더링해야 하거나 요소의 크기가 변경되면 레이아웃 시스템이 호출됩니다. 첫 번째 레이아웃 단계는 각 자식에 대해 원하는 크기를 결정하는 측정 처리 단계이고, 두 번째 단계는 각 자식 경계 상자의 크기와 위치를 최종적으로 결정하는 정렬 처리 단계입니다.

측정

측정 처리 단계에서 레이아웃 시스템은 Panel에 해당 availableSize를 알려 줍니다. 이 영역은 Panel 부모가 자식의 레이아웃을 정하는 데 사용할 수 있도록 지정하는 영역입니다. PanelClip, Visibility 등 각 자식의 기본 크기 속성을 평가합니다.

그런 다음 각 자식에 정의된 FrameworkElement 속성이 처리됩니다. 이 속성은 Height, Width, MarginStyle 같은 내부 UIElement의 크기 조정 특성을 설명하는 경향이 있습니다. 이러한 각 속성은 요소를 표시하는 데 필요한 공간을 변경할 수 있습니다. 그런 후에 Panel은 각 자식에 대해 Measure 메서드를 호출하여 해당 자식에 대해 사용 가능한 크기를 전달합니다. 사용 가능한 크기는 자식이 요청한 크기일 수도 있지만, 부모가 레이아웃에 필요한 요소 수 및 해당 availableSize를 기준으로 자식 크기를 제한할 수도 있습니다.

참고참고:

Height 속성과 Width 속성 사이에 그리고 ActualHeight 속성과 ActualWidth 속성 사이에 차이점이 있습니다. 예를 들어 ActualHeight 속성은 다른 높이 입력 및 레이아웃 시스템에 따라 계산된 값입니다. 이 값은 실제 렌더링 처리 단계에 따라 레이아웃 시스템 자체적으로 설정되므로 입력 변경의 기준인 Height 같은 속성의 설정 값 뒤에 약간 지연될 수 있습니다. 기본값은 0이므로 HeightWidth를 설정해야 합니다.

ActualHeight는 계산된 값이므로 레이아웃 시스템에서 수행되는 다양한 작업의 결과로 여러 차례 또는 점증적으로 변경될 수 있습니다. 레이아웃 시스템은 자식 요소에 필요한 측정 공간, 부모 요소에 의한 제약 조건 등을 계산할 수도 있습니다.

측정 처리 단계의 궁극적인 목표는 각 자식의 DesiredSize를 레이아웃 시스템이 확인할 수 있도록 하는 것입니다. 이 작업은 Measure 호출 후에 내부적으로 수행됩니다. 이 값은 저장되어 정렬 프로세스에서 사용됩니다.

정렬

정렬 처리 단계에서 레이아웃 시스템은 Panel과 해당 자식이 사용할 수 있는 finalSize를 알려 줍니다. 정렬 처리 단계 중에 부모 Panel 요소는 자식의 DesiredSize와 렌더링된 요소 크기에 영향을 줄 수 있는 추가 여백을 평가한 다음 각 자식의 경계 상자를 결정합니다. 경계 상자는 자식의 레이아웃 슬롯 크기를 결정합니다. 그런 후에 부모 Panel은 각 자식의 Arrange 메서드를 호출하여 패널의 자식 원점과 자식의 높이 및 너비를 설정하는 Rect를 전달합니다.

참고참고:

모든 레이아웃은 부모 요소를 기준으로 합니다. 원점을 0, 0으로 설정하면 자식 요소는 부모 패널의 왼쪽 상단 모서리에 배치됩니다.

레이아웃 시스템은 여백과 맞춤 등의 오프셋 속성을 최종적으로 평가하고 자식을 레이아웃 슬롯 내에 위치 지정합니다. 자식 항목은 할당된 공간을 모두 채울 필요가 없으며 실제로도 모두 채우는 경우가 드뭅니다. 그런 후에 컨트롤이 부모 Panel에 반환되고 레이아웃 프로세스가 완료됩니다.

다수의 복잡한 레이아웃을 가능하게 하는 파생된 Panel 요소 집합을 사용할 수 있습니다. 요소 스택과 같은 일반적인 시나리오는 StackPanel 요소를 사용하여 쉽게 수행할 수 있는 반면 보다 복잡한 레이아웃은 Grid를 사용하여 수행할 수 있습니다.

다음 표에서는 사용 가능한 레이아웃 요소를 요약하여 설명합니다.

패널 이름

설명

Canvas

Canvas 영역에 상대적인 좌표를 사용하여 자식 요소를 명시적으로 배치할 수 있는 영역을 정의합니다.

Grid

열과 행으로 구성되는 유연한 표 영역을 정의합니다.

StackPanel

가로 또는 세로 방향으로 지정할 수 있는 하나의 선에 따라 자식 요소를 정렬합니다.

이러한 각 레이아웃 컨테이너는 자식의 정렬 방법에 영향을 줄 수 있는 여러 다른 속성을 고려합니다. 다음 표에서는 일반적인 속성 중 몇 가지를 보여 줍니다.

속성 이름

레이아웃 영향

Margin

개체와 레이아웃 슬롯 사이에 공간을 만듭니다.

HorizontalAlignmentVerticalAlignment

레이아웃 슬롯 안에 개체를 배치합니다.

Canvas.ZIndex

개체가 서로 겹칠 때 한 개체를 다른 개체 위에 배치합니다.

패널 레이아웃 논리를 적용하는 것 외에도 변환 및 애니메이션을 사용하여 개체의 위치를 변경할 수 있습니다.

미리 정의된 Panel 요소를 사용하여 구현할 수 없는 앱 레이아웃이 필요한 시나리오의 경우에는 Panel로부터 상속하고 MeasureOverrideArrangeOverride 메서드를 사용하여 기본 측정 및 정렬 동작을 재정의함으로써 사용자 지정 레이아웃 동작을 구현할 수 있습니다.

일부 시나리오에서는 Canvas를 사용한 개체의 절대 위치 지정이 유용하지만 크기나 방향이 변하는 앱에서는 대체로 바람직한 전략이 아닙니다. 절대 위치 지정을 사용하면 개체가 방향 변경에 응답하여 페이지에서 다시 정렬되지 않고 지정된 픽셀 위치에 그대로 유지됩니다.

StackPanelGrid를 사용하면 콘텐츠가 다시 정렬됩니다. Grid 개체는 Visual Studio Windows Phone 템플릿에 사용되는 루트 요소입니다. Grid는 다른 Panel 개체보다 사용하기 복잡하지만 콘텐츠가 다시 정렬되며 다양한 개체 레이아웃을 만들 수 있을 만큼 유연합니다.

Panel 개체를 사용하여 자식 개체를 배치하는 것뿐만 아니라 최상의 창 크기 조정 동작을 얻으려면 일반적으로 XAML 파일의 루트 요소나 레이아웃 루트 요소에서 너비 또는 높이 선언을 모두 제외하는 것이 좋습니다.

이 정보가 도움이 되었습니까?
(1500자 남음)
의견을 주셔서 감사합니다.
표시:
© 2014 Microsoft. All rights reserved.