GridはWPFアプリやUWPアプリでもおなじみのコントロールです。画面上に行や列を作成しその中にコントロールを配置することができます。
行と列の定義
行と列の基本定義例を以下に示します。
<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>
実行例は以下の通りです。
Please follow and like us:
コメント