[Windows ストアアプリ][Grid] 行や列を連結する

Grid

2013.07.242022.11.17

<Grid>コントロールでは、行や列を連結して、1つのセルのように扱うことができます。

行を連結するにはGrid.RowSpanを、列を連結するにはGrid.ColumnSpanを使用します。
Grid.RowSpanは Grid.RowやGrid.Columnと一緒に使用します。

たとえば、Buttonコントロールを1行2列に置き、2行にまたがって配置したい場合には下記のようにします。

2行にまたがって配置する例
<Button Content=”2行連結” Grid.Row=”0″ Grid.Column=”1″ Grid.RowSpan=”2″ />

また、Buttonコントロールを3行1列に置き、2列にまたがって配置したい場合には下記のようにします。

2列にまたがって配置する例

<Button Content="2列連結" Grid.Row="2" Grid.Column="0" Grid.ColumnSpan="2" />

Grid全体のXAML例は下記の通りです。

<Grid>
    <Grid.RowDefinitions>
        <RowDefinition Height="100" />
        <RowDefinition Height="100" />
        <RowDefinition Height="100" />
        <RowDefinition Height="*"/>
    </Grid.RowDefinitions>

    <Grid.ColumnDefinitions>
        <ColumnDefinition Width="200" />
        <ColumnDefinition Width="Auto" />
        <ColumnDefinition Width="*" />
    </Grid.ColumnDefinitions>
    
    <Button Content="2行連結" Grid.Row="0" Grid.Column="1" Grid.RowSpan="2"
            FontSize="50" Width="300" Height="200" Background="BlueViolet"/>
    <Button Content="2列連結" Grid.Row="2" Grid.Column="0" Grid.ColumnSpan="2"
            FontSize="50" Width="300" Height="200" Background="BlueViolet"/>
</Grid>

Please follow and like us: