具有不同调整大小“优先级”的网格列

Question

我有一个 5 列的布局（1 和 5 大小相同，2 和 4 大小相同）：

| 1 | 2 | 3 | 4 | 5 |

我们允许用户水平调整应用程序的大小（缩小它），我试图实现的行为如下：缩小第 1 列和第 5 列直到它们消失

|1| 2 | 3 | 4 |5|

|| 2 | 3 | 4 ||

| 2 | 3 | 4 |

然后，然后才开始缩小 2 和 4 直到最小宽度（3 始终保持相同的大小）

我也尝试过使用单个网格和嵌套网格进行此操作，但我无法重现预期的行为。就像标题所说的那样，我想优先考虑哪些列首先缩小。

Answer 1

您可以使用三个网格来生成它

<Grid>
    <Grid.ColumnDefinitions>
        <ColumnDefinition Width="*"/>
        <ColumnDefinition Width="Auto"/>
        <ColumnDefinition Width="*"/>
    </Grid.ColumnDefinitions>
    <Grid  x:Name="Grid1" Grid.Column="0">
        <Grid.ColumnDefinitions>
            <ColumnDefinition Width="*"/>
            <ColumnDefinition Width="Auto"/>
        </Grid.ColumnDefinitions>            
        <Rectangle Fill="LightBlue" Grid.Column="0" Width="200"/>
        <Rectangle Fill="LightGreen" Grid.Column="1" Width="100"/>
    </Grid>

        <Grid  x:Name="Grid3" Grid.Column="1">
            <Rectangle Fill="Black" Width="100"/>
        </Grid>

    <Grid x:Name="Grid5" Grid.Column="2">
        <Grid.ColumnDefinitions>
            <ColumnDefinition Width="Auto"/>
            <ColumnDefinition Width="*"/>
        </Grid.ColumnDefinitions>
        <Rectangle Fill="LightGreen" Grid.Column="0" Width="100"/>
        <Rectangle Fill="LightBlue" Grid.Column="1" Width="200"/>
    </Grid>
</Grid>

结果