Grid와 StackPanel.. 그리고 ScrollViewer

 

WPF를 사용하면 전체적인 틀을 잡기 위해 제일 많이 쓰는 태그가 Grid, StackPanel 아닐까요..?

CSS로 따지면 Container.. div.. 같은 느낌..

 

평소 느낌으로,, 아아,, Grid겠지,, 아아,, StackPanel일거야,,하며 사용하고는 했는데, 이번에 ScrollViewer를 사용하면서깨달은 점을 기록할 예정입니다.

 

각각의 특징을 간단히 정리해보고, 특징에 따른 주의사항에 대해 간단히 정리해봅니다!

 

1. Grid

* 행(Row)과 열(Column)로 UI를 구성(Table과 유사)

* RowDefinition과 ColumnDefinition을 활용하여 정확한 크기 조정 가능

* Grid.RowSpan, Grid.ColumnSpan을 사용해 특정 요소를 여러 행 또는 열에 걸쳐 배치 가능

* 정렬이 필요한 UI

<Grid>
    <Grid.RowDefinitions>
        <RowDefinition Height="Auto"/>
        <RowDefinition Height="*"/>
    </Grid.RowDefinitions>

    <TextBlock Grid.Row="0" Text="Title" FontSize="20"/>
</Grid>

 

 

2. StackPanel

* 수직 또는 수평으로 자식 요소들을 한 줄로 배치(Flex와 유사)

* 내부 요소의 크기를 모두 합산하여 자신의 크기를 결정

* 레이아웃이 단순해서 버튼 목록, 메뉴 등 간단한 UI에 적합

<StackPanel Orientation="Vertical">
    <Button Content="Button 1"/>
    <Button Content="Button 2"/>
    <Button Content="Button 3"/>
</StackPanel>

 

 

💡3. StackPanel이 Grid보다 사용하기 좋은 경우

No.	상황	이유
1	단순한 리스트형 UI	한 방향으로 요소를 추가하는 UI에서 Grid보다 더 간결하고 코드가 짧음
2	자식 요소 개수가 동적으로 변할 때	내부 요소가 많아져도 자동으로 크기를 조정하므로 레이아웃 관리가 쉬움
3	자동 크기 확장이 필요한 경우	요소 개수에 따라 부드럽게 늘어나야 하는 레이아웃에 적합

 

 

🚨 4. StackPanel 사용 시, 유의 사항

StackPanel은 자식 요소들의 크기를 모두 합쳐서 자신의 크기를 결정하는 방식이므로,  StackPanel 내부에 ScrollViewer가 있을 경우 자식의 전체 크기를 그대로 반영하려하기 때문에, 스크롤 기능을 무시하게 됨

→ ScrollViewer 기능이 필요할 경우, StackPanel이 아닌 Grid를 사용해야 함

 

 

 

📑

참고 자료

Chat GPT