Layout Panel #5 (WrapPanel)

WrapPanel은 System.Windows.Controls 어셈블리를 참조 추가하고, 네임스페이스를 참조하기 위한 접두사를 사용하여 쓸 수 있다. (참고 : 2009/06/12 - [Control/Layout Panel] - Layout Panel #4 (DockPanel))

WrapPanel 
StackPanel과 같이 추가 되는 콘텐트 엘리먼트의 순서에 따라 차곡차곡 배치하는 Layout Panel.

WrapPanel과 StackPanel
WrapPanel 에 콘텐트 엘리먼트를 추가하면, 추가 된 순서대로 배치 되며, 배치 방향은 Default로 Horizontal이 된다.

<controls:WrapPanel Width="160" Height="160">

<Button Content="#1" Width="40" Height="40">
<Button Content="#2" Width="40" Height="40">
<Button Content="#3" Width="40" Height="40">
<Button Content="#4" Width="40" Height="40">

</controls:WrapPanel>

StackPanel도 WrapPanel과 같은 Horizontal로 배치 해 보면,

<StackPanel Width="160" Height="160" Orientation="Horizontal">

<Button Content="#1" Width="40" Height="40">
<Button Content="#2" Width="40" Height="40">
<Button Content="#3" Width="40" Height="40">
<Button Content="#4" Width="40" Height="40">

</StackPanel>

다음과 같이, 배치 된다.

StackPanel의 Button 들의 VerticalAlignment 를 Top으로 한다면, WrapPanel과 똑같은 형태로 배치 될 것이다.

WrapPanel 과 StackPanel의 차이점은 무엇인가?
WrapPanel의 이름에서 유추 할 수 있듯이 배치 되는 콘텐트 엘리먼트가 늘어나면서, WrapPanel의 너비나 높이에 꽉 찬다면, 다음 행이나 열로 넘어가서 다시 배치되게 된다.

위 코드에서 Button을 더 추가해 보면,

<Button Content="#5" Width="40" Height="40">
<Button Content="#6" Width="40" Height="40">
<Button Content="#7" Width="40" Height="40">
<Button Content="#8" Width="40" Height="40">
<Button Content="#9" Width="40" Height="40">
<Button Content="#10" Width="40" Height="40">
<Button Content="#11" Width="40" Height="40">
<Button Content="#12" Width="40" Height="40">
<Button Content="#13" Width="40" Height="40">
<Button Content="#14" Width="40" Height="40">

다음과 같이 배치된다.

StackPanel은 추가 된 버튼을 화면에 표시 하지 못하고 잘린 반면, WrapPanel은 버튼이 추가 되면서, 너비에 꽉 차면 다음 행으로 내려와 다음 버튼을 다시 배치하고 있다.
이때, Orientation을 Vertical로 둔다면,

WrapPanel은 버튼이 추가 되면서, 높이에 꽉 차면 다음 열로 넘어와 다음 버튼을 다시 배치하고 있다.

콘텐트 엘리먼트의 Alignment 조절하기
WrapPanel도 StackPanel과 같이 WrapPanel 에 배치 된 콘텐트 엘리먼트에서 HorizontalAlignment, VerticalAlignment를 지정 할 수 있다.

<controls:WrapPanel Width="160" Height="160" Orientation="Vertical">

<Button Content="#3" Width="80" Height="40"/>

<controls:WrapPanel Width="160" Height="160">

<Button Content="#6" Width="40" Height="80"/>

Orientation = "Vertical" 인 경우, Button 3의 Width를 변경하여 Button 1,2,4의 Horizontal 쪽으로 여백이 생겼고,
Orientation = "Horizontal"인 경우, Button 6의 Height를 변경하여 Button 5,7,8의 Vertical 쪽으로 여백이 생겼다.

이 여백 에 HorizontalAlignment, VerticalAlignment를 변경하여 다음과 같이 배치 할 수 있다.

<Button Content="#1" Width="40" Height="40" HorizontalAlignment="Left"/>
<Button Content="#2" Width="40" Height="40" HorizontalAlignment="Center"/>
<Button Content="#3" Width="80" Height="40"/>
<Button Content="#4" Width="40" Height="40" HorizontalAlignment="Right"/>

<Button Content="#5" Width="40" Height="40" VerticalAlignment="Top"/>
<Button Content="#6" Width="40" Height="80"/>
<Button Content="#7" Width="40" Height="40" VerticalAlignment="Center"/>
<Button Content="#8" Width="40" Height="40" VerticalAlignment="Bottom"/>