개체 정렬

아티클
10/11/2017

레이아웃 패널은 포함된 요소의 위치, 크기 및 정렬 상태를 조정하는 요소입니다. 컨테이너와 유사한 역할을 하며 응용 프로그램 안에서 개체를 정렬하고 그룹화합니다. 이 섹션의 항목에서는 Microsoft Expression Blend 응용 프로그램의 레이아웃 디자인에 대한 내용을 설명합니다.

Windows Presentation Foundation (WPF) 응용 프로그램의 레이아웃 시스템에 대한 자세한 내용은 MSDN의 레이아웃 시스템을 참조하십시오.

레이아웃 패널

Expression Blend에서는 다양한 기본 제공 레이아웃 패널이나 고유한 사용자 지정 패널을 사용하여 단순하고 복잡한 페이지 레이아웃을 모두 간단하게 처리할 수 있습니다. 레이아웃 패널은 포함된 요소의 위치, 크기 및 정렬 상태를 조정하는 요소입니다. 기본적으로 레이아웃 패널은 컨테이너 역할을 합니다. 레이아웃 패널을 유용하게 사용하는 방법 중 하나로, 레이아웃 패널 안에 요소를 구성할 수 있습니다.

[!참고]

Microsoft Silverlight 프로젝트에서는 Grid, Canvas, StackPanel, ScrollViewer 및 Border 레이아웃 패널만 사용할 수 있습니다.

레이아웃 패널은 내부적으로 구현될 수 있다는 점에서 자동 조정 기능을 갖습니다. 즉, 창 크기에 따라 전체 레이아웃 크기가 자동으로 조정됩니다. 따라서 지역화 요구를 해결할 뿐만 아니라 다양한 화면 크기와 해상도에 맞는 UI(사용자 인터페이스)를 빌드하는 등 여러 환경에서 유용하게 사용할 수 있습니다. 레이아웃 패널을 명시적으로 구현하여 고정 크기를 사용하도록 선택할 수도 있습니다. 즉, 응용 프로그램 창의 크기를 조정해도 레이아웃의 영역은 지정된 크기로 유지되도록 레이아웃의 Width 및 Height 특성을 고정할 수 있습니다.

[!참고]

개체의 Width 또는 Height 속성을 고정 값에서 Auto 값으로 변경하면 속성이 기본 최소값으로 설정됩니다.

레이아웃 패널 내의 요소를 변형하여 레이아웃 이후의 렌더링 위치를 설정할 수도 있습니다. 이 기능은 애니메이션(예: 모눈 패널의 영역 밖으로 요소를 이동하여 특정 위치로 날아가게 하는 효과)에 유용합니다. 변형은 레이아웃 위치를 기준으로 이루어지므로 속성 패널의 변형 범주에 기본 위치가 (0,0)으로 표시됩니다. 대부분의 경우 최종 레이아웃 위치를 기준으로 요소를 이동할 애니메이션이 아닌 레이아웃 패널 내 요소에는 변형을 적용하지 않습니다.

Expression Blend에는 다섯 가지 기본 레이아웃 패널이 있으며 각 패널은 서로 다른 형식의 레이아웃을 처리하도록 제작되었습니다. 다음 표에서 이러한 레이아웃 패널에 대해 설명합니다.

패널	이름	설명
	Grid	모눈을 구성하는 행과 열의 매우 유연한 레이아웃으로 자식 요소를 정렬합니다. 자세한 내용은 Grid 레이아웃 패널 사용을 참조하십시오.
	Canvas	절대 x 및 y 좌표에 따라 자식 요소를 정렬합니다. 캔버스(Canvas) 패널을 사용하면 런타임에 화면에 나타나는 요소의 위치를 고정할 수 있습니다. 문자 그대로 비어 있는 캔버스라고 할 수 있습니다. 자세한 내용은 캔버스 레이아웃 패널 사용을 참조하십시오.
	StackPanel	가로 또는 세로로 방향을 지정하거나 쌓을 수 있는 한 줄에 자식 요소를 정렬합니다. 자세한 내용은 StackPanel 레이아웃 패널 사용을 참조하십시오.
	WrapPanel	왼쪽에서 오른쪽으로 연결되는 위치에 자식 요소를 정렬한 다음 패널의 맨 오른쪽 가장자리에 공간이 없으면 다음 줄로 콘텐츠를 줄 바꿈하는 방식으로 왼쪽에서 오른쪽, 위쪽에서 아래쪽으로 계속 적용합니다. 또한 줄 바꿈(Wrap) 패널의 방향을 세로로 설정하여 자식 요소가 위쪽에서 아래쪽 또는 왼쪽에서 오른쪽으로 이동하도록 할 수 있습니다. 자세한 내용은 WrapPanel 레이아웃 패널 사용을 참조하십시오.
	DockPanel	패널의 한쪽 가장자리에 그대로 유지되거나 고정되도록 자식 요소를 정렬합니다. 자세한 내용은 DockPanel 레이아웃 패널 사용을 참조하십시오.

기타 레이아웃 컨테이너

기타 레이아웃 컨테이너 역시 해당 컨테이너에 포함된 요소의 정렬에 영향을 줍니다. 그러나 이들 컨테이너는 기본 레이아웃 패널에서 문제 없이 처리할 수 있는 더욱 안정적인 UI 시나리오를 지원하도록 최적화되어 있지 않습니다. 다음 표에서 기타 레이아웃 컨테이너에 대해 설명합니다.

요소	이름	설명
	Border	다른 요소 주위에 테두리, 배경 또는 둘 다를 그릴 수 있는 단순한 요소입니다. Border는 자식 요소를 하나만 사용합니다. Border 요소 안에 모눈(Grid) 패널이나 캔버스(Canvas) 패널을 배치하여 여러 자식 요소를 사용하도록 할 수 있습니다. Border에 대한 자세한 내용은 기타 레이아웃 컨테이너를 참조하십시오.
	BulletDecorator	자식 요소를 두 개만 사용할 수 있는 요소이며 일반적으로 자식 요소는 CheckBox와 같은 컨트롤을 나타내는 텍스트 문자열과 문자 모양입니다. BulletDecorator에 대한 자세한 내용은 기타 레이아웃 컨테이너를 참조하십시오.
	Popup	응용 프로그램의 다른 모든 콘텐츠보다 앞쪽에 렌더링되지만 다른 요소의 위치를 기준으로 렌더링되는 창입니다. 팝업(Popup) 메뉴를 사용하면 팝업 메뉴의 기준이 되는 UI의 주요 요소와 상호 작용하는 사용자에게 추가 정보와 옵션을 제공할 수 있습니다. Popup은 자식 요소를 하나만 사용하며 대상 요소를 기준으로 자체 배치됩니다. 기본적으로 Popup은 모눈(Grid) 패널을 하나의 자식 요소로 포함합니다. 모눈 패널을 사용하면 Popup을 그린 직후 Popup에서 여러 자식 요소를 사용할 수 있습니다. 대부분의 경우 사용자가 직접 팝업 메뉴를 만들 필요가 없습니다. 대신 템플릿에서 팝업 메뉴를 사용하는 메뉴(Menu)나 콤보 상자(ComboBox)와 같은 컨트롤을 사용할 수 있습니다. Popup에 대한 자세한 내용은 기타 레이아웃 컨테이너를 참조하십시오.
	ScrollViewer	내부에 포함된 자식 요소를 스크롤할 수 있는 요소입니다. 자식 요소를 하나만 사용합니다. 따라서 대부분의 경우 이 요소 내에 스택(Stack) 패널, 캔버스(Canvas) 패널 또는 모눈(Grid) 패널과 같은 레이아웃 패널을 사용합니다. ScrollViewer는 목록 상자(ListBox)와 같은 다른 컨트롤의 템플릿에서 사용되어 콘텐츠 스크롤을 지원합니다. ScrollViewer 내의 콘텐츠가 너무 크면 콘텐츠를 잘라낼 수 있습니다. 또한 스크롤 막대를 사용할 수 없거나 숨기거나 표시하거나 필요할 때만 자동으로 표시되도록 할 수 있습니다. ScrollViewer에 대한 자세한 내용은 기타 레이아웃 컨테이너를 참조하십시오.
	UniformGrid	균일한(uniform) 모눈 영역 내에 있는 자식 요소를 정렬합니다. UniformGrid는 모눈(Grid) 패널의 변형이 아닙니다. UniformGrid는 지정된 행 수와 열 수를 기준으로 내부에 포함된 각 요소 사이에 동일한 간격을 만들기 때문에 타일 형식 레이아웃 요소로 설명하는 것이 더 정확합니다. UniformGrid에 자식 요소를 추가하면 각 요소는 UnifromGrid가 꽉 찰 때까지 왼쪽 위에서 시작하여 오른쪽 아래로 연결되는 영역에 배치됩니다. 이 요소는 이미지 목록과 같은 컨트롤에 유용합니다. UniformGrid에 대한 자세한 내용은 기타 레이아웃 컨테이너를 참조하십시오.
	Viewbox	확대/축소 컨트롤과 유사하게 모든 자식 요소의 비율 크기를 조정합니다. Viewbox는 자식 요소를 하나만 사용하기 때문에 일반적으로 Viewbox 내에 캔버스(Canvas) 패널이나 모눈(Grid) 패널을 배치하여 둘 이상의 자식 요소에서 확대/축소 효과를 사용할 수 있도록 합니다. Viewbox에 대한 자세한 내용은 기타 레이아웃 컨테이너를 참조하십시오.

루트 레이아웃 컨테이너

개체 및 타임라인 패널에는 LayoutRoot라는 레이블이 지정된 요소가 있습니다. 이 요소는 Expression Blend 문서에서 루트 레이아웃 패널을 나타냅니다. 기본적으로 레이아웃 루트는 모눈(Grid) 패널입니다. 대부분의 경우 모눈 패널은 최상위 페이지 레이아웃에 적합합니다. 그러나 레이아웃 루트를 마우스 오른쪽 단추로 클릭하고 레이아웃 형식 변경을 가리킨 다음 다른 레이아웃 패널을 선택하여 다른 레이아웃 패널로 변경할 수 있습니다. 또한 옵션 대화 상자(도구 메뉴)의 프로젝트 섹션에서 새 항목의 기본 레이아웃으로 모눈 패널 사용 확인란을 선택 취소하여 모눈 패널 대신 캔버스(Canvas) 패널이 기본 LayoutRoot가 되도록 선택할 수도 있습니다.

자식 요소 사용

Expression Blend는 항상 문서 내의 루트나 최상위 패널에 자식 요소를 추가하려고 합니다. 하지만 다른 레이아웃 컨테이너가 개체 트리의 다른 위치에 활성화되어 있으면 자식 요소가 해당 컨테이너에 추가됩니다. 레이아웃 패널을 클릭하여 요소를 활성화할 수 있습니다. 패널 주위의 파란색 강조 표시는 패널은 활성 요소임을 나타냅니다. 파란색 강조 표시는 아트보드와 개체 및 타임라인 패널에 모두 표시됩니다. 새 패널을 만든 직후 해당 패널의 테두리 내부에 자식 요소를 그리면 자식 요소는 사용자가 방금 만든 패널 내부에 배치됩니다. 새로 만든 패널이 자동으로 활성 요소가 되기 때문입니다.

colors2 StackPanel 개체는 새 자식 개체가 추가될 현재 활성 레이아웃 패널입니다.

Cc295017.a3b049ca-8d4c-417c-88e7-786a583c699a(KO-KR,Expression.30).png

Expression Blend를 사용하면 패널 간에 자식 요소를 끌어 간단히 다른 레이아웃 컨테이너에서 부모를 다시 지정할 수도 있습니다. 다음 그림에서는 루트 레이아웃 모눈 패널에서 다른 모눈 패널로 이동할 주황색 타원을 보여 줍니다. 패널에 자식 요소를 넣을 수 있으면 패널 주위에 파선 경계 상자와 텍스트 메시지가 나타납니다. Alt 키를 누르고 있다가 마우스 단추를 놓으면 부모 다시 지정 작업이 완료됩니다.

루트 모눈 패널에서 다른 모눈 패널로 개체의 부모 다시 지정

Cc295017.95d9db96-a236-4ed6-b6ba-a141a8168dde(KO-KR,Expression.30).png

복잡한 레이아웃

페이지를 실제로 배치하는 것은 상당한 유연성이 필요한 작업으로, 단순히 하나의 레이아웃 패널로 해결되지 않는 경우가 많습니다. 둘 이상의 복잡한 레이아웃을 만드는 한 가지 방법은 레이아웃 패널을 다른 레이아웃 패널의 컨테이너로 사용하는 것입니다. 예를 들어 LayoutRoot(기본적으로 모눈 패널) 내에 고정 패널을 사용할 수 있습니다. 이렇게 하면 영역 모음으로 페이지를 나눌 수 있습니다. 일반적으로 각 영역에는 하나 이상의 컨트롤이 포함됩니다.

레이아웃에 대한 프로그래밍 정보는 Windows SDK(소프트웨어 개발 키트)의 .NET Development 섹션을 참조하십시오.