3-4-3.그리드와 마진

마진은 여백을 띄우는 속성이지만 컨트롤을 절대 좌표에 배치하는 수단으로도 사용할 수 있다. 이 기법을 사용하면 그리드를 캔버스 대용으로 활용할 수 있으며 캔버스로 가능한 모든 배치를 만들어 낼 수 있다. 다음 예제는 앞에서 만들었던 캔버스 예제를 그리드로 다시 구현해 본 것이다.

GridMargin

<Grid Background="Blue">

<Button Content="111" HorizontalAlignment="Left"

VerticalAlignment="Top" Margin="100,50,0,0" />

<Button Content="222" HorizontalAlignment="Left"

VerticalAlignment="Top" Margin="200,80,0,0" />

<Button Content="333" HorizontalAlignment="Left"

VerticalAlignment="Top" Margin="230,120,0,0" />

</Grid>

</Grid>

1셀 그리드안에 버튼 3개를 배치하되 정렬은 모두 왼쪽 위로 맞추었다. 정렬의 디폴트가 Stretch이므로 컨트롤의 크기대로 배치하고 싶으면 반드시 좌상단 기준으로 바꿔야 한다. 모든 컨트롤을 그리드의 원점에 배치하되 Margin 속성으로 컨트롤의 좌상단 좌표를 지정한다. 왼쪽 마진과 위쪽 마진은 그리드의 좌상단 원점과의 거리를 지정하므로 결국 절대 좌표를 지정하는 셈이다.

실행 결과는 캔버스에 컨트롤을 배치한 것과 완전히 동일해서 어떤 패널을 사용했는지 구분되지 않는 정도다. 다만 캔버스는 ZIndex 속성으로 컨트롤의 순서를 지정할 수 있지만 그리드는 그렇지 않다는 차이점이 있다. 디자인 뷰에서 컨트롤을 드래그하여 컨텐트 패널안에 배치할 때 이 방법으로 컨트롤을 배치한다. 앞 장에서 만들었던 EchoText 예제를 보면 모든 컨트롤이 컨텐트 패널에 배치되어 있고 마진으로 컨트롤의 좌표가 지정되어 있음을 알 수 있다.

디자인 뷰가 마진 속성으로 컨트롤을 배치하는 이유는 마우스 드래그 동작과 잘 어울리기 때문이다. 마우스를 드래그하면 픽셀 단위로 컨트롤을 옮길 수 있고 픽셀 단위의 임의 위치에 컨트롤을 배치하는 가장 손쉬운 방법이 마진이다. 위 예제도 디자인 뷰에서 컨트롤을 드래그하여 위치를 마음대로 옮길 수 있다. 디자인 뷰에서 333 버튼을 드래그하여 움직여 보자.

버튼을 드래그하면서 XAML 소스창을 보면 마진의 처음 두 값이 드롭한 위치로 바뀔 것이다. 디자인 뷰에서 편리하게 위치를 조정할 수 있지만 절대 좌표를 지정하는 방식이라 호환성에는 불리하다. 캔버스와 동일한 문제가 있으므로 테스트 예제 제작 정도에만 활용하고 실제 프로젝트에서는 셀을 나누어 셀안에 배치하는 것이 바람직하다.

그리드에 마진을 쓸 수 있는 것과 마찬가지로 스택 패널에도 마진을 사용할 수 있다. 그러나 이 경우는 기준점이 스택 패널의 원점인 좌상단이 아니라 직전 컨트롤이 배치된 바로 아래쪽(수평 스택 패널의 경우 오른쪽) 좌표이므로 마진이 절대 좌표와는 다른 의미가 되어 버린다. 다음 예제로 테스트해 보자.

StackMargin

<StackPanel Background="Blue">

<Button Content="111" Margin="100,50,0,0" />

<Button Content="222" Margin="200,80,0,0" />

<Button Content="333" />

</StackPanel>

</Grid>

스택 패널에 3개의 버튼을 배치하고 마진을 지정했다.

111 버튼은 마진으로 지정한 (100, 50)에 제대로 배치되었다. 그러나 222 버튼은 (200, 80)에 배치되는 것이 아니라 111 버튼이 배치된 바로 아래 왼쪽 좌표를 기준으로 하여 (200, 80) 만큼 떨어진 곳에 배치된다. 이 위치는 절대 좌표도 아니고 헷갈리기만 할 뿐이므로 실용성이 없다. 스택 패널에서는 행 내에서 여백을 띄울 때만 마진을 사용해야 한다.