정보
요청한 주제가 아래에 표시됩니다. 그러나 이 주제는 이 라이브러리에 포함되지 않습니다.

Windows Phone 8의 Panorama 컨트롤 아키텍처

2014-06-18

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

파노라마 환경은 Panorama 컨트롤과 하나 이상의 PanoramaItem 컨트롤로 구성됩니다. Panorama 컨트롤은 앱의 기본 컨트롤로 사용되며, PanoramaItem 컨트롤은 개별 콘텐츠 섹션을 호스트합니다. 앱의 요구 사항에 따라 각각 개별 기능 용도를 제공하는 여러 PanoramaItem 컨트롤을 Panorama 컨트롤 화면에 추가할 수 있습니다. 예를 들어 특정 PanoramaItem에는 일련의 링크와 컨트롤이 포함되고 다른 컨트롤은 축소판 이미지의 저장소일 수 있습니다. 사용자는 파노라마 앱이 이미 제공하고 있는 제스처 지원을 사용하여 이들 섹션의 상하좌우로 이동할 수 있습니다. 이 항목에서는 Panorama 컨트롤과 PanoramaItem 컨트롤 모두의 아키텍처와 구조에 대해 자세히 설명합니다.

 

AP_CoreCon_PanoAnatomyCon

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

Panorama 컨트롤은 파노라마 앱의 기본 컨트롤이며 서로 다른 세 계층으로 구성됩니다. 각 계층은 Grid 컨트롤에 대한 레이아웃 루트의 역할을 하는 Panorama 컨트롤 내에 포함되어 있습니다.

레이어

유형

설명

배경

PanningBackgroundLayer

배경을 표시하고 애니메이션 효과를 적용하는 데 사용되는 패널입니다.

제목

PanningTitleLayer

제목을 표시하고 애니메이션 효과를 적용하는 데 사용되는 패널입니다.

항목

PanningLayer

PanoramaItem 컨트롤을 표시하는 계층입니다.

계층에서 수행되는 드래그나 이동은 앱에서 세 계층을 모두 일제히 이동합니다.

배경 계층

배경 계층은 Panorama 컨트롤에서 Background 속성으로 설정됩니다. Panorama 컨트롤의 Background를 null로 설정하면 안 됩니다. null로 설정할 경우 제스처 응답이 불안정하게 됩니다. Background는 기본 템플릿에서 기본적으로 Transparent로 설정됩니다.

다음 브러시를 적용할 수 있습니다.

  • SolidColorBrush – 배경에 색을 적용합니다.

  • ImageBrush – 배경에 이미지를 적용합니다.

  • GradientBrush – 배경에 선형 또는 방사형 브러시를 사용할 수 있습니다.

모든 배경 브러시는 Panorama 컨트롤의 높이를 맞출 수 있도록 수직으로 늘어납니다. ImageBrushImageSource의 너비를 유지하고 GradientBrush는 항목의 너비를 맞추기 위해 늘어납니다.

중요중요:

Panorama 컨트롤이 배경에 이미지를 사용하는 중이면 빌드 작업리소스로 설정해야 합니다. 그렇지 않으면 앱이 처음 표시될 때 이미지가 즉시 나타나지 않습니다. 빌드 작업콘텐츠로 설정하면 이미지가 비동기식으로 로드됩니다.

제목 계층

이 계층은 파노라마 앱의 제목이며 Panorama 컨트롤에 Title 속성으로 설정됩니다. 이 계층이 사용하는 세로 높이는 과도하게 큰 콘텐츠가 있든 콘텐츠가 부족하든 상관없이 항상 일정합니다. 또한 콘텐츠의 가장자리를 지나서 이동할 경우 계층은 반복되지 않습니다. 대신 PanoramaItem 컨트롤 간에 선택이 변경되는 동안 이전에 이동하던 방향으로 보기의 안에서 밖으로 애니메이션 효과를 적용하고 화면의 반대쪽에서 해당 장면으로 다시 애니메이션 효과를 적용합니다.

참고참고:

제목에서 텍스트를 제거할 경우 안쪽 여백이 컨트롤에서 유지됩니다. 필요한 만큼 공간을 차지하도록 템플릿 제목을 수정할 수 있습니다. 그러나 Windows Phone 디자인 지침에는 위배됩니다.

항목 계층

항목 계층은 PanoramaItem 컨트롤을 포함할 계층입니다. 이 계층이 사용자가 앱에서 주로 상호 작용할 계층입니다. 계층은 이동 제스처를 사용하여 일대일 방식으로 이동합니다. 따라서 이동을 시작할 때 손가락 아래에 있는 콘텐츠가 무엇이든 손가락을 뗄 때까지 유지됩니다.

PanoramaItem 컨트롤은 Panorama 컨트롤에 추가되는 개별 콘텐츠 섹션입니다. Panorama 컨트롤은 여러 PanoramaItem 컨트롤을 지원할 수 있고 사용자는 지원되는 터치 제스처를 사용하여 이러한 섹션을 탐색할 수 있습니다. PanoramaItem 컨트롤 자체는 2개 요소로 구성됩니다. 각 요소는 PanoramaItem 컨트롤에 대한 레이아웃 루트의 역할을 하는 Grid 내에 포함되어 있습니다.

요소

유형

설명

헤더

ContentControl

헤더를 표시하고 애니메이션 효과를 적용하는 데 사용되는 ContentControl입니다. 이 헤더는 선택 사항입니다. 지정하지 않을 경우에는 이 공간을 예약하고 축소할 수 없습니다.

Content

ContentPresenter

PanoramaItem 콘텐츠를 표시하는 ContentPresenter입니다.

PanoramaItem 컨트롤의 콘텐츠는 XAML 코드로 지정하거나 Content 속성을 통해 프로그래밍 방식으로 추가할 수 있습니다.

PanoramaItem 컨트롤은 가로 방향과 세로 방향을 모두 지원합니다. 다음은 이러한 방향의 특징입니다.

  • PanoramaItem 컨트롤의 세로 방향은 제스처 움직임이 진행되는 동안 화면의 왼쪽으로만 이동합니다.

  • PanoramaItem 컨트롤의 가로 방향은 제스처 움직임이 진행되는 동안 화면의 왼쪽과 오른쪽으로 이동합니다.

  • PanoramaItem 컨트롤을 가로 방향으로 설정하면 콘텐츠를 자르는 대신 화면을 넘어가서 배치할 수 있습니다.

  • 세로 방향과는 달리 가로 방향에서는 사용자가 새 PanoramaItem 컨트롤 보기로 이동하지 않고 중앙에 있는 콘텐츠 주위를 이동할 수 있습니다.

표시: