Question

如何阻止此Grid垂直扩展并在行之间添加所有这些额外空间？

<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

使用“自动”代替“ *”

<RowDefinition Height="Auto"/>

Answer 2

这似乎是一个错误，其中网格高度被视为图像正以其全部高度显示。

<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

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缩放图像以适合显示区域的方式。（默认为{ {1}}）

如何删除多余的网格空间？

3 个答案: