#107_닷넷(.NET)_ WPF_ 레이아웃(Layout)

안녕하세요 삽잡이입니다.

이번 시간에는 WPF에서의 

레이아웃에 대한 내용을 알아보려고합니다.

레이아웃은 외각, 틀, 형태를 의미하는 용어입니다.

WPF에서의 레이아웃은 가지고 있는 요소들에 대한 

정렬 방법 및 규칙에 대해서 제공해줍니다.

여기에는 핵심적인 역할을 하는 패널이라는 컨트롤이 있죠.

패널(Panel)은 자신의 콘텐츠를

어떻게 정렬해야하는지 알고 있는 컨트롤 입니다.

내부에 콘텐츠들이 모여있으면, 어떻게 정렬해야하는지를 다 가지고 있다는 것입니다.

대표적인 패널 컨트롤에는

Canvas, DockPanel, Grid, StackPanel, UniformGrid, WrapPanel 이 있습니다.

각 컨트롤들을 간략하게 설명하자면...

Canvas는 위치와 크기를 이용해 정렬하는 컨트롤입니다.

DockPanel은 각 면에 달라 붙게 하는 컨트롤입니다.

Grid는 행과 열에 대한 콘텐츠 정렬을 하는 컨트롤입니다.

StackPanel은 좌/우나 상/하로 쌓아 올려 정렬하는 컨트롤입니다.

UniformGrid는 행과 열을 동일한 크기로 자동 생성하고, 

이에 따라 정렬해주는 컨트롤입니다.

WrapPanel은 행의 콘텐츠들이 꽉 찾을 때,

다음 행으로 개행하도록 정렬해주는 컨트롤입니다.

조금씩 살펴보도록 하지요.

Grid 레이아웃부터 알아보도록 하겠습니다.

우선, Grid란 우리말로 '격자'라는 의미를 가지고 있습니다.

행과 열이 줄로써 그어진 형태를 Grid Panel이라고 부르지요.

즉, Grid는 행과 열을 지정하는 패널을 의미합니다.

XML에서는 Grid의 컨텐츠이겠지만,

WPF에서는 단지 Grid의 속성을 요소로써 표현한 것입니다.

콘텐츠가 아닌, 속성을 자식 Element로써 표현했다는 것입니다.

해당 속성은 행과 열로써 3x3 짜리 속성을 만들겠다는 XAML에서의 표현입니다.

3x3 짜리의 패널에 Button을 넣어줍니다.

Grid.ColumnSpan은 확장을 의미함으로써, 행을 더 자치할 수 있게 됩니다.

RowSpan도 열에 대한 확장을 의미하겠지요.

그리기를 할 때를 생각해봅시다.

WinForm, MFC에서 사용했던 그리기 방식은 

Grid처럼 자동으로 행과 열이 정렬됬을까요? 아닙니다.

지금까지 그리기 방식과 똑같은 패널은 바로, Canvas패널입니다.

Canvas는 Window 안에 캔버스를 넣고 

컨텐츠에 위치만 적어주면 됩니다.

내가 원하는 위치를 지정하고, 크기를 지정하는 방식과 똑같습니다.

 

On Canvas의 크기에 따라 컨트롤 크기들도 달라질 수 있습니다.

크기를 지정하지 않을 경우 Default적인 동작을 수행하게 됩니다.

즉, 콘텐츠에 맞는 컨트롤이 된다 이것이죠.

보여지는 모든 것을 가리켜 레이아웃이라고 부릅니다.

이 레이아웃에 

콘텐츠가 어떻게 보여질지... 컨트롤들이 어떻게 보여질지...

이와 같은 부분에 패널이 많은 영향을 주게되니, 

핵심적인 역할을 한다고 볼 수 있습니다.

콘텐츠들이 겹칠 수 있는 패널은 두가지 밖에 없습니다.

바로, Grid와 Canvas이지요.

그래서 ZIndex라는 속성을 제공해주는데,

겹쳐졌을 때 누가 앞으로 가고, 누가 뒤로 가는지에 대한 설정을 할 수 있습니다.

그런데, 잘 보시면 아시겠지만

Canvas 패널인데, Panel의 속성을 사용하고 있습니다.

즉, Canvas의 부모인 Panel의 ZIndex 속성을 사용하고 있다 이겁니다.

이를 '결합 속성 문법'이라고 부릅니다.

XAML은 부모의 속성도 자식에게 결합하여 마치 자기의 것인 듯 사용할 수 있습니다.

Stack 패널의 경우

알아서 착착 쌓이는 패널입니다.

Orientation이 방향을 뜻하는데, 

Vertical이라던지, Horizontal로 값을 부여하여 방향을 설정할 수 있습니다.

해당 레이아웃은 

모든 옵션에 따라 위치가 결정됩니다.

지금까지 간략하게 레이아웃에 대해서 알아봤습니다.. 

이상 삽잡이였습니다!

<참고 : Programming WPF : 사용자 경험(UX)을 바꾸는 기술>