Container

WPF는 사용자 인터페이스를 구성할 때 컨테이너^Container 컨트롤을 사용하여 UI 요소를 배치하고 정렬합니다. 컨테이너 컨트롤은 자식 요소들을 포함하고, 배치와 크기 조정 방식을 제어하는 역할을 하며, 레이아웃 시스템의 핵심으로 유연하고 강력한 UI 설계를 가능하게 합니다.

Grid

Grid는 행^row과 열^column 기반의 배치 시스템을 제공합니다. 자식 요소를 특정 셀에 배치하거나 셀을 병합하여 복잡한 레이아웃을 구성할 수 있습니다.

행/열 정의: RowDefinitions와 ColumnDefinitions를 사용하여 행과 열을 정의합니다.
셀 병합: 자식 요소는 Grid.RowSpan과 Grid.ColumnSpan을 사용하여 여러 셀에 걸쳐 배치 가능합니다.
크기 조정: *, Auto, Pixel 단위로 크기를 설정할 수 있습니다.

<Grid>
    <Grid.RowDefinitions>
        <RowDefinition Height="Auto" />
        <RowDefinition Height="*" />
    </Grid.RowDefinitions>
    <Grid.ColumnDefinitions>
        <ColumnDefinition Width="2*" />
        <ColumnDefinition Width="*" />
    </Grid.ColumnDefinitions>
    <Button Grid.Row="0" Grid.Column="0" Content="Button 1" />
    <Button Grid.Row="0" Grid.Column="1" Content="Button 2" />
    <TextBox Grid.Row="1" Grid.ColumnSpan="2" Text="Spans two columns" />
</Grid>

StackPanel

StackPanel은 자식 요소를 한 줄로 나란히 배치합니다. 방향은 수직 또는 수평으로 설정할 수 있습니다.

방향 설정: Orientation 속성으로 Vertical(기본값) 또는 Horizontal 배치를 지정합니다.
간단한 레이아웃에 적합합니다.

<StackPanel Orientation="Vertical">
    <Button Content="Button 1" />
    <Button Content="Button 2" />
    <TextBlock Text="This is a text block" />
</StackPanel>

WrapPanel

WrapPanel은 자식 요소를 한 줄로 나열하며, 공간이 부족하면 다음 줄로 넘어가 배치합니다.

흐름형 레이아웃: 공간 제약에 따라 요소들이 자동으로 줄 바꿈됩니다.
아이템 크기: 자식 요소의 크기는 컨테이너에 맞게 자동 조정되거나, 고정 크기를 설정할 수 있습니다.

<WrapPanel Orientation="Horizontal">
    <Button Content="Button 1" Width="100" Height="50" />
    <Button Content="Button 2" Width="100" Height="50" />
    <Button Content="Button 3" Width="100" Height="50" />
</WrapPanel>

DockPanel

DockPanel은 자식 요소를 상하좌우 또는 가운데에 배치할 수 있습니다. 각 요소의 Dock 속성을 설정하여 배치 방향을 지정합니다.

도킹 시스템: 자식 요소는 기본적으로 가장자리로 “도킹"됩니다.
남은 공간 채우기: LastChildFill 속성을 true로 설정하면 마지막 요소가 남은 공간을 채웁니다.

<DockPanel LastChildFill="True">
    <Button Content="Top" DockPanel.Dock="Top" />
    <Button Content="Left" DockPanel.Dock="Left" />
    <Button Content="Right" DockPanel.Dock="Right" />
    <TextBlock Text="This fills the remaining space" />
</DockPanel>

Canvas

Canvas는 절대 좌표를 사용하여 자식 요소를 배치합니다. 자식 요소는 고정된 위치에 배치되므로 동적인 레이아웃에는 적합하지 않습니다.

절대 위치: 자식 요소의 Canvas.Left, Canvas.Top 속성으로 위치를 지정합니다.
고정된 배치가 필요한 경우 유용합니다.

<Canvas>
    <Button Content="Button 1" Canvas.Left="50" Canvas.Top="20" />
    <Button Content="Button 2" Canvas.Left="150" Canvas.Top="50" />
</Canvas>

UniformGrid

UniformGrid는 모든 자식 요소를 동일한 크기로 배치합니다. 자식 요소가 균일하게 정렬된 레이아웃을 만들 때 유용합니다.

균일 크기: 모든 셀의 크기가 동일합니다.
행과 열 설정: Rows와 Columns 속성으로 행과 열의 수를 정의합니다.

<UniformGrid Rows="2" Columns="3">
    <Button Content="1" />
    <Button Content="2" />
    <Button Content="3" />
    <Button Content="4" />
    <Button Content="5" />
    <Button Content="6" />
</UniformGrid>

컨테이너 선택 가이드

컨테이너	사용 시기
Grid	복잡한 행/열 기반 레이아웃이 필요한 경우.
StackPanel	단순한 수직/수평 정렬이 필요한 경우.
WrapPanel	화면 크기에 따라 줄 바꿈이 필요한 동적 레이아웃이 필요한 경우.
DockPanel	요소를 상하좌우로 배치하고 중앙 공간을 활용해야 하는 경우.
Canvas	절대 위치가 필요한 고정된 레이아웃(드로잉 또는 게임 UI)인 경우.
UniformGrid	동일한 크기의 요소를 정렬해야 하는 경우(그리드 기반 UI).

Buy me a coffee

Grid