윈폰 매뉴얼

3-4-2.마진과 패딩

별다른 지정이 없으면 컨트롤은 자신에게 주어진 영역을 모두 사용하여 가급적이면 넓은 자리를 차지한다. 혼자 있을 때는 상관없지만 여러 컨트롤이 인접해 있을 때는 다닥 다닥 붙어서 보기에 갑갑하다. 뿐만 아니라 너무 빽빽하게 붙어서 터치의 정확도가 떨어지는 기능상의 문제도 있다. 마우스로 클릭하는 데스크탑 환경에서는 붙어 있어도 상관없지만 손가락으로 터치하는 정전식 스크린은 최소한 손가락 면적만큼의 간격이 확보되어야 한다.

다수의 컨트롤을 밀도있게 배치할 때는 적당한 여백을 주어 컨트롤 사이의 간격을 띄울 필요가 있다. 여백을 적절히 배치하면 보기에도 시원스럽고 손가락으로 터치해도 실수할 위험이 없다. 컨트롤의 여백은 Margin 속성으로 지정한다. Margin은 Thickness 타입이며 Left, Top, Right, Bottom 4가지 속성으로 각 변의 여백을 따로 지정한다. 다음이 XAML 문서에서 마진을 지정하는 원칙적인 방법이다.

Margin = "왼쪽여백, 위쪽여백, 오른쪽여백, 아래쪽여백"

좌상우하(LTRB)순으로 각 변의 마진을 콤마로 구분하여 4개의 숫자를 순서대로 지정한다. 이 방법은 각 변의 여백을 개별적으로 지정할 수 있다는 면에서 섬세하지만 여백이 모두 같을 때는 같은 숫자를 4번이나 반복해야 하므로 오히려 번거롭다. 그래서 4변의 여백을 일괄적으로 지정하는 형태와 수평, 수직 여백을 지정하는 간략화된 형태도 지원한다.

Margin = "상하좌우여백"

Margin = "수평여백, 수직여백"

4면의 여백을 모두 동일하게 지정할 때는 숫자 하나만 지정하고 수평, 수직 여백을 따로 지정할 때는 두 개의 숫자만 지정한다. 2개의 숫자만 지정할 때 수평값은 좌우 여백이 되고 수직값은 상하 여백이 된다. 각 변의 여백을 각각 다르게 지정할 때만 4개의 값을 모두 지정한다. 모든 변의 여백을 동일하게 지정하는 것이 일반적이어서 4개의 값을 다 지정하는 경우보다 하나만 지정하는 경우가 더 많다.

Margin과 달리 Control 클래스는 Padding이라는 여백을 추가로 지원한다. 마진은 컨트롤과 부모와의 간격인데 비해 패딩은 컨트롤과 내용물과의 간격이다. 마진이 바깥 여백이라면 패딩은 안쪽 여백에 해당한다. 패딩도 마진과 같은 Thickness 타입이므로 지정하는 방법은 동일하다. 4면에 대해 동일한 여백을 지정할 수도 있고 수평, 수직으로 2개의 여백을 주거나 상하좌우 각각에 대해 개별적으로 여백을 지정할 수도 있다.

MarginPadding

<Grid.RowDefinitions>

</Grid.RowDefinitions>

<Grid.ColumnDefinitions>

</Grid.ColumnDefinitions>

<TextBox Text="30" Grid.Row="0" Grid.Column="1"

Margin="30"/>

<TextBox Text="30,5" Grid.Row="1" Grid.Column="0"

Margin="30, 5"/>

<TextBox Text="0,20,40,60" Grid.Row="1" Grid.Column="1"

Margin="0, 20, 40, 60"/>

<TextBox Text="P30" Grid.Row="2" Grid.Column="0"

Padding="30"/>

<TextBox Text="M0,30 P20" Grid.Row="2" Grid.Column="2"

Margin="0,30" Padding="20"/>

</Grid>

그리드를 6개의 셀로 나누고 각 셀에 텍스트 박스를 배치한 후 마진과 패딩을 각각 다르게 지정하였다. 셀 안에 텍스트 박스가 어떻게 배치되었는지 비교해 보자. 각 텍스트 박스의 캡션에 설정값을 표시해 두었다.

첫 번째 텍스트 박스는 마진을 전혀 지정하지 않았다. 이 경우 텍스트 박스는 주어진 셀을 가득 채우며 셀 경계와 여백이 없다. 바깥쪽으로 파란색 배경이 약간 보이는 것은 텍스트 박스의 테두리 일부가 투명색으로 디자인되어 있기 때문이다. 마진이 없는 텍스트 박스들이 나란히 배치되어 있으면 무척 답답해 보일 것이다.

두 번째 텍스트 박스는 마진을 30으로 지정하였다. 숫자를 하나만 지정하였으므로 좌상우하 4면 모두 30픽셀씩의 마진이 적용되며 텍스트 박스의 모든 면이 셀 경계선과 30픽셀만큼 떨어진다. 세 번째 텍스트 박스는 수평으로 30, 수직으로 5만큼의 마진을 지정하였다. 좌우는 셀과 30만큼 떨어지고 상하는 5만큼 떨어진다. 4번째 경우는 각 변마다 마진을 각각 다르게 지정했는데 간격을 이렇게 띄워야 하는 경우는 무척 드물다.

다섯 번째 텍스트 박스는 마진없이 패딩만 30으로 지정했다. 텍스트 박스와 셀 사이에는 간격이 없고 대신 텍스트 박스 안쪽의 P30이라는 문자열이 텍스트 박스의 경계선과 30픽셀만큼 떨어진다. 바깥쪽 여백은 없고 안쪽 여백만 있는 것이다. 마지막 텍스트 박스는 마진과 패딩을 모두 지정해 보았다. 마진과 패딩의 차이점을 분명히 알 수 있을 것이다.

마진은 컨트롤과 부모 사이의 간격이고 패딩은 컨트롤과 내용물과의 간격이다. 마진과 패딩은 적용되는 방향이 반대이지만 둘 다 여백이라는 면에서 비슷하다. 하지만 차이점도 많다.

① 패딩은 컨트롤의 내부이므로 크기에 포함되는데 비해 마진은 컨트롤의 외부에 존재하는 여백이므로 크기에서 제외된다.

② 패딩은 터치 영역이지만 마진은 그렇지 않다. 패딩 영역을 누르면 해당 컨트롤을 누른 것으로 인식되지만 마진은 컨트롤 외부이므로 터치 이벤트가 발생하지 않는다. 따라서 밀집한 컨트롤의 터치 정확도를 높이려면 패딩이 아니라 마진을 주어야 한다.

③ 마진은 FrameworkElement에 정의된 속성이어서 화면에 보이는 모든 컨트롤에 존재한다. 그러나 패딩은 Control과 TextBlock 등 내용물이 있는 컨트롤에만 정의되어 있다. 내용물이 없는 컨트롤은 안쪽 여백의 개념이 없다.

마진과 패딩을 직접 편집하는 것이 어렵고 헷갈린다면 속성창의 도움을 받을 수 있다. 해당 컨트롤을 선택해 놓고 속성창의 Margin 속성을 열어 보면 다음과 같은 팝업창이 나타난다.

마진의 네 값이 어느 변의 여백인지를 분명히 보여주므로 헷갈리지 않고 정확한 값을 지정할 수 있다.