Question

我对MaxWidth有疑问。让我们看看这段代码：

    <Grid Height="50" Background="Red">
        <Grid.ColumnDefinitions>
            <ColumnDefinition Width="Auto" />
            <ColumnDefinition Width="*" />
            <ColumnDefinition Width="Auto" />
            <ColumnDefinition Width="Auto" />
        </Grid.ColumnDefinitions>

        <Grid Grid.Column="0" Width="200" Background="Green" BorderBrush="Black" BorderThickness="2" />
        <Grid Grid.Column="2" Width="200" Background="Yellow" BorderBrush="Black" BorderThickness="2" />
        <Grid Grid.Column="3" Width="200" Background="Blue" BorderBrush="Black" BorderThickness="2" />
    </Grid>

我们有红色网格height 50px和全屏宽度。在这个网格中我想要有3个项目，例如网格，一个屏幕左边和两个屏幕右边，都有width 200px。

在较大的屏幕上，此代码效果很好，左侧有绿色200px网格，右侧有两个黄色和蓝色200px网格，它们之间有红色空格。

但是在较小的屏幕（小于600px）上，蓝色网格被切断。我希望绿色和黄色网格保持200px，蓝色网格尽可能多地占用，例如150px或100px。我尝试在蓝色网格上将Width=200更改为MaxWidth=200，但使用此代码时蓝色网格会消失。它不是拉伸，它的宽度是0.如何尽可能地拉伸，最多200px？

Answer 1

您可以使用此XAML获得所需的效果：

<Grid Height="50" Background="Red">
    <Grid.ColumnDefinitions>
        <ColumnDefinition Width="Auto" />
        <ColumnDefinition Width="*" />
        <ColumnDefinition Width="Auto" />
        <ColumnDefinition Width="999*" MaxWidth="200" />
    </Grid.ColumnDefinitions>

    <Grid Grid.Column="0" Width="200" Background="Green" BorderBrush="Black" BorderThickness="2" />
    <Grid Grid.Column="2" Width="200" Background="Yellow" BorderBrush="Black" BorderThickness="2" />
    <Grid Grid.Column="3" Background="Blue" BorderBrush="Black" BorderThickness="2" >
        <Button HorizontalAlignment="Right" Content="Test"/>
    </Grid>
</Grid>

我在蓝色网格中添加了Button以显示它正确拉伸。

诀窍是在MaxWidth级别设置ColumnDefinition并删除网格级别的200px限制（否则它将永远不会小于此值）。

＆＃39; hack＆＃39;来自Width的{{1}}，你需要让它自由伸展，这是通过＆＃39; *＆＃39;来实现的。但是你已经有了一个可伸缩的专栏。因此，您需要先将第二列（红色的一个）缩小，然后再开始收缩蓝色的一列。虽然这不是开箱即用的，但您可以使用此技巧来实现它。 999 *表示蓝色列应该比红色列大999倍，因此当您调整大小时，它将尝试保持该比率。只有当红色足够小（此时为0px）时，蓝色的才会开始调整大小。

如何使用MaxWidth而不是Width

1 个答案: