如何删除这个额外的网格空间？

Question

How can I stop this Grid from expanding vertically and adding all this extra space between the rows?

<ContentPage.Content>
    <StackLayout>

        <Grid>

            <Grid.ColumnDefinitions>
                <ColumnDefinition Width="*"/>
                <ColumnDefinition Width="*"/>
            </Grid.ColumnDefinitions>

            <Grid.RowDefinitions>
                <RowDefinition Height="*"/>
                <RowDefinition Height="*"/>
            </Grid.RowDefinitions>

            <Image Source="testsquare" />
            <Image Source="testsquare" Grid.Column="1"/>

            <Image Source="testsquare" Grid.Row="1"/>
            <Image Source="testsquare" Grid.Column="1" Grid.Row="1"/>
        </Grid>
    </StackLayout>

</ContentPage.Content>

---

This is what it should look like (ignore the background color change)

Answer 1

Use "Auto" instead of "*"

<RowDefinition Height="Auto"/>

Answer 2

It appears to be a bug, where the grid height is being treated as if the image is being displayed at its full height.

<Grid BackgroundColor="CornflowerBlue">
    <Grid.ColumnDefinitions>
        <ColumnDefinition Width="*"/>
        <ColumnDefinition Width="*"/>
    </Grid.ColumnDefinitions>

    <Grid.RowDefinitions>
        <RowDefinition Height="auto"/>
    </Grid.RowDefinitions>

    <Image Source="testsquare" />
    <Image Source="testsquare" Grid.Column="1" />

</Grid>

Answer 3

There is a spacing property in Grid .

Grid has properties to control spacing between rows and columns. The following properties are available for customizing the Grid :

• ColumnSpacing – the amount of space between columns. The default value of this property is 6 .
• RowSpacing – the amount of space between rows. The default value of this property is 6 .

You can set RowSpacing or ColumnSpacing to check whether can solve it.

<StackLayout Padding="5">

    <Grid RowSpacing="5" ColumnSpacing="5">

        <Grid.ColumnDefinitions>
            <ColumnDefinition Width="*" />
            <ColumnDefinition Width="*" />
        </Grid.ColumnDefinitions>

        <Grid.RowDefinitions>
            <RowDefinition Height="*"/>
            <RowDefinition Height="*" />
        </Grid.RowDefinitions>

        <Image Source="icon.png" BackgroundColor="Accent"/>
        <Image Source="icon.png"
               BackgroundColor="Accent"
               Grid.Column="1" />

        <Image Source="icon.png"
               BackgroundColor="Accent"
               Grid.Row="1" />
        <Image Source="icon.png"
               BackgroundColor="Accent"
               Grid.Column="1"
               Grid.Row="1" />
    </Grid>
</StackLayout>

About Image , The Aspect property determines how the image will be scaled to fit the display area, with Fill or AspectFill .(Default is AspectFit )