레이아웃 <Grid>

패널	특징	자식 요소 겹침
Canvas	가장 기본적인 패널로 자식 요소를 원하는 위치에 배치할 수 있다.	O
StackPanel	가로나 세로 방향으로 자식 요소를 일렬로 정렬한다.	X
WrapPanel	StackPanel 과 비슷하지만 자식 요소를 왼쪽에서 오른쪽으로 차례로 배치하며 크기를 벗어나면 다음 줄에 배치한다.	X
DockPanel	각 지정 방향에 자식 요소를 배치한다.	X
Grid	가장 강력한 패널로 표 형태로 자식 요소를 배치한다.	O

---

 

Grid 패널은 패널 중 가장 강력한 패널로 자식 요소를 표 형태로 배치하며 자식 요소들 간의 간격과 배율을 유지 시킬 수 있다.

행과 열로 이루어진 Grid 는 셀이라 부르는 행,열의 위치에 자식 요소를 배치하거나 여러 셀에 자식 요소를 배치할 수 있다.

 

 

다음은 2*3 형태의 Grid 패널로 Button 을 배치하는 예제다.

 

 

Grid.RowDefinitions 속성 요소는 RowDefinition 요소를 사용하여 행의 개수를 결정한다.

Grid.ColumnDefinitions 속성 요소는 ColumnDefintion 요소를 사용하여 열의 개수를 결정한다.

 

각 자식 요소는 Grid.Row, Grid.Column 결합 속성을 사용하여 배치할 위치를 지정한다.

ShowGridLines=”true” 속성은 셀들의 경계를 확인하기 위해 점선을 출력한다.

Grid.RowSpan 과 Grid.ColumnSpan 을 사용하면 여러 셀에 하나의 자식 요소를 배치할 수 있다.

 

다음은 Grid.RowSpan 과 Grid.ColumnSpan 을 사용한 Grid 패널 예제다.

 

 

1 번 Button 은 Grid.RowSpan 을 사용하여 두 행을 하나의 셀로 사용하고 있으며

5 번 Button 은 Grid.ColumnSpan 을 사용하여 두 열을 하나의 셀로 사용하고 있다.

 

Grid 패널은 자식 요소들의 크기를 다루기 위한 방법으로 세 가지(고정, 자동, 균등)의 옵션을 제공한다.

 

고정 크기는 Width 와 Height 을 사용하여 크기를 고정 시키고 자동은 자식 요소의 컨텐츠 크기에 맞게 자동으로 조정되며 균등은 각 요소들을 일정한 비율로 크기 조정한다.

---

1) 고정크기

---

2) 자동크기

---

3) 균등조정

---