절대 및 동적 위치를 사용하는 레이아웃

아티클
08/10/2011

응용 프로그램에 창을 만들 때는 해당 창에서 컨트롤이 레이아웃되는 방식을 결정해야 합니다. 사용자가 창 크기를 조정할 때 창에 있는 컨트롤이 어떻게 동작할지도 결정해야 합니다. 이러한 사항은 절대 및 동적 위치와 관련이 있습니다.

응용 프로그램에 창을 만들 때는 창의 크기와 해당 창에 포함되는 컨트롤의 크기를 설정합니다. 창 및 컨트롤의 내용이 변경될 경우 창 및 컨트롤이 어떻게 동작할지를 결정해야 합니다. 예를 들어 창에 레이블 컨트롤을 추가할 때는 텍스트가 다른 언어로 번역될 경우 레이블이 어떻게 동작할지를 지정할 수 있습니다. 이러한 사항은 동적 크기 조정과 관련이 있습니다.

레이아웃 형식

WPF Designer for Visual Studio에서는 다음과 같은 세 가지 레이아웃 형식을 만들 수 있습니다.

절대 레이아웃
부모 요소를 기준으로 한 정확한 위치를 지정하여 자식 요소를 정렬합니다. 예를 들어 패널을 기준으로 컨트롤의 맨 왼쪽 위 좌표를 지정하여 패널에 컨트롤을 정렬합니다. 부모 요소의 크기가 조정되어도 자식 요소는 이동하지 않습니다. 자세한 내용은 방법: 절대 위치를 기반으로 하는 레이아웃 만들기 또는 연습: 절대 위치를 기반으로 하는 레이아웃 만들기를 참조하십시오.
Dynamic
자식 요소의 정렬 방식과 부모 요소를 기준으로 한 줄 바꿈 방식을 지정하여 자식 요소를 정렬합니다. 예를 들어 패널에 컨트롤을 정렬하고 컨트롤이 가로로 줄 바꿈되도록 지정할 수 있습니다. 부모 요소의 크기가 줄어들면 자식 요소는 다음 행으로 이동됩니다. 부모 요소의 크기가 늘어나면 자식 요소는 이전 행으로 이동됩니다. 자세한 내용은 방법: 동적 레이아웃 만들기 또는 연습: 동적 레이아웃 만들기를 참조하십시오.
데이터 기반 동적 레이아웃
컨트롤을 데이터에 바인딩합니다. 즉, 컨트롤이 데이터로 채워지고 행 및 열 스타일은 데이터에 맞게 자동으로 지정됩니다.

가능하면 동적 레이아웃을 사용하는 것이 좋습니다. 동적 레이아웃은 가장 유연할 뿐 아니라 최종 사용자가 사용 환경을 가장 잘 제어할 수 있게 해 줍니다. 동적 레이아웃을 사용하면 내용이 지역화되거나 다른 방식으로 변경될 때 적절히 조정되도록 할 수 있습니다. 절대 레이아웃은 요소를 정확하고 변경되지 않는 위치에 배치하는 것이 중요한 경우나 이미지 또는 그래픽과 같은 자식 요소가 하나만 있는 경우에 사용해야 합니다.

참고

절대 레이아웃과 동적 레이아웃을 함께 사용할 수 있습니다. 예를 들어 창 전체에는 동적 레이아웃을 사용하고 창의 일부분에는 절대 위치를 사용할 수 있습니다.

참고

UseLayoutRounding 속성을 설정하여 Measure 및 Arrange 단계 중 계산된 비정수 픽셀 값이 정수 픽셀 값으로 반올림되는 시기를 지정합니다. 이 속성은 자식 컨트롤에 상속됩니다.

패널

WPF에서는 절대 및 동적 위치를 지원하는 여러 가지 Panel 컨트롤을 제공합니다. 한 패널 컨트롤을 다른 패널 컨트롤의 자식으로 추가하여 패널 컨트롤을 조합할 수 있습니다. 다음 패널 컨트롤을 사용하여 응용 프로그램에서 요소의 위치를 지정할 수 있습니다.

패널	레이아웃 형식	설명
Grid	Dynamic	자식 요소의 위치를 행 및 열에 지정할 수 있는 영역을 정의합니다.
DockPanel	Dynamic	자식 요소를 위쪽, 아래쪽, 왼쪽 또는 오른쪽 가장자리에 정렬하고 스택 방식으로 배치할 수 있는 영역을 정의합니다.
WrapPanel	Dynamic	내용을 부모 컨테이너의 가장자리에서 다음 줄로 이동하여 자식 요소를 순차적 위치에 자동으로 정렬합니다. 순서는 방향이 가로로 설정되었는지 또는 세로로 설정되었는지 여부에 따라 위쪽에서 아래쪽으로 또는 왼쪽에서 오른쪽으로 순차적으로 지정됩니다.
StackPanel	Dynamic	자식 요소를 가로 또는 세로 방향으로 지정할 수 있는 단일 선에 자동으로 정렬합니다.
UniformGrid	Dynamic	자식 요소를 행 또는 열에 자동으로 정렬합니다. 행 및 열은 일정 간격으로 배치됩니다. 셀에 맞지 않는 셀은 잘립니다.
Canvas	절대	자식 요소의 위치를 좌표를 사용하여 명시적으로 지정할 수 있는 영역을 정의합니다.

컨트롤

WPF에서는 데이터 기반 동적 위치를 지원하는 컨트롤을 제공합니다. 이러한 컨트롤은 데이터에 바인딩되고 데이터에 맞게 자동으로 크기가 결정될 수 있습니다. 다음 컨트롤을 사용하여 응용 프로그램에서 데이터를 동적으로 표시할 수 있습니다.

컨트롤	레이아웃 형식	설명
ListView	데이터 기반 동적 레이아웃	데이터 항목의 목록을 표시합니다.
GridView	데이터 기반 동적 레이아웃	목록 뷰 컨트롤의 경우 데이터 항목을 열에 표시합니다.

동적 크기 조정

동적 크기 조정 방법에서는 컨트롤이 내용에 맞게 자동으로 늘어나거나 줄어들도록 구성합니다. 예를 들어 한 언어에서 레이블 컨트롤의 크기를 텍스트에 맞게 지정한 경우 텍스트가 다른 언어로 번역되면 레이블 크기가 새 텍스트에 맞게 자동으로 조정되도록 설정할 수 있습니다. 동적 위치 지정 방법에서는 컨트롤 크기가 변경될 때 컨트롤 위치를 자동으로 조정하여 동적 크기 조정을 지원합니다.

동적 레이아웃을 만들기 위해 설정할 수 있는 속성은 다음과 같습니다.

Property	값	적용 대상	참고
Width	double, Auto, *	창, 컨트롤, 모눈 열	최대한의 유연성을 위해 Auto 및 별표를 사용한 크기 조정을 사용합니다. 자세한 내용은 다음 단원을 참조하십시오. *는 모눈 열에만 적용됩니다.
Height	double, Auto, *	창, 컨트롤, 모눈 행	최대한의 유연성을 위해 Auto 및 별표를 사용한 크기 조정을 사용합니다. 자세한 내용은 다음 단원을 참조하십시오. *는 모눈 행에만 적용됩니다.
MinWidth	double	창, 컨트롤, 모눈 열	최대한의 유연성을 위해 0으로 설정합니다.
MinHeight	double	창, 컨트롤, 모눈 행	최대한의 유연성을 위해 0으로 설정합니다.
MaxWidth	double, Infinity	창, 컨트롤, 모눈 열	최대한의 유연성을 위해 Infinity로 설정합니다.
MaxHeight	double, Infinity	창, 컨트롤, 모눈 행	최대한의 유연성을 위해 Infinity로 설정합니다.
ResizeMode	NoResize CanMinimize CanResize CanResizeWithGrip	Windows	최대한의 유연성을 위해 CanResize로 설정합니다. 이 속성 값을 사용하면 사용자가 창의 크기를 조정할 수 있습니다.
SizeToContent	Manual Width Height WidthAndHeight	Windows	최대한의 유연성을 위해 WidthAndHeight로 설정합니다. 이 속성 값을 사용하면 내용이 늘어날 때 창 크기가 자동으로 조정되도록 할 수 있습니다.

Auto 및 별표를 사용한 크기 조정

Auto 크기 조정은 내용의 크기가 변경되더라도 해당 내용에 맞게 컨트롤 크기를 조정하는 데 사용합니다. 별표를 사용한 크기 조정은 모눈의 행 및 열에 사용 가능한 공간을 가중치에 따라 배분하는 데 사용합니다. XAML(Extensible Application Markup Language)에서 별표 값은 *(또는 n*)로 표현됩니다. 예를 들어 모눈에 네 개의 열이 있는 경우 열 너비를 다음과 같이 설정할 수 있습니다.

열 1	Auto	열의 크기가 내용에 맞게 지정됩니다.
열 2	*	Auto 열이 계산된 후 남은 너비의 일부를 사용합니다. 열 2의 너비는 열 4의 절반 너비가 됩니다.
열 3	Auto	열의 크기가 내용에 맞게 지정됩니다.
열 4	2*	Auto 열이 계산된 후 남은 너비의 일부를 사용합니다. 열 4의 너비는 열 2의 두 배 너비가 됩니다.