[WPF][Grid] セルを連結して、グリッドレイアウトを構築する方法

Grid

2023.11.21

概要
構文
使用例

概要

Grid コントロールを使用してセルを跨いで行と列を連結することで、柔軟で複雑な画面レイアウトを構築する方法を解説します。RowSpan および ColumnSpan を活用することで、1 つの要素を複数のセルにまたがって配置できます。

構文

Grid.RowSpan および Grid.ColumnSpan プロパティを使用して、要素が何行または何列に跨るかを指定します。

<Button Content="ボタン" Grid.Row="0" Grid.Column="0" 
        Grid.RowSpan="2" Grid.ColumnSpan="2" />

使用例

以下の例は4行4列のGridを作成し、Buttonコントロールで Grid.Row=”1″、Grid.Column=”1″とすることでコントロールの配置場所を行1列1に設定します。まGrid.RowSpan=”1″ Grid.ColumnSpan=”2″ とすることで、2列にまたがってボタンを配置することができます。

<Grid>
    <!-- 行の定義 -->
    <Grid.RowDefinitions>
        <RowDefinition/>
        <RowDefinition/>
        <RowDefinition/>
        <RowDefinition/>
    </Grid.RowDefinitions>
    <!-- 列の定義 -->
    <Grid.ColumnDefinitions>
        <ColumnDefinition/>
        <ColumnDefinition/>
        <ColumnDefinition/>
        <ColumnDefinition/>
    </Grid.ColumnDefinitions>
    <!-- ボタンの配置 -->
    <Button Content="ボタン" Grid.Row="1" Grid.Column="1" 
            Grid.RowSpan="1" Grid.ColumnSpan="2" />
</Grid>