如何将 Grid 行拆分为两列？答案

【问题标题】：How to split a Grid row into two columns?如何将 Grid 行拆分为两列？
【发布时间】：2020-06-07 21:11:22
【问题描述】：

我有 3 行的网格布局。如何将第 3 行拆分为 2 列。

<Grid.RowDefinitions>
    <RowDefinition Height="0.75*"/>
    <RowDefinition Height="0.25*"/>
    <RowDefinition Height="36"/>
</Grid.RowDefinitions>

【问题讨论】：

标签： wpf grid-layout

【解决方案1】：

两种方法：

使用嵌套布局。将另一个Grid 放在第三行，并在该子网格中有两列。

<Grid>
    <Grid.RowDefinitions> ... </Grid.RowDefinitions>
    <ThingInFirstRow Grid.Row="0" />
    <ThingInSecondRow Grid.Row="1" />
    <Grid Grid.Row="2">
        <Grid.ColumnDefinitions>
            <ColumnDefinition />
            <ColumnDefinition />
        </Grid.ColumnDefinitions>
        <ThingInLowerLeft Grid.Column="0" />
        <ThingInLowerRight Grid.Column="0" />
    </Grid>
</Grid>

坚持使用Grid，给它两列，并使用ColumnSpan 使前两行中的内容跨越两列。

<Grid>
    <Grid.RowDefinitions> ... </Grid.RowDefinitions>
    <Grid.ColumnDefinitions>
        <ColumnDefinition />
        <ColumnDefinition />
    </Grid.ColumnDefinitions>
    <ThingInFirstRow Grid.Row="0" Grid.ColumnSpan="2" />
    <ThingInSecondRow Grid.Row="1" Grid.ColumnSpan="2" />
    <ThingInLowerLeft Grid.Row="2" Grid.Column="0" />
    <ThingInLowerRight Grid.Row="2" Grid.Column="1" />
</Grid>

【讨论】：

【解决方案2】：

<Grid>
        <Grid.RowDefinitions >
            <RowDefinition Height="0.75"/>
            <RowDefinition Height="0.25"/>
            <RowDefinition Height="36"/>
        </Grid.RowDefinitions>

        <Grid Grid.Row="2">
            <Grid.ColumnDefinitions>
                <ColumnDefinition Width="*"/>
                <ColumnDefinition Width="*"/>
            </Grid.ColumnDefinitions>       
        </Grid>
</Grid>

【讨论】：