[UWPアプリ][Grid] 行と列を作成する

2016.02.26

今回はGridコントロールに行と列を作成する方法について見ていきます。

UWPアプリのプロジェクトを作成すると、MainPage.xamlには以下のようにGridが1つ配置されています。

<Page
    x:Class="App1.MainPage"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:local="using:App1"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    mc:Ignorable="d">

    <Grid Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">

    </Grid>

</Page>

行を定義する

Gridに行を作成するには<Grid.RowDefinitions>要素を作成します。これは「行の定義」を表します。あとはこの要素の中に必用な行数分、<RowDefinition />を記述します。

3行にしたい場合は、以下のようにします。

<Grid Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">
    <Grid.RowDefinitions>
        <RowDefinition />
        <RowDefinition />
        <RowDefinition />
    </Grid.RowDefinitions>
</Grid>

上記を入力すると、デザイナ上の画面には3つの行が作成されます。

実行時には見えない線なので注意してください。

続いて列を作成してみましょう。

列は<Grid.ColumnDefinitions>要素を作成します。これは「行の定義」を表します。あとはこの要素の中に必用な行数分、<ColumnDefinition />を記述します。

<Grid Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">
	<Grid.ColumnDefinitions>
	    <ColumnDefinition />
	    <ColumnDefinition />
	</Grid.ColumnDefinitions>
</Grid>

上記を入力すると、画面には2つの列が作成されます。

行と列の定義は同時に使用することができます。

3行2列を作成する場合は、上記コードを一緒に記述するだけです。

<Grid Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">
   <Grid.RowDefinitions>
        <RowDefinition />
        <RowDefinition />
        <RowDefinition />
    </Grid.RowDefinitions>

    <Grid.ColumnDefinitions>
        <ColumnDefinition />
        <ColumnDefinition />
    </Grid.ColumnDefinitions>
</Grid>

上記のコード入力後のデザイナは以下のようになります。