Как я могу удалить это дополнительное пространство сетки?

Question

Как я могу остановить расширение этой сетки по вертикали и добавление всего этого дополнительного пространства между строками?

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

---

Этокак это должно выглядеть (игнорировать изменение цвета фона)

Answer 1

Кажется, что это ошибка, когда высота сетки обрабатывается так, как будто изображение отображается на полной высоте.

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

В Grid имеется свойство spacing .

Grid имеет свойства для контроля расстояния между строками и столбцами. Следующие свойства доступны для настройки Grid:

• ColumnSpacing - объем пространства между столбцами. Значение этого свойства по умолчанию: 6.
• RowSpacing - количество пробелов между строками. Значение этого свойства по умолчанию: 6.

. Вы можете установить RowSpacing или ColumnSpacing, чтобы проверить, можете ли это решить.

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

О Изображение , Свойство Aspect определяет способ масштабирования изображения в соответствии с областью отображения, с Fill или AspectFill. (по умолчанию AspectFit)

Answer 3

Используйте «Авто» вместо «*»

<RowDefinition Height="Auto"/>