読者です 読者をやめる 読者になる 読者になる

PG.Lib

主にUWP、C#に関することやガジェット系

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>

f:id:fxxk_authority:20170420111326p:plain

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

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

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

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

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