DotNet
WPF
컨트롤과 사용자 정의 UI
Grid

Grid

Grid는 WPF에서 가장 많이 사용되는 레이아웃 컨트롤 중 하나로, 행Row과 열Column을 기반으로 UI 요소를 배치할 수 있게 해줍니다. WPF에서 복잡한 UI를 구성할 때 유용하며, 특히 다양한 화면 크기와 해상도에 적응할 수 있는 유연한 레이아웃을 만드는 데 도움이 됩니다.

Grid의 기본 구조와 속성

행과 열

  • Grid는 행Row과 열Column을 정의하고, 그에 따라 자식 요소들을 배치합니다.
  • Grid.RowDefinitions와 Grid.ColumnDefinitions 요소를 사용하여 행과 열의 구조를 설정할 수 있습니다.
  • 각 행과 열의 크기는 픽셀, 비율(*), 자동 크기Auto로 지정할 수 있습니다.
<Grid>
   <Grid.RowDefinitions>
	   <RowDefinition Height="Auto"/> <!-- 콘텐츠에 맞춤 -->
	   <RowDefinition Height="*"/>    <!-- 남은 공간을 비율로 할당 -->
	   <RowDefinition Height="100"/>  <!-- 고정 크기 (100px) -->
   </Grid.RowDefinitions>
   <Grid.ColumnDefinitions>
	   <ColumnDefinition Width="*"/>
	   <ColumnDefinition Width="2*"/> <!-- 2배의 비율로 할당 -->
   </Grid.ColumnDefinitions>
</Grid>

Grid.Row 및 Grid.Column 속성

  • 각 자식 요소에 Grid.Row와 Grid.Column 속성을 사용하여 어느 행과 열에 위치할지 지정할 수 있습니다.
  • 예를 들어, Grid.Row="1" Grid.Column="0"으로 설정하면 첫 번째 열, 두 번째 행에 위치하게 됩니다.
  • 기본적으로 Grid.Row와 Grid.Column 속성을 지정하지 않으면 첫 번째 행과 열(0, 0)에 배치됩니다.

Grid.RowSpan 및 Grid.ColumnSpan

  • RowSpan과 ColumnSpan을 사용하여 하나의 컨트롤이 여러 행이나 열에 걸쳐 배치되도록 할 수 있습니다.
  • 이 기능은 버튼이나 이미지 등이 여러 셀에 걸쳐 나타나야 할 때 유용하게 사용됩니다.
<Button Content="Span Button" Grid.Row="0" Grid.Column="0" Grid.RowSpan="2" Grid.ColumnSpan="2"/>

셀의 크기 조정

  • 픽셀 크기: 고정된 크기를 지정하여 셀 크기를 픽셀 단위로 설정합니다.
  • 비율 크기(*): 가변적인 비율을 설정할 때 사용하며, 화면 크기에 따라 자동 조정됩니다.
  • 자동 크기(Auto): 콘텐츠의 크기에 맞게 자동으로 조정됩니다.

Grid의 레이아웃 특성

유연성

  • Grid의 비율 크기와 자동 크기 기능을 통해 다양한 화면 크기와 해상도에서 UI를 적응형으로 구현할 수 있습니다.
  • 특히 비율 크기(*)는 남은 공간을 비율에 따라 자동으로 조정해 주기 때문에, 반응형 레이아웃을 만들 때 유용합니다.

정렬 및 배치

  • 각 자식 요소는 HorizontalAlignment와 VerticalAlignment 속성을 통해 가로 및 세로 정렬을 설정할 수 있습니다.
  • Margin 속성을 통해 셀 내에서 여백을 줄 수 있으며, 이를 통해 요소를 미세 조정할 수 있습니다.

자식 요소의 배치

  • Grid는 특정 셀을 지정할 수 있기 때문에 StackPanel이나 WrapPanel과 비교하여 정밀한 배치가 가능합니다.
  • 이러한 특성은 복잡한 레이아웃을 구현할 때 매우 유용하며, 페이지나 대화 상자와 같은 정형화된 레이아웃에 많이 사용됩니다.

Grid 사용 예제 

<Grid>
    <!-- 행 정의 -->
    <Grid.RowDefinitions>
        <RowDefinition Height="Auto"/> <!-- 상단 텍스트박스에 맞춰 자동 크기 -->
        <RowDefinition Height="*"/>    <!-- 주 콘텐츠 영역, 남은 공간 모두 할당 -->
        <RowDefinition Height="50"/>   <!-- 하단 고정 크기 버튼 영역 -->
    </Grid.RowDefinitions>
    
    <!-- 열 정의 -->
    <Grid.ColumnDefinitions>
        <ColumnDefinition Width="*"/>  <!-- 비율 크기 -->
        <ColumnDefinition Width="3*"/> <!-- 오른쪽 3배 크기 비율 할당 -->
    </Grid.ColumnDefinitions>
    <!-- 요소 배치 -->
    <TextBox Grid.Row="0" Grid.ColumnSpan="2" Text="Search..." Margin="5"/> <!-- 상단 검색창 -->
    <ListView Grid.Row="1" Grid.Column="0" Margin="5"/>                     <!-- 왼쪽 목록 -->
    <StackPanel Grid.Row="1" Grid.Column="1" Margin="5">                    <!-- 오른쪽 정보 영역 -->
        <TextBlock Text="Details:" FontWeight="Bold" Margin="0,0,0,5"/>
        <TextBlock Text="Additional information goes here."/>
    </StackPanel>
    <Button Grid.Row="2" Grid.Column="0" Content="Cancel" Margin="5"/>
    <Button Grid.Row="2" Grid.Column="1" Content="Submit" Margin="5"/>
</Grid>

이 예제에서는 Grid를 사용하여 검색창, 목록, 상세 정보 영역, 버튼을 적절히 배치하였습니다. 각 행과 열은 픽셀 고정 크기, 비율 크기(*), 자동 크기(Auto)를 적절히 활용하여 유연하게 구성되었습니다.

GridSplitter

Grid에서 화면을 두 영역으로 나누고 각 영역의 크기를 사용자가 직접 조절할 수 있도록 하려면 GridSplitter를 사용해야 합니다. GridSplitter는 사용자가 Grid의 행 또는 열 크기를 동적으로 변경할 수 있게 해주는 WPF 컨트롤입니다.

구현 방법

Grid 구조

아래는 두 개의 행Row을 나누고, 각 행의 높이를 사용자가 조절할 수 있도록 GridSplitter를 추가한 예제입니다.

<Grid>
    <!-- Row 정의 -->
    <Grid.RowDefinitions>
        <RowDefinition Height="*" /> <!-- 첫 번째 영역 -->
        <RowDefinition Height="Auto" /> <!-- GridSplitter -->
        <RowDefinition Height="*" /> <!-- 두 번째 영역 -->
    </Grid.RowDefinitions>
    <!-- 첫 번째 영역 -->
    <Border Grid.Row="0" Background="LightBlue">
        <TextBlock Text="Upper Content" HorizontalAlignment="Center" VerticalAlignment="Center" />
    </Border>
    <!-- GridSplitter -->
    <GridSplitter Grid.Row="1" Height="5" Background="Gray" HorizontalAlignment="Stretch" VerticalAlignment="Center" />
    <!-- 두 번째 영역 -->
    <Border Grid.Row="2" Background="LightCoral">
        <TextBlock Text="Lower Content" HorizontalAlignment="Center" VerticalAlignment="Center" />
    </Border>
</Grid>
  • 첫 번째와 세 번째 행의 높이는 Height="*"로 설정되어 화면 크기에 비례하도록 합니다.
  • 두 번째 행은 Height="Auto"로 설정되어 GridSplitter가 적절한 높이를 차지하도록 합니다.
  • GridSplitter를 두 행 사이에 배치하여 사용자가 두 영역의 크기를 조절할 수 있게 합니다.
  • Height="5"는 GridSplitter의 두께를 지정하며, Background="Gray"는 분할선을 시각적으로 표시합니다.

조정 가능한 영역의 스타일링

GridSplitter 두께 변경

GridSplitter의 두께를 조절하려면 Height 또는 Width 속성을 수정합니다

<GridSplitter Grid.Row="1" Height="10" Background="DarkGray" />

GridSplitter 모양 커스터마이징

GridSplitter의 스타일을 UI에 맞게 커스터마이징 할 수 있습니다.

<GridSplitter Grid.Row="1" Height="5">
    <GridSplitter.Background>
        <LinearGradientBrush StartPoint="0,0" EndPoint="1,0">
            <GradientStop Color="Gray" Offset="0" />
            <GradientStop Color="DarkGray" Offset="1" />
        </LinearGradientBrush>
    </GridSplitter.Background>
</GridSplitter>

세로 분할

위 방식은 행Row을 조절하기 위한 것이지만, 세로 방향으로 나누고 싶다면 열Column을 조절하도록 설정할 수도 있습니다.

세로 분할 예제: 

<Grid>
    <!-- Column 정의 -->
    <Grid.ColumnDefinitions>
        <ColumnDefinition Width="*" /> <!-- 첫 번째 영역 -->
        <ColumnDefinition Width="Auto" /> <!-- GridSplitter -->
        <ColumnDefinition Width="*" /> <!-- 두 번째 영역 -->
    </Grid.ColumnDefinitions>
    <!-- 첫 번째 영역 -->
    <Border Grid.Column="0" Background="LightGreen">
        <TextBlock Text="Left Content" HorizontalAlignment="Center" VerticalAlignment="Center" />
    </Border>
    <!-- GridSplitter -->
    <GridSplitter Grid.Column="1" Width="5" Background="Gray" VerticalAlignment="Stretch" HorizontalAlignment="Center" />
    <!-- 두 번째 영역 -->
    <Border Grid.Column="2" Background="LightYellow">
        <TextBlock Text="Right Content" HorizontalAlignment="Center" VerticalAlignment="Center" />
    </Border>
</Grid>

Grid 사용 시 주의할 점

복잡한 레이아웃의 성능

  • Grid에 너무 많은 행과 열을 정의하거나 복잡한 레이아웃을 구성하면 성능에 영향을 줄 수 있습니다. 필요할 때만 행과 열을 추가하고, 복잡한 레이아웃이 필요하면 여러 Grid를 중첩해서 사용하는 것이 좋습니다.

정확한 배치

  • Grid.Row와 Grid.Column 값을 지정하지 않으면 기본값으로 (0, 0)에 배치됩니다. 이로 인해 배치가 꼬일 수 있으므로, 꼭 명시적으로 지정하는 습관을 가지면 좋습니다.

UI 유지보수

  • Grid 레이아웃을 사용할 때는 화면 구성을 계획적으로 설계하는 것이 좋습니다. 그렇지 않으면 향후 수정 및 유지보수가 어려울 수 있습니다.
Buy me a coffee Buy me a coffee
ContainerListView