Day 3: WPF 레이아웃 소개 - Grid, StackPanel, WrapPanel, DockPanel

 

Day 3: WPF Layouts

WPF에서는 다양한 레이아웃 패널을 제공합니다. 이번 시간에는 그 중에서도 가장 많이 사용되는 Grid, StackPanel, WrapPanel, DockPanel에 대해 알아보겠습니다.

Grid

Grid는 행과 열로 이루어진 표 형태의 레이아웃 패널입니다. 행과 열의 크기를 지정하거나, 비율로 지정할 수 있습니다. 각 셀에는 하나의 자식 요소만 배치할 수 있습니다.

<Grid> <Grid.ColumnDefinitions> <ColumnDefinition Width="*" /> <ColumnDefinition Width="*" /> <ColumnDefinition Width="*" /> </Grid.ColumnDefinitions> <Grid.RowDefinitions> <RowDefinition Height="Auto" /> <RowDefinition Height="*" /> <RowDefinition Height="Auto" /> </Grid.RowDefinitions> <TextBlock Text="Row 0, Column 0" Grid.Row="0" Grid.Column="0" /> <TextBlock Text="Row 0, Column 1" Grid.Row="0" Grid.Column="1" /> <TextBlock Text="Row 0, Column 2" Grid.Row="0" Grid.Column="2" /> <TextBlock Text="Row 1, Column 0" Grid.Row="1" Grid.Column="0" /> <TextBlock Text="Row 1, Column 1" Grid.Row="1" Grid.Column="1" /> <TextBlock Text="Row 1, Column 2" Grid.Row="1" Grid.Column="2" /> <TextBlock Text="Row 2, Column 0" Grid.Row="2" Grid.Column="0" /> <TextBlock Text="Row 2, Column 1" Grid.Row="2" Grid.Column="1" /> <TextBlock Text="Row 2, Column 2" Grid.Row="2" Grid.Column="2" /> </Grid>

StackPanel

StackPanel은 자식 요소를 순서대로 쌓는 레이아웃 패널입니다. 수직(StackPanel.Orientation="Vertical") 또는 수평(StackPanel.Orientation="Horizontal")으로 쌓을 수 있습니다.

 <StackPanel>
    <TextBlock Text="Item 1" />
    <TextBlock Text="Item 2" />
    <TextBlock Text="Item 3" />
  </StackPanel>

WrapPanel

WrapPanel은 자식 요소를 순서대로 쌓되, 너비가 부족해지면 다음 줄에 자식 요소를 배치하는 레이아웃 패널입니다. 이전에 배운 StackPanel과는 달리, WrapPanel은 너비가 고정되어 있지 않아서, 유동적인 UI 구성이 가능합니다.

WrapPanel 사용하기

WrapPanel을 사용하려면, 다음과 같이 XAML 코드를 작성합니다.

<WrapPanel>
    
</WrapPanel>

WrapPanel은 기본적으로 가로 방향으로 자식 요소들을 쌓습니다. 만약 세로 방향으로 쌓으려면, Orientation 속성을 "Vertical"로 설정해주면 됩니다.

<WrapPanel Orientation="Vertical">
    <TextBlock Text="Item 1" />
    <TextBlock Text="Item 2" />
    <TextBlock Text="Item 3" />
</WrapPanel>

이제 WrapPanel을 사용해보겠습니다. 아래의 예제는 WrapPanel 안에 Button 요소들을 넣은 예제입니다. 버튼들은 순서대로 쌓이다가, 너비가 부족해지면 다음 줄에 배치됩니다.

<WrapPanel>
    <Button Content="Button 1" Margin="5"/>
    <Button Content="Button 2" Margin="5"/>
    <Button Content="Button 3" Margin="5"/>
    <Button Content="Button 4" Margin="5"/>
    <Button Content="Button 5" Margin="5"/>
    <Button Content="Button 6" Margin="5"/>
    <Button Content="Button 7" Margin="5"/>
    <Button Content="Button 8" Margin="5"/>
    <Button Content="Button 9" Margin="5"/>
    <Button Content="Button 10" Margin="5"/>
    <Button Content="Button 11" Margin="5"/>
    <Button Content="Button 12" Margin="5"/>
</WrapPanel>

DockPanel

DockPanel은 자식 요소를 독창적인 방식으로 배치하는 패널입니다. 자식 요소는 상하좌우 중 하나 이상의 방향으로 DockPanel에 붙어 배치됩니다.

다음은 간단한 예제 코드입니다.

<DockPanel>
    <Button DockPanel.Dock="Top" Content="Top" Height="30" Margin="5"/>
    <Button DockPanel.Dock="Bottom" Content="Bottom" Height="30" Margin="5"/>
    <Button DockPanel.Dock="Left" Content="Left" Width="80" Margin="5"/>
    <Button DockPanel.Dock="Right" Content="Right" Width="80" Margin="5"/>
    <Button Content="Center" Margin="5"/>
</DockPanel>

위 코드는 네 개의 버튼을 생성하고, Top, Bottom, Left, Right 방향으로 배치하고 있습니다. 마지막 버튼은 DockPanel 내에서 중앙에 배치됩니다.