Gridコントロールを使用するとGrid内のエリアを表のように行と列に分割し、各セル内にコントロールを配置することが可能になります。
行は<Grid.RowDefinitions>で定義します。
1行は<RowDefinition>で表し、3行作成する場合は<Grid.RowDefinitions>の中に<RowDefinition>を3つ記述します。
3行作成する例
<Grid>
<Grid.RowDefinitions>
<RowDefinition />
<RowDefinition />
<RowDefinition />
</Grid.RowDefinitions>
</Grid>
ただし、このままでは各行の高さは0となってしまうため、Height属性を使用して各行の高さを指定します。
Height属性には、数値、Auto、* のいずれかを指定することができます。
数値を指定すると、行高さは指定された数値の高さとなります。
Autoを指定すると、行高さはその行内に配置したコントロールの高さになります。
*をしていすると、行高さは、配置したGridの総高さから他の行の高さの総和を引いた高さになります。
3行作成し、それぞれの高さを100, 200, *とする場合は下記のようにします。
3行を作成し、それぞれの行高さを指定する例
<Grid.RowDefinitions>
<RowDefinition Height="100"/>
<RowDefinition Height="200" />
<RowDefinition Height="*"/>
</Grid.RowDefinitions>
————————
列は<Grid.ColumnDefinitions>で定義します。
1列は <ColumnDefinition>で表し、3列作成する場合は<Grid.ColumnDefinitions>の中に<ColumnDefinition>を3つ記述します。
3列作成する例
<Grid.ColumnDefinitions>
<ColumnDefinition />
<ColumnDefinition />
<ColumnDefinition />
</Grid.ColumnDefinitions>
ただし、このままでは各列の幅は0となってしまうため、Width属性を指定して各列の幅を指定します。
Width属性にはHeight属性と同様に、数値、Auto、* のいずれかを指定することができます。
3列作成し、各列の幅を 200, Auto, *とする場合は、下記のようにします。
3列作成し、それぞれの幅を指定する例
<Grid.ColumnDefinitions>
<ColumnDefinition Width="200" />
<ColumnDefinition Width="Auto" />
<ColumnDefinition Width="*" />
</Grid.ColumnDefinitions>
————————
作成した行、列の中にコントロールを配置する場合は、各コントロールで何行何列に配置するかGrid.Row、Grid.Columnで指定します。このように親要素で定義されるプロパティについて子要素がそれぞれの値を指定できるようにするプロパティのことを添付プロパティと呼びます。
Grid.RowおよびGrid.Columには0から始まる数値を指定します。
たとえば1行2列にTextBlockコントロールを配置する場合には下記のようにします。
1行2列にTextBlockコントロールを配置する例
<TextBlock Grid.Row="0" Grid.Column="1" Text="1行目" />
上記をまとめた<Grid>のXAML例は下記の通りです。
<Grid>のXAML例
<Grid>のXAML例
<Grid Grid.Row="1" Grid.Column="0">
<Grid.RowDefinitions>
<RowDefinition Height="100"/>
<RowDefinition Height="200" />
<RowDefinition Height="*"/>
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="200" />
<ColumnDefinition Width="Auto" />
<ColumnDefinition Width="*" />
</Grid.ColumnDefinitions>
<TextBlock Grid.Row="0" Grid.Column="1" Text="1行2列" FontSize="50" Width="300"/>
</Grid>
実行してしまうと、行と列がどのように定義されているか見えなくなってしまいます。
デザイナで表示例は下記の通りです。
コメント