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总是保持相同的大小）

我已尝试使用单个Grid和嵌套网格，但我无法重现预期的行为。就像tittle说的那样，我想优先考虑哪些列首先收缩。

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>

<强> The Result

Answer 2

这是一个例子。

<Grid>
    <Grid.ColumnDefinitions>
        <ColumnDefinition Width="*" />
        <ColumnDefinition Width="1000*" MaxWidth="300" />
        <ColumnDefinition Width="*" />
    </Grid.ColumnDefinitions>
    <Grid Grid.Column="0" Background="White" />
    <Grid Grid.Column="2" Background="White" />
    <Grid Grid.Column="1">
        <Grid.ColumnDefinitions>
            <ColumnDefinition Width="*" />
            <ColumnDefinition Width="1000*" MaxWidth="100" />
            <ColumnDefinition Width="*" />
        </Grid.ColumnDefinitions>
        <Grid Grid.Column="0" Background="PaleGreen" />
        <Grid Grid.Column="2" Background="PaleGreen" />
        <Grid Grid.Column="1" Background="WhiteSmoke" />
    </Grid>
</Grid>

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

2 个答案: