[WPF] 5. 레이아웃과 Panel - 5.1 Grid, 5.1.1 xaml 태그를 이용하여 배치

5. 레이아웃과 Panel - 5.1 Grid, 5.1.1 xaml 태그를 이용하여 배치

---

5.1 Grid

 

 Grid는 행과 열을 정의할 수 있으며 자식 UI들을 원하는 행과 열에 배치를 할 수 있으며 필요에 의해 하나의 자식 UI를 여러 행과 여러 열을 채울 수도 있게 해 줍니다. Grid에서는 행과 열이 차지하는 영역을 고정적인 픽셀 뿐만 아니라 비율에 따라 배분할 수도 있습니다.

 

 5.1.1 xaml에서 태그를 이용하여 배치하기

 [그림 5.1]과 같은 형태로 배치하는 것을 예를 들면서 설명을 할게요.

 

 

[그림 5.1] Grid 사용 예제 실행 화면

 

 먼저 WPF 응용 프로그램 프로젝트를 생성하세요.

[그림 5.2] WPF 응용 프로그램 프로젝트 생성

 

 먼저, 행과 열을 정의를 해 봅시다. Grid에는 하나의 행 정의 컬렉션과 열 정의 컬렉션을 가질 수 있습니다. 그리고, 각 컬렉션에 행과 열 정의를 포함시킬 수 있어요.

 

<Grid>

    <Grid.RowDefinitions>

        <RowDefinition Height="40"/>

        <RowDefinition Height="40"/>

        <RowDefinition Height="2*"/>

        <RowDefinition Height="*"/>

    </Grid.RowDefinitions>

    <Grid.ColumnDefinitions>

        <ColumnDefinition Width="60"/>

        <ColumnDefinition Width="*"/>

        <ColumnDefinition Width="80"/>

    </Grid.ColumnDefinitions>

</Grid>

 

 열 정의에서는 높이를 지정할 수 있고 행 정의에서는 너비를 지정할 수 있습니다. 40과 같은 수를 지정을 하면 Grid의 크기가 변경되어도 해당 행과 열의 크기는 변하지 않습니다. *를 사용하는 것은 남은 영역에서 차지할 비율을 지정하는 것입니다. 예제에 두 개의 열 정의의 높이는 2*과 *로 되어 있습니다. 이와 같이 지정하면 남은 영역의 2/3와 1/3로 높이가 지정이 되며 Grid의 크기가 변하면 변한 Grid에서 다시 남은 영역을 지정한 비율에 맞게 크기를 조절합니다.

 

 이제 Grid 내부에 자식 UI를 배치해 보기로 합시다.

 

 Grid 내에 UI 요소를 선언하고 Grid.Row와 Grid.Column을 지정하지 않으면 기본적으로 0,0 에 배치합니다.

 

<TextBlock Name="tb_name" Text="이름:" VerticalAlignment="Center"/>

 

 

 Grid 내에 UI 요소를 선언하고 Grid.Row와 Grid.Column을 하나만 지정할 수도 있으며 여백을 지정할 때에는 Margin 속성을 지정하면 됩니다. 네 개의 수를 지정할 수 있는데 Left, Top, Right, Bottom에서의 여백입니다. 그리고, 여러 개의 열이나 행을 차지하고자 한다면 Grid.RowSpan과 Grid.ColumnSpan을 이용하면 됩니다.

 

<TextBox Name="tbox_name" Grid.Column="1" Grid.ColumnSpan="2"

     Margin="2,2,2,2" Background="Cyan"/>

  

 나머지 자식 요소들도 배치해 보세요. 이번 실습은 배치만 할 뿐 기능 구현은 없어요.

MainWindow.xaml

<Window x:Class="Grid_실습___xaml_태그로_배치.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:Grid_실습___xaml_태그로_배치"         mc:Ignorable="d"         Title="MainWindow" Height="350" Width="525">     <Grid>         <Grid.RowDefinitions>             <RowDefinition Height="40"/>             <RowDefinition Height="40"/>             <RowDefinition Height="2*"/>             <RowDefinition Height="*"/>         </Grid.RowDefinitions>         <Grid.ColumnDefinitions>             <ColumnDefinition Width="60"/>             <ColumnDefinition Width="*"/>             <ColumnDefinition Width="80"/>         </Grid.ColumnDefinitions>         <TextBlock Name="tb_name" Text="이름:" VerticalAlignment="Center"/>         <TextBox Name="tbox_name" Grid.Column="1" Grid.ColumnSpan="2"             Margin="2,2,2,2" Background="Cyan"/>         <TextBlock Name="tb_age" Text="나이:" Grid.Row="1" VerticalAlignment="Center"/>         <TextBox Name="tbox_age" Grid.Row="1" Grid.Column="1"             Grid.ColumnSpan="2" Margin="2,2,2,2" Background="Cyan"/>         <TextBlock Name="tb_intro" Text="소개:" Grid.Row="2" VerticalAlignment="Top"/>         <TextBox Name="tbox_intro" Grid.Row="2" Grid.Column="1" Margin="2"             AcceptsReturn="True" Background="Cyan" />         <Button Name="btn_ok" Grid.Row="2" Grid.Column="2" Content="등록" />         <TextBlock Name="tb_about" Text="Grid를 이용하여 배치하기"             Grid.Row="3" Grid.ColumnSpan="3" HorizontalAlignment="Center"/>     </Grid> </Window>

  

---

실습 파일

Grid 실습 - xaml 태그로 배치.zip

관련 게시글

[WPF] 5. 레이아웃과 Panel

[WPF] 5. 레이아웃과 Panel - 5.1 Grid, 5.1.2 cs 소스에서 코드로 배치하기

[WPF] 5. 레이아웃과 Panel - 5.2 Canvas, 5.2.1 xaml 태그를 이용하여 배치

[WPF] 5. 레이아웃과 Panel - 5.2 Canvas, 5.2.2 cs 소스에서 코드로 배치하기

[WPF] 5. 레이아웃과 Panel - 5.3 StackPanel, 5.3.1 xaml 태그를 이용하여 배치

[WPF] 5. 레이아웃과 Panel - 5.3 StackPanel, 5.3.2 cs 소스에서 코드로 배치하기

[WPF] 5. 레이아웃과 Panel - 5.4 WrapPanel

[WPF] 5. 레이아웃과 Panel - 5.5 DockPanel