如何使用 MaxWidth 而不是 Width

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 网格，它们之间有红色 space。

但在较小的屏幕上（小于 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 以显示它正确拉伸。

诀窍是在 ColumnDefinition 级别上设置 MaxWidth 并在 Grid 级别删除 200px 限制（否则它永远不会小于那个）。

'hack' 出现在 ColumnDefinition 的 Width 处，您需要让它自由伸展，这是通过 '*' 实现的。但是您已经有了一个可拉伸的列。因此，您需要先缩小第二列（红色列），然后才开始缩小蓝色列。虽然开箱即用是不可能的，但您可以使用这个技巧来实现它。 999* 表示蓝色列应该比红色列大 999 倍，因此当您调整大小时它会尽量保持该比例。只有当红色的变得足够小（此时为0px）时，蓝色的才会开始调整大小。

如何使用 MaxWidth 而不是 Width

How to use MaxWidth instead of Width

xaml

windows-store-apps

uwp

windows-10-universal

uwp-xaml