WPF Layout : Alignment, Margin, Padding

김정환(John.Kim)

Published in

OldbeeDev

2 min readSep 11, 2017

Panel 클래스를 이용하여 큰 레이아웃을 정한 다음에는 컨트롤을 왼쪽으로 붙일지, 가운데에 맞출지, 간격은 얼마나 띄울지 등의 미세 조정이 필요하다.

HorizontalAlignment, VerticalAlignment

이 속성은 자식 컨트롤이 부모 Panel의 어느 면에 붙을지 지정한다.

HorizontalAlignment 속성값 : Left, Right, Center, Stretch(=기본값)
VerticalAlignment 속성값 : Top, Bottom, Center, Stretch(=기본값)

만약 컨트롤에 Width, Height 값을 명시하면 Stretch Alignment는 효과가 없어진다. 아래 그림은 이 속성의 조합을 보여준다.

Margin

Margin은 컨트롤, 아니 엄밀히 말하면 FrameworkElement 객체의 바깥 여백을 지정한다. 단위는 pixel이다.

Margin=“8” : element의 상하좌우 모두 8 px 간격을 둔다.
Margin=“8, 16” : element의 좌우로 8, 상하로 16 px 간격을 띄운다.
Margin=“8, 12, 16, 20” : element의 왼쪽 8, 위쪽 12, 오른쪽 16, 아래쪽 20 px 간격을 둔다.

Padding

Padding은 컨트롤 내부 Content와 컨트롤 경계 사이의 간격, 즉 안쪽 여백을 지정한다. 단위는 pixel이다. Padding은 Block, Border, TextBlock, 그리고 Control 클래스에 정의되어 있다. Control 클래스 중에서 예외적으로 Calendar, ProgressBar, Slider는 Padding 속성이 효과가 없다.

HorizontalContentAlignment, VerticalContentAlignment

이 속성은 컨트롤 내부 Content가 컨트롤 경계 내에서 어느 면에 맞춰질 것인지 지정한다. 아래와 같이 컨트롤마다 기본값이 서로 다르다.

Button : Center, Center
Calendar : Left, Top
CheckBox : Left, Top
ComboBox : Left, Top
ContextMenu : Left, Center
DataGrid : Left, Top
DatePicker : Stretch, Top
Expander : Stretch, Stretch
GroupBox : Left, Top
Label : Left, Top
ListBox : Left, Center
Menu : Left, Top
PasswordBox : Left, Top
ProgressBar : Left, Top
RadioButton : Left, Top
RepeatButton : Center, Center
RichTextBox : Left, Top
Slider : Left, Top
StatusBar : Left, Top
TabControl : Center, Center
TextBox : Left, Top
TreeView : Left, Center

Wrapup :

위에서 살펴본 속성들의 관계를 정리하면 아래 그림과 같이 간단하다. 😏