[C# WPF] WPF Layout(레이아웃) – StackPanel 사용하기

안녕하세요.

 

오늘부터는 WPF에서 UI 구성에 있어서 가장 중요하면서 기초가 되는 Layout 에 대해서 알아 보려고 합니다.

 

WPF 에서 기본으로 제공해주는 Layout 은 여러 가지가 있는데요. 오늘은 첫 번째 포스팅으로 StackPanel 에 대해서 알아 보려고 합니다.

 

그리고 다음 포스팅에서도 계속해서 여러 Layout 에 대해서 공부해 보겠습니다!

 

StackPanel 이란?

가로 또는 세로 방향으로 지정할 수 있는 단일 선에 따라 자식 요소를 정렬하는 Panel 입니다.

즉, 쉽게 말해 가로면 가로, 세로면 세로로 쭉 정렬해 주는 Panel 입니다.

 

그럼 실제 StackPanel 예제 코드를 통해 어떻게 사용하는지 보여 드리도록 하겠습니다.

 

먼저 세로로 컨트롤들이 배치되는 예제 코드를 보여 드리도록 하겠습니다.

 

세로 배치

Xaml.cs

<Window x:Class="StackPanelTest.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
        xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
        xmlns:local="clr-namespace:StackPanelTest"
        mc:Ignorable="d"
        Title="MainWindow" Height="450" Width="400">
    <StackPanel>
        <TextBlock Margin="10" FontSize="20">어떤 종류의 커피를 드시겠습니까?</TextBlock>
        <Button Margin="10">아이스 아메리카노</Button>
        <Button Margin="10">카페모카</Button>
        <Button Margin="10">돌체라떼</Button>
        <Button Margin="10">카푸치노</Button>
    </StackPanel>
</Window>
 

이제는 위의 Button 컨트롤을 가로로 배치해 보도록 하겠습니다.

 

가로 배치

Xaml.cs

<Window x:Class="StackPanelTest.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
        xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
        xmlns:local="clr-namespace:StackPanelTest"
        mc:Ignorable="d"
        Title="MainWindow" Height="200" Width="450">
    <StackPanel Margin="10" Orientation="Horizontal">
        <Button MinWidth="93" Margin="10, 0, 0, 0">아이스 아메리카노</Button>
        <Button MinWidth="93" Margin="10, 0, 0, 0">카페모카</Button>
        <Button MinWidth="93" Margin="10, 0, 0, 0">돌체라떼</Button>
        <Button MinWidth="93" Margin="10, 0, 0, 0">카푸치노</Button>
    </StackPanel>
</Window>
 

위와 같이 StackPanel 에서 Orientation 속성을 Vertical로 할지, Horizontal 로 할지 지정을 하여 가로, 세로를 설정해 줄 수 있습니다.

 

이로써 StackPanel 사용방법에 대해서 알아 보았습니다.

 

감사합니다.^^