[WPF-Panel] StackPanel 사용법 및 예제

by westAhn

StackPanel이란?

WPF StackPanel은 수직 또는 수평 방향으로 정렬하는 방법이다. WrapPanel과 차이점은 WrapPanel의 자식 컨트롤은 배치되는 공간이 부족한 경우 다음 줄로 자동으로 채우지만 StackPanel은 한 방향으로만 채운다.

StackPanel 사용법 및 예제

Orientation 속성을 Vertical로 설정하면 수직으로 나란히 배치 되고 Horizontal로 설정하면 수평으로 나란히 배치된다. Orientation 속성을 설정하지 않으면 기본 설정은 Vertical이다.

예제1-수직 배치

Orientation속성을 설정하지 않아 기본 값인 Vertical로 배치되었다. WrapPanel의 컨트롤은 컨트롤 크기만큼 공간을 차지 하지만 StackPanel의 컨트롤은 가로 넓이 전체를 차지한다.

XAML
<Window x:Class="StackPanelTest.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        Title="StackPanel" Height="200" Width="250">
    <StackPanel>
        <Button Content="One"></Button>
        <Button Content="Two"></Button>
        <Button Content="Three"></Button>
        <Button Content="Four"></Button>
        <Button Content="Five"></Button>
        <Button Content="Six"></Button>
    </StackPanel>
</Window>
WPF StackPanel의 Orientation을 Vertical로 설정했을 때의 결과

예제2-수평 배치

Orientation속성을 Horizonal로 설정하여 자식 컨트롤이 가로로 나란히 배치되었다. 자식 컨트롤의 높이는 세로 전체를 차지한다.

XML
<Window x:Class="StackPanelTest.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        Title="StackPanel" Height="200" Width="250">
    <StackPanel Orientation="Horizontal">
        <Button Content="One"></Button>
        <Button Content="Two"></Button>
        <Button Content="Three"></Button>
        <Button Content="Four"></Button>
        <Button Content="Five"></Button>
        <Button Content="Six"></Button>
    </StackPanel>
</Window>
WPF StackPanel의 Orientation을 Horizontal로 설정했을 때의 결과

예제3-수직 배치 후 HorizontalAlignment사용

Orientation 속성을 Vertical로 설정하고 자식 컨트롤 HorizontalAlignment속성을 Left, Center, Right, Stretch중 하나로 설정하였다. 각 컨트롤은 속성에 맞게 배치되고 Stretch로 설정하면 가로 넓이 전체를 차지한다.

XML
<Window x:Class="StackPanelTest.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        Title="StackPanel" Height="200" Width="250">
    <StackPanel Orientation="Vertical">
        <Button HorizontalAlignment="Left" Content="One"></Button>
        <Button HorizontalAlignment="Center" Content="Two"></Button>
        <Button HorizontalAlignment="Right" Content="Three"></Button>
        <Button HorizontalAlignment="Stretch" Content="Four"></Button>
        <Button HorizontalAlignment="Center" Content="Five"></Button>
        <Button HorizontalAlignment="Left" Content="Six"></Button>
    </StackPanel>
</Window>
WPF StackPanel의 Orientation을 Vertical로 설정한 후 자식 컨트롤의 HorizontalAlignment속성을 설정했을 때의 결과

예제4-수평 배치 후 VerticalAlignment사용

Orientation 속성을 Horizontal로 설정하고 자식 컨트롤 VerticalAlignment속성을 Top, Center, Bottom, Stretch중 하나로 설정하였다. 각 컨트롤은 속성에 맞게 배치되고 Stretch로 설정하면 세로 높이 전체를 차지한다.

XML
<Window x:Class="StackPanelTest.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        Title="StackPanel" Height="200" Width="250">
    <StackPanel Orientation="Horizontal">
        <Button VerticalAlignment="Top" Content="One"></Button>
        <Button VerticalAlignment="Center" Content="Two"></Button>
        <Button VerticalAlignment="Bottom" Content="Three"></Button>
        <Button VerticalAlignment="Stretch" Content="Four"></Button>
        <Button VerticalAlignment="Center" Content="Five"></Button>
        <Button VerticalAlignment="Top" Content="Six"></Button>
    </StackPanel>
</Window>
WPF StackPanel의 Orientation을 Vertical로 설정한 후 자식 컨트롤의 VerticalAlignment속성을 설정했을 때의 결과

Leave a Comment