WrapPanel 컨트롤

WrapPanel은 더 이상 공간이 없을 때까지 각 자식 컨트롤을 가로 또는 세로로 배치하다가 공간이 없으면 다음 줄로 줄바꿈을 해서 계속해서 배치합니다. 공간이 없을 때 자동으로 줄바꿈하는 세로 또는 가로 목록 컨트롤이 필요할 때 사용하십시오.

WrapPanel에서 Horizontal orientation(가로 방향)을 사용하면 하위 컨트롤에 가장 높은 항목을 기준으로 동일한 높이가 지정됩니다. WrapPanel이 Vertical orientation(세로 방향)이면 자식 컨트롤에 가장 넓은 항목을 기준으로 동일한 너비가 지정됩니다.

첫번째 예제에서 WrapPanel의 기본 방향은 Horizontal(가로방향) 이라는 것을 확인하십시오.

<Window x:Class="WpfTutorialSamples.Panels.WrapPanel"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        Title="WrapPanel" Height="300" Width="300">
	<WrapPanel>
		<Button>Test button 1</Button>
		<Button>Test button 2</Button>
		<Button>Test button 3</Button>
		<Button Height="40">Test button 4</Button>
		<Button>Test button 5</Button>
		<Button>Test button 6</Button>
	</WrapPanel>
</Window>

두 번째 행의 버튼 중 하나에 특정 높이를 설정한 것에 주목하십시오. 스크린 샷에서 첫 번째 행에서처럼 단추의 전체 행이 필요한 높이만 갖는 것에 비해, 두번째 줄은 지정한 높이의 동일한 행을 갖게됩니다. 패널은 이름에서 알 수있는 것과 정확히 일치한다는 것을 알게 될 것입니다. 더 이상 공간이 없을 때 내용을 래핑합니다. 이 경우 네 번째 버튼은 첫 번째 줄에 맞지 않으므로 자동으로 다음 줄로 넘어갑니다.

실행해서 Window를 띄워 만들어 창의 크기를 작게 만들어 공간이 없게 만들면, 패널이 즉시 조정되는 것을 볼 수 있습니다.

Orientation(방향)을 Vertical(세로)로 설정해도 모든 동작이 적용됩니다. 이전과 똑같은 예제가 있지만 방향이 Vertical(세로)인 WrapPanel 입니다.

<Window x:Class="WpfTutorialSamples.Panels.WrapPanel"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        Title="WrapPanel" Height="120" Width="300">
	<WrapPanel Orientation="Vertical">
		<Button>Test button 1</Button>
		<Button>Test button 2</Button>
		<Button>Test button 3</Button>
		<Button Width="140">Test button 4</Button>
		<Button>Test button 5</Button>
		<Button>Test button 6</Button>
	</WrapPanel>
</Window>

버튼이 수평 방향이 아니라 수직 방향으로 어떻게 움직이는지를 볼 수 있습니다. 이 경우 네 번째 버튼의 너비가 더 넓어졌는데, Horizontal(가로방향) 예제에서 버튼 높이의 변화처럼, 같은 열의 버튼들의 너비가 변하는 것을 볼 수 있습니다.

Horizontal WrapPanel은 같은 행의 높이와 일치하고 Vertial WrapPanel은 동일한 열의 너비와 일치하지만, Vertial WrapPanel에서는 높이가 일치하지 않으며 Horizontal WrapPanel에서는 너비가 일치하지 않습니다. Vertical WrapPanel이지만 네 번째 버튼에 사용자 정의 너비와 높이를 갖는 다음 예제를 살펴보십시오.

<Button Width="140" Height="44">Test button 4</Button>

그것은 이렇게 보입니다.

button5는 너비만 맞춰지는 것에 주목하십시오. button6이 새 열에 배치되지만, 높이는 맞춰지지 않습니다.