为什么我的网格布局没有占据整个宽度

Question

I am having a grid which contains six rows(each row is a stack Layout).

Inside my fifth row(ie 5th stack layout) I am having a grid.I gave 100% width for that grid, but that grid is not occupying 100% of the width.

How do I fix this problem?

<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>

Answer 1

我认为，您可以尝试删除堆栈面板，并且可以在Grid上使用Grid.Row来解决此问题。

Answer 2

I haven't see percentages used in UWP before and even think it is not a valid syntax. I think you should use HorizontalAlignment="Stretch" instead to stretch the Grid to full width.

Answer 3

@Martin Zikmund and @Durai Amuthan.H's suggestions were all correct. The Width=100% in UWP XAML layout doesn't support.

If you want to make the Grid's has the same width as the StackPanel and automatically resize when the window resized, you could also remove the Width directly like the following:

<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>