[c#] 기본적인 레이아웃의 속성들을 파해쳐 보자

WPF의 모든 컨트롤(사용자 인터페이스 요소)들은 레이아웃과 관련된 표준 속성들을 가지고 있으며 이는 FrameworkElement로부터 상속됩니다.

다음 표는 이러한 속성들 중 일반적인 속성들을 나열한 것입니다.

 

 

속성	설명
ActualHeight	요소의 렌더링 된 높이를 가져옵니다.
ActualWidth	요소의 렌더링 된 너비를 가져옵니다.
FlowDirection	텍스트 및 기타 UI(사용자 인터페이스) 요소가 해당 레이아웃을 제어하는 부모 요소 내에서 흐르는 방향을 가져오거나 설정합니다.
Height	요소의 제안된 높이를 가져오거나 설정합니다.
HorizontalAlignment	요소를 패널 또는 항목 컨트롤 등의 부모 요소에서 작성하는 경우 요소에 적용되는 가로 맞춤 특성을 가져오거나 설정합니다.
IsEnabled	UI(사용자 인터페이스)에서 이 요소를 사용할지 여부를 나타내는 값을 가져오거나 설정합니다.
LayoutTransform	레이아웃을 수행할 때 이 요소에 적용해야 하는 그래픽 변환을 가져오거나 설정합니다.
Margin	요소의 바깥쪽 여백을 가져오거나 설정합니다.
MaxHeight	요소의 최대 높이 제약 조건을 가져오거나 설정합니다.
MaxWidth	요소의 최대 너비 제약 조건을 가져오거나 설정합니다.
MinHeight	요소의 최소 높이 제약 조건을 가져오거나 설정합니다.
MinWidth	요소의 최소 너비 제약 조건을 가져오거나 설정합니다.
Padding	요소 테두리와 요소 콘텐츠 사이의 여백을 설정합니다.
Panel.ZIndex	요소가 겹치는 경유 우선순위를 설정합니다.
RenderTransform	요소의 렌더링 위치에 영향을 주는 변환 정보를 가져오거나 설정합니다.
VerticalAlignment	요소를 패널 또는 항목 컨트롤 등의 부모 요소에서 작성하는 경우 요소에 적용되는 세로 맞춤 특성을 가져오거나 설정합니다.
Visibility	요소의 UI(사용자 인터페이스) 표시 여부를 가져오거나 설정합니다.
Width	요소의 너비를 가져오거나 설정합니다.

 

 

 -      ActualHeight, ActualWidth, Height, Width

 

ActualHeight, ActualWidth, Height, Width는 모두 요소의 크기에 관련된 속성들입니다.

레이아웃의 상황에 따라 요소의 크기를 제한하여 설정해 사용하는 경우도 있겠지만 대부분은 Height나 Width를 설정하지 않고 사용자의 인터페이스 변화에 자동으로 크기가 변경되도록 하는 것이 가장 좋은 방법이라 할 수 있겠습니다.

ActualHeight와 ActualWidth는 개발자가 개발을 함에 있어 알고 있으면 도움이 도는 속성이기에 설명을 하려 합니다.

위에서 설명을 했듯이 요소들은 사용자 인터페이스에 따라 자동으로 변하도록 Height나 Width를 설정하지 않고 작업을 많이 하게 됩니다. 그런데 때에 따라 요소들의 크기를 알아야 할 때가 있겠지요?... 충분히 있을 수 있습니다.

그런데 Height나 Width를 설정하지 않고 높이나 넓이를 구하려 하면 얻어지는 값은 “NaN”이란 값을 반환하게 될 것입니다. 그래서 이럴 때 ActualHeight, ActualWidth를 사용하면 됩니다.

-      MaxHeight, MaxWidth, MinHeight, MinWidth

 

위에서도 언급했듯이 때에 따라서 요소에 강제적인 너비나 높이를 설정해야 할 경우가 있습니다.

이럴 때 Width, Height을 사용하면 되지만 이는 유연하지 않기 때문에 이럴 때 MaxHeight, MaxWidth, MinHeight, MinWidth를 사용하는 것이 Width, Height을 사용하는 것이 더 낳습니다.

이는 고정된 사이즈보다 어느 정도 사용자 UI를 고려해 요소크기의 최소한, 최대한을 정해 주는 것입니다. 그러면 그 사이에 있는 동안은 컨트롤의 사이즈는 자동으로 변하게 되며 지정한 최소, 최대 사이즈 범위를 벗어났을 경우에 요소의 크기는 더 이상 줄어들거나, 커지지 않을 것입니다.

-      FlowDirection

 

FlowDirection 속성은 텍스트 및 기타 UI 요소의 콘텐츠의 흐름 방향을 지정하거나 설정할 때 사용되며 기본적으로 System Locale을 따릅니다.

예를 들어 영어, 독일 및 러시아어 문화권에서는 왼쪽에서 오른쪽으로 진행되는 언어의 흐름을 볼 수 있고 기타 히브리어, 아랍어와 같이 몇몇 문화권에서는 오른쪽에서 왼쪽으로 진행되는 언어의 흐름을 볼 수 있습니다.

-      HorizontalAlignment, VerticalAlignment

 

HorizontalAlignment속성과 VerticalAlignment속성은 부모요소의 공간에서 어떻게 정렬 할 것인가를 조정할 때 사용하는 속성입니다. 예를 들어 부모요소인 StackPanel안에 자식요소로 버튼이 들어가 있는 경우를 생각해 봅시다. 이럴 때 StackPanel안에서 Button의 위치를 가운데, 오른쪽, 왼쪽 등으로 정렬시키고자 할 때 사용할 수 있습니다.

기본적으로 두 속성의 기본 값은 “Stretch”로 특별한 설정이 없으면 자식요소는 크기가 늘어나 부모요소의 공백을 메우게 됩니다.

HorizontalAlignment 속성의 멤버로는 Left, Center, Right, Stretch가 있으며 VerticalAlignment 속성의 멤버로는 Top, Center, Bottom, Stretch등의 옵션을 사용할 수 있습니다.

-      Margin, Padding

 

Margin속성은 레이아웃에서 요소의 주변에 남겨져야 할 공간을 결정할 때 사용 합니다.

이러한 특성으로 요소의 Margin을 이용하여 레이아웃에서 위치를 제어할 때 사용하기도 합니다.

Padding속성은 Margin과 반대되는 경우라 생각하면 될 것 같습니다. Margin은 요소의 외부의 여백을 지정하는 것이라면 Padding속성은 요소의 경계와 내부 콘텐츠 사이의 여백을 지정하기 위한 것입니다.

-      IsEnabled, Visibility

IsEnabled 레이아웃과 관련된 속성은 아니지만 레이아웃 작업을 하다 보면 빈번히 사용됨으로 알고 넘어가자는 차원에서 정리하고자 합니다.

IsEnabled는 UIElement(WPF요소 및 기본 표시 특성을 기반으로 빌드 되는 WPF 핵심 수준 구현에 사용되는 기본 클래스입니다.)의 멤버로 UI에서 요소를 사용할 지의 여부를 결정하는데 사용됩니다.

예를 들어 영화좌석 예매를 생각해 보세요. 화면에 좌석이 배치 되어있고, 그 좌석을 클릭해서 내가 예약하고자 하는 좌석을 결정합니다. 그런데 이미 예약되어 있는 좌석은 다른 사람이 선택을 할 수가 없지요?.. 이럴 때 IsEnabled를 사용하는 것입니다.

IsEnabled는 True, False로 설정할 수 있으며, False로 설정 되어있다면 화면에 요소의 모양은 나타나는데 사용을 할 수 없게 되는 것이지요. 이것을 비활성화라고도 합니다.

 -      LayoutTransform, RenderTransform

 

LayoutTransform속성이나 RenderTransform속성은 해당 요소에 대해 크기(scaling), 회전(rotation)등을 변형시킬 때 사용하는 속성입니다.

각각의 속성에는 대략 6개정도의 클래스를 포함하고 있습니다.

 MatrixTransform

 RotateTransform

 ScaleTransform

 SkewTransform

 TranslateTransform

-      Panel.ZIndex

 

ZIndex 그리 여려운 개념은 아닙니다. ZIndex하니까 거창해 보이기는 하나 아주 단순한 개념입니다. ㅋ

Zindex라 함은 평면에서 이 요소가 표시되는 순서를 설정하는 것입니다. 좁은 Panel 안에서 컨트롤들이 겹쳐서 배치 되어야 할 경우에 이 속성을 사용하는데 설정된 순서에 따라 제일 아래에 보이게도 할 수있고, 제일 위에 보이할 수도 있습니다.