Xamarin.Forms Grid を使ってみる

本格的にXamarin使って色々作ってみようと思ったので、簡単なところから少しずつ記事をあげてこうと思います。

まずはGridレイアウトから。

UWPのXAMLとほぼ同じ仕様っぽいのであまり説明はいらないかもしれません。

<Grid>
    <Grid.ColumnDefinitions>
        <ColumnDefinition Width="*" />
        <ColumnDefinition Width="*" />
    </Grid.ColumnDefinitions>
    <Grid.RowDefinitions>
        <RowDefinition Height="1*" />
        <RowDefinition Height="2*" />
        <RowDefinition Height="auto" />
    </Grid.RowDefinitions>

    <Label Grid.Column="0" Grid.Row="0" Text="1" 
            BackgroundColor="Blue" 
            FontSize="Large">
    </Label>
    <Label Grid.Column="1" Grid.Row="0" Text="2" 
            BackgroundColor="Green"
            FontSize="Large">
    </Label>
    <Label Grid.Column="0" Grid.Row="1" Text="3" 
            BackgroundColor="Yellow"
            FontSize="Large">
    </Label>
    <Label Grid.Column="1" Grid.Row="1" Text="4" 
            BackgroundColor="Orange"
            FontSize="Large">
    </Label>

    <Grid Grid.Column="0" Grid.ColumnSpan="2" Grid.Row="2">
        <Label Text="1234" 
                BackgroundColor="Gray"
                FontSize="Large">
        </Label>
    </Grid>
</Grid>

ColumnDefinition と RowDefinition を使って格子状に定義していきます。

それぞれの Height または Width を指定することで、画面幅に合わせたレイアウト調整がしやすくなります。

• 「数値」：固定幅
• 「*」：余白を均等に埋める
• 「数値*」：数値の割合で埋める（1:2とか）
• 「auto」：セル内のコンテンツ最大サイズ（的な）

ざっくりこんな認識でいます

ColumnSpan / RowSpan を使えば、セル結合的な動作ができるのもUWPのと一緒ですね。