[C# WPF] WPF Layout(레이아웃) – Grid Panel 사용법

안녕하세요.

 

오늘은 지난번 포스팅에 이어서 WPF Layout 두 번째 시간으로써, Grid Panel에 대해서 알아 보려고 합니다.

 

Grid Panel 이란?

-     Grid Panel은 열과 행으로 테이블 형태의 Layout을 제공해주는 Panel입니다. 그리고 WPF UI 구성을 할 때 가장 기초적이면서도 가장 많이 사용하는 Panel 이기 때문에 한번 사용법을 익혀 두시면 유용하게 쓰임이 많은 Panel 입니다.

 

그럼 실제로 이제 WPF 에서 Grid Panel 을 사용해 보도록 하겠습니다.

 

앞서, Grid Panel은 열과 행을 제공한다고 했는데요. Grid.RowDefinitions, Grid.ColumnDefinitions 를 통해 열과 행을 생성하고 그 안에 여러 컨트롤들을 추가할 수 있습니다.

 

그럼 이제 예제를 통해서 보여드리도록 하겠습니다.

 

Grid Panel 예제

Xaml.cs

<Window x:Class="GridPanelTest.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:GridPanelTest"
        mc:Ignorable="d"
        Title="MainWindow" Height="450" Width="800">
    <Grid ShowGridLines="True" Margin="10">
        <!--3개 Row-->
        <Grid.RowDefinitions>
            <RowDefinition/>
            <RowDefinition/>
            <RowDefinition/>
        </Grid.RowDefinitions>
        
        <!--3ro Column-->
        <Grid.ColumnDefinitions>
            <ColumnDefinition/>
            <ColumnDefinition/>
            <ColumnDefinition/>
        </Grid.ColumnDefinitions>
 
        <TextBlock Text="Row : 0 Column : 0" FontSize="20" Grid.Row="0" Grid.Column="0"/>
        <TextBlock Text="Row : 0 Column : 1" FontSize="20" Grid.Row="0" Grid.Column="1"/>
        <TextBlock Text="Row : 0 Column : 2" FontSize="20" Grid.Row="0" Grid.Column="2"/>
        <TextBlock Text="Row : 1 Column : 0" FontSize="20" Grid.Row="1" Grid.Column="0"/>
        <TextBlock Text="Row : 1 Column : 1" FontSize="20" Grid.Row="1" Grid.Column="1"/>
        <TextBlock Text="Row : 1 Column : 2" FontSize="20" Grid.Row="1" Grid.Column="2"/>
        <TextBlock Text="Row : 2 Column : 0" FontSize="20" Grid.Row="2" Grid.Column="0"/>
        <TextBlock Text="Row : 2 Column : 1" FontSize="20" Grid.Row="2" Grid.Column="1"/>
        <TextBlock Text="Row : 2 Column : 2" FontSize="20" Grid.Row="2" Grid.Column="2"/>
    </Grid>
</Window>
 

 

위와 같이 Xaml 코드를 보시게 되면 Row, Column을 정의하여 각 행과 열에 맞게 Textblock 컨트롤을 배치한 것을 확인하실 수 있습니다.

 

추가적으로 Grid Panel은 Row과 Column을 각각 Height와 Width을 사용자가 직접 조정할 수도 있는데요.

 

Fixed : 논리 단위의 고정 크기( 1 인치 = 96 픽셀)

Auto : 자동으로 Cell에 포함된 컨트롤 사이즈 조정

Star(*) : “1*”, “2*” 등의 상대 비율로 입력

 

그럼 위의 속성들을 이용하여 다시 Grid Panel 예제 코드를 작성해 보도록 하겠습니다.

 

Grid Panel 사이즈 조정

Xaml.cs

<Window x:Class="GridPanelTest.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:GridPanelTest"
        mc:Ignorable="d"
        Title="MainWindow" Height="450" Width="800">
    <Grid ShowGridLines="True" Margin="10">
        <!--3개 Row-->
        <Grid.RowDefinitions>
            <RowDefinition Height="4*"/>
            <RowDefinition Height="Auto"/>
            <RowDefinition Height="2*"/>
        </Grid.RowDefinitions>
        
        <!--3ro Column-->
        <Grid.ColumnDefinitions>
            <ColumnDefinition Width="Auto"/>
            <ColumnDefinition Width="2*"/>
            <ColumnDefinition Width="200"/>
        </Grid.ColumnDefinitions>
 
        <TextBlock Text="Row : 0 Column : 0" FontSize="20" Grid.Row="0" Grid.Column="0"/>
        <TextBlock Text="Row : 0 Column : 1" FontSize="20" Grid.Row="0" Grid.Column="1"/>
        <TextBlock Text="Row : 0 Column : 2" FontSize="20" Grid.Row="0" Grid.Column="2"/>
        <TextBlock Text="Row : 1 Column : 0" FontSize="20" Grid.Row="1" Grid.Column="0"/>
        <TextBlock Text="Row : 1 Column : 1" FontSize="20" Grid.Row="1" Grid.Column="1"/>
        <TextBlock Text="Row : 1 Column : 2" FontSize="20" Grid.Row="1" Grid.Column="2"/>
        <TextBlock Text="Row : 2 Column : 0" FontSize="20" Grid.Row="2" Grid.Column="0"/>
        <TextBlock Text="Row : 2 Column : 1" FontSize="20" Grid.Row="2" Grid.Column="1"/>
        <TextBlock Text="Row : 2 Column : 2" FontSize="20" Grid.Row="2" Grid.Column="2"/>
    </Grid>
</Window>
 

 

위와 같이 Height, Width의 속성을 통해서 각각 행과 열의 사이즈를 사용자가 원하는 대로 조정 가능한 것을 확인하실 수 있습니다.

 

참고 사이트

WPF Layout (Panels)

감사합니다.^^