WPF Panel 종류

 

Wrap Panel 

 

공간이 없을 때까지 각 자식 컨트롤을 가로 또는 세로로 배치하고 줄바꿈을 합니다. 

 

<WrapPanel Orientation="Horizontal" Background="AntiqueWhite" Height="250">
    <Button Width="200" Height="100">Button 1</Button>
    <Button Width="200" Height="100">Button 2</Button>
    <Button Width="200" Height="100">Button 3</Button>
    <Button Width="200" Height="100">Button 4</Button>
    <Button Width="200" Height="100">Button 5</Button>
</WrapPanel>

Wrap Panel 샘플

Orientation 속성 : Horizontal(가로), Vertical(세로)

Height 속성 : 값을 지정하지 않으면 부모 영역의 전체를 채움

 

 

Stack Panel 

 

Wrap Panel가 유사하게 동작하지만, 하위 컨트롤이 너무 많은 공간을 차지하면 배치하는 가능한 방향으로 패널 자체를 확장합니다. 

 

<StackPanel Orientation="Horizontal" Background="AntiqueWhite" Height="250">
    <Button Width="200" Height="100">Button 1</Button>
    <Button Width="200" Height="100">Button 2</Button>
    <Button Width="200" Height="100">Button 3</Button>
    <Button Width="200" Height="100">Button 4</Button>
    <Button Width="200" Height="100">Button 5</Button>
</StackPanel>

 

Stack Panel 샘플

 

 

 

Dock Panel 

 

하위 컨트롤을 위, 아래, 왼쪽 또는 오른쪽으로 도킹시킵니다. 기본적으로 마지막 컨트롤은 특정 도킹 위치가 지정되지 않은 경우 남아 있는 공간을 채웁니다. 

 

<DockPanel Background="AntiqueWhite" Height="250">
    <Button Width="100" Height="100">Button 1</Button>
    <Button Width="100" Height="100">Button 2</Button>
    <Button Width="100" Height="100">Button 3</Button>
    <Button Width="100" Height="100">Button 4</Button>
    <Button Height="100">Button 5</Button>
</DockPanel>

 

Dock Panel 샘플

위 코드에서 Button 5번에 Width 값을 지정하면 해당 너비만큼 컨트롤이 변경되고 남은 영역의 Center에 위치하게 됩니다. 전체 영역이 하위 컨트롤의 합친 영역보다 작다면 Stack Panel처럼 표시됩니다. 

 

 

Canvas

 

WinForms 방식을 모방한 간단한 패널로 하위 컨트롤을 특정 자표에 위치시킬 수 있습니다. 레이아웃 용으로는 잘 사용되지 않는 Panel입니다. 

 

 

Grid

 

Grid는 행과 열을 포함하고 있습니다. 각 행의 높이와 열의 너비를 픽셀의 크기 또는 백분율, 컨텐츠 크기에 따라 자동으로 조절합니다. 여러 열이 필요하고 다른 패널과 함께 사용해야 할 주로 사용합니다. 

 

 

Uniform Grid

 

Grid와 유사하지만 모든 행과 열의 크기가 동일합니다.