行と列の定義

行と列の基本定義例を以下に示します。

<Grid Padding="10, 30, 10, 30">
  <!-- 行の定義 -->
  <Grid.RowDefinitions>
    <RowDefinition Height="Auto"/>
  </Grid.RowDefinitions>

  <!-- 列の定義 -->
  <Grid.ColumnDefinitions>
    <ColumnDefinition Width="Auto"/>
  </Grid.ColumnDefinitions>
</Grid>

行は<Grid.RowDefinitions>を使用して定義します。このタグの中には、必要な行の数だけ<RowDefinitions>を記述します。HeightにはAuto, *, 数値の3種類の値を設定することができます。

Autoはコントロールの幅や高さに合わせて行の幅や列の幅を決定します。

*は、他の行や列の残りを割り当てます。

数値は、幅や高さを記述した値で設定します。

続いて列ですが、こちらは<Grid.ColumnDefinitions>を使用して定義します。このタグの中には必要な列の数だけ<ColumnDefinition>を記述します。Widthプロパティには、行のHeightプロパティと同様にAuto, * , 数値を指定することができます。

行や列へのコントロールの配置

Grid内に配置するコントロールはGrid.Row、Grid.Columnという添付プロパティを持つようになります。

Grid.Rowはコントロールを何行目に配置するかを表し、Grid.Columnは何列目に配置するのかを表します。

行や列の連結

作成した行や列は連結することが可能です。

連結する際は添付プロパティのGrid.RowSpanやGrid.ColumnSpanを使用します。

これらの値には連結する数を設定します。

例えば、2行を連結する場合はGrid.RowSpan=”2″のようにします。

以上を踏まえたサンプルコードを以下に示します。

<?xml version="1.0" encoding="utf-8" ?>
<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             xmlns:local="clr-namespace:GridSample"
             x:Class="GridSample.MainPage">

  <Grid Padding="10, 30, 10, 30">
    <!-- 行の定義 -->
    <Grid.RowDefinitions>
      <RowDefinition Height="Auto"/>
      <RowDefinition Height="50"/>
      <RowDefinition Height="60"/>
      <RowDefinition Height="*" />
    </Grid.RowDefinitions>

    <!-- 列の定義 -->
    <Grid.ColumnDefinitions>
      <ColumnDefinition Width="Auto"/>
      <ColumnDefinition Width="*"/>
    </Grid.ColumnDefinitions>

    <!-- 1行目 -->
    <Label Text="Row=0, Column=0, ColumnSpan=2"
      BackgroundColor="Aqua"
      Grid.Row="0" Grid.Column="0"  Grid.ColumnSpan="2" />
    
    <!-- 2行目 -->
    <Label Text="Row=1, Column=0"
      BackgroundColor="Aqua"
      Grid.Row="1" Grid.Column="0" />
    <Label Text="Row=1, Column=1"
      BackgroundColor="Lime"
      Grid.Row="1" Grid.Column="1" />

    <!-- 3行目 -->
    <Label Text="Row=2, Column=0, RowSpan=2"
      BackgroundColor="Aqua"
      Grid.Row="2" Grid.Column="0" Grid.RowSpan="2"/>
    <Label Text="Row=2, Column=1"
        BackgroundColor="Lime"
      Grid.Row="2" Grid.Column="1" />

    <!-- 4行目 -->
    <Label Text="Row=3, Column=1"
      BackgroundColor="Lime"
      Grid.Row="3" Grid.Column="1" />
  </Grid>

</ContentPage>

実行例は以下の通りです。