UWP XAML <Grid/> 행과 열을 가진 레이아웃 패널

UWP 로 화면의 레이아웃을 구성하는 방법 중 Grid xaml 마크업을 사용할 수 있다. Grid 레이아웃은 행과 열을 이용하여 화면에 필요한 컨트롤들을 배치할 수 있다. 행과 열을 정의할 떄는 <Grid.RowDefinitions> 과 <Grid.ColumnDefinitions> 을 사용하고 행과 열을 추가할 때는 <RowDefinition/> 과 <ColumnDefinition/> 을 사용한다. 그리고 추가한 컨트롤을 Grid 레이아웃에 배치하기 위해 Grid.Row 와 Grid.Column 을 사용하여 행과 열의 위치를 지정한다.

UWP XAML <Grid/>
행과 열을 가진 레이아웃 패널

프로그래밍을 하면 고민되는 부분이 레이아웃이다. 레이아웃은 화면을 구성한 모양새를 의미하는데 편하게 화면디자인 정도로 볼 수 있다. 엄밀히 화면디자인하고는 거리가 좀 있다.

UWP 의 Grid xaml 은 행과 열을 가진 화면의 레이아웃을 구성한다.
이것은 html 의 table 태그와 비슷하고 CSS3 의 Grid 와 비슷한 형태를 가진다.

Grid xaml 은 그리드 레이아웃이라 하기도 하는데 행과 열을 필요한 만큼 추가하고 Button 이나 TextBlock 과 같은 것들을 추가하면 된다.

사용 방법

UWP 의 Grid 레이아웃은 행과 열을 이용하여 화면을 디자인하고 다른 컨트롤을 배치할 수 있다. 정확히 말하면 엑셀과 같은 격자형태의 모양을 이용하여 다른 컨트롤들을 배치하는 것이다.

Grid 레이아웃에 행과 열이 필요하다면 각각 행을 정의하는 <Grid.RowDefinitions> 과 열을 정의하는 <Grid.RowDefinitions>을 추가한다. 그리고 행을 추가할 때는 <RowDefinition/> 을 추가하고 열을 추가할 때는 <ColumnDefinition/> 을 추가한다.

아래는 Grid 레이아웃을 3 X 3 형태로 구성한 것을 보여준다.

레이아웃을 구성했다면 컨트롤을 추가하면서 배치하고 Grid.Row 에는 행위치를 Grid.Column 에는 열위치를 부여한다.

행과 열은 0부터 시작한다.

<!-- Grid 레이아웃 -->
<Grid>

	<!-- 열 정의와 추가 -->
	<Grid.ColumnDefinitions>
		<ColumnDefinition/>
		<ColumnDefinition/>
		<ColumnDefinition/>
	</Grid.ColumnDefinitions>
	
	<!-- 행 정의와 추가 -->
	<Grid.RowDefinitions>
		<RowDefinition/>
		<RowDefinition/>
		<RowDefinition/>
	</Grid.RowDefinitions>
    
	<!-- 컨트롤 배치 -->
	<xaml_컨트롤 Grid.Row="행위치" Grid.Column="열위치">
	
</Grid>

전체 코드

위의 사용법을 이용하여 UWP xaml Grid 레이아웃을 구성하고 컨트롤을 배치해 보도록 한다.

위와 같이 Grid 레이아웃을 3 X 3 형태로 열 3개, 행 3개로 구성한다.

각각의 위치에는 TextBlock 를 배치하고 행과 열 위치를 표시한다.

<Page
    x:Class="UWPAppTutorials.Ctl_GridPage"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:local="using:UWPAppTutorials"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    mc:Ignorable="d"
    Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">

    <Grid x:Name="GridSample">

        <Grid.ColumnDefinitions>
            <ColumnDefinition/>
            <ColumnDefinition/>
            <ColumnDefinition/>
        </Grid.ColumnDefinitions>
        <Grid.RowDefinitions>
            <RowDefinition/>
            <RowDefinition/>
            <RowDefinition/>
        </Grid.RowDefinitions>

        <TextBlock Grid.Row="0" Grid.Column="0"
                   Text="0,0" FontSize="36"
                   VerticalAlignment="Center" HorizontalAlignment="Center"/>
        <TextBlock Grid.Row="0" Grid.Column="1"
                   Text="0,1"  FontSize="36"
                   VerticalAlignment="Center" HorizontalAlignment="Center"/>
        <TextBlock Grid.Row="0" Grid.Column="2"
                   Text="0,2"  FontSize="36"
                   VerticalAlignment="Center" HorizontalAlignment="Center"/>
        
        
        <TextBlock Grid.Row="1" Grid.Column="0"
                   Text="1,0" FontSize="36"
                   VerticalAlignment="Center" HorizontalAlignment="Center"/>
        <TextBlock Grid.Row="1" Grid.Column="1"
                   Text="1,1"  FontSize="36"
                   VerticalAlignment="Center" HorizontalAlignment="Center"/>
        <TextBlock Grid.Row="1" Grid.Column="2"
                   Text="1,2"  FontSize="36"
                   VerticalAlignment="Center" HorizontalAlignment="Center"/>
        
        <TextBlock Grid.Row="2" Grid.Column="0"
                   Text="2,0" FontSize="36"
                   VerticalAlignment="Center" HorizontalAlignment="Center"/>
        <TextBlock Grid.Row="2" Grid.Column="1"
                   Text="2,1"  FontSize="36"
                   VerticalAlignment="Center" HorizontalAlignment="Center"/>
        <TextBlock Grid.Row="2" Grid.Column="2"
                   Text="2,2"  FontSize="36"
                   VerticalAlignment="Center" HorizontalAlignment="Center"/>
        
    </Grid>
    
</Page>

코드를 보면 복잡하지만 별 것 없다.

Grid 레이아웃 내부에는 TextBlock 이 9개 있다. 열을 정의하는 <Grid.ColumnDefinitions> 과 행을 정의하는 <Grid.RowDefinitions> 이 있다. 그리고, 3 X 3 을 구성하기 위해 <ColumnDefinition/> 과 <RowDefinition/> 이 각각 3개씩 존재한다.

그리고 TextBlock xmal 마크업을 살펴보면 각각 Grid.Row 와 Grid.Column 이 존재한다. Grid.Row 와 Grid.Column 은 각각 행위치와 열위치를 지정하여 TextBlock 이 Grid 이 어떤 위치에 배치될지를 지정한다.

아래는 결과화면이다.