为啥我的网格布局没有占据完整的宽度

Posted 2023-03-25

【中文标题】为啥我的网格布局没有占据完整的宽度

【英文标题】：Why my grid layout is not occupying complete width为什么我的网格布局没有占据完整的宽度

【发布时间】：2018-10-28 17:20:07

【问题描述】：

我有一个包含六行的网格（每行是一个堆栈布局）。

在我的第五行（即第 5 个堆栈布局）内，我有一个网格。我为该网格指定了 100% 的宽度，但该网格没有占据 100% 的宽度。

我该如何解决这个问题？

<Grid>
    <Grid.RowDefinitions>
        <RowDefinition Height="Auto"></RowDefinition>
        <RowDefinition Height="Auto"></RowDefinition>
        <RowDefinition Height="Auto"></RowDefinition>
        <RowDefinition Height="*"></RowDefinition>
    </Grid.RowDefinitions>
    <StackPanel Grid.Row="0" Orientation="Vertical">
    </StackPanel>
    <StackPanel Grid.Row="1" Orientation="Vertical">
    </StackPanel>
    <StackPanel Grid.Row="2" Orientation="Vertical">
        <Grid Width="100%">
        </Grid>
    </StackPanel>
    <StackPanel Grid.Row="3" Orientation="Vertical">
    </StackPanel>
</Grid>

【问题讨论】：

能否添加一个简化的 XAML 代码？

您可以尝试移除堆栈面板，然后您可以在 Grid 上使用 Grid.Row 并解决问题

去掉StackPanel，将内层Grid直接放在父Grid中。

【参考方案1】：

我认为，您可以尝试移除堆栈面板，然后在 Grid 上使用 Grid.Row，这样可以解决问题。

【参考方案2】：

我之前没有看到 UWP 中使用过百分比，甚至认为它不是有效的语法。我认为您应该使用HorizontalAlignment="Stretch" 来将Grid 拉伸到全宽。

【参考方案3】：

@Martin Zikmund 和@Durai Amuthan.H 的建议都是正确的。 UWP XAML 布局中的Width=100% 不支持。

如果您想让 Grid 的宽度与 StackPanel 的宽度相同，并在调整窗口大小时自动调整大小，您也可以直接删除 Width，如下所示：

<Grid>
    <Grid.RowDefinitions>
        <RowDefinition Height="Auto"></RowDefinition>
        <RowDefinition Height="Auto"></RowDefinition>
        <RowDefinition Height="Auto"></RowDefinition>
        <RowDefinition Height="*"></RowDefinition>
    </Grid.RowDefinitions>
    <StackPanel Grid.Row="0" Orientation="Vertical">
    </StackPanel>
    <StackPanel Grid.Row="1" Orientation="Vertical">
    </StackPanel>
    <StackPanel Grid.Row="2" Orientation="Vertical">
        <Grid Background="Red">
            <TextBlock Text="abc"></TextBlock>
        </Grid>
    </StackPanel>
    <StackPanel Grid.Row="3" Orientation="Vertical">
    </StackPanel>
</Grid>