.NET MAUI中Image元素为何破坏Grid布局比例？

核心原因 #

你的Grid布局比例被破坏，本质是Image元素的固有尺寸干扰了Grid的星号行高计算逻辑：

• .NET MAUI的Grid在使用星号（*）定义行高时，会结合子元素的期望尺寸动态分配空间。当跨两行的Border中加入未做尺寸约束的Image时，Image会基于自身原始像素尺寸向Grid申请空间，这个申请的空间可能远大于Grid原本分配的0.4*+0.1*总高度。
• AspectFill仅控制图片的缩放裁剪逻辑，不会限制Image元素本身的布局空间大小——它只会保证图片按比例填充元素，但元素本身的大小还是会优先遵循自身的固有尺寸需求，进而迫使Grid调整行高比例来满足这个需求。

修复方案 #

给Image添加布局约束，让它严格填充父容器（Border）的空间，而非让父容器适应它的尺寸：

1. 给Image设置VerticalOptions="Fill"和HorizontalOptions="Fill"，强制它填满Border的可用空间。
2. Border默认的VerticalOptions和HorizontalOptions就是Fill，无需额外设置，这样Border会严格遵循Grid分配的跨两行空间。

修改后的代码示例 #

<Grid
    Margin="15"
    RowDefinitions=".4*,.1*,.1*,.4*">
    <Border
        Grid.Row="0"
        Grid.RowSpan="2"
        Stroke="{StaticResource DarkGray}">
        <Border.StrokeShape>
            <RoundRectangle
                CornerRadius="35,35,35,35" />
        </Border.StrokeShape>
        <Image               
            Aspect="AspectFill"
            Source="cup.jpg"
            VerticalOptions="Fill"
            HorizontalOptions="Fill" />
    </Border>

    <Border
        Grid.Row="1"
        Grid.RowSpan="1"
        Stroke="{StaticResource DarkGray}">
        <Border.StrokeShape>
            <RoundRectangle
                CornerRadius="35,35,35,35" />
        </Border.StrokeShape>
    </Border>
    <Border
        Grid.Row="2"
        Grid.RowSpan="1"
        Stroke="{StaticResource DarkGray}">
        <Border.StrokeShape>
            <RoundRectangle
                CornerRadius="35,35,35,35" />
        </Border.StrokeShape>
    </Border>
    <Border
        Grid.Row="3"
        Grid.RowSpan="1"
        Stroke="{StaticResource DarkGray}">
        <Border.StrokeShape>
            <RoundRectangle
                CornerRadius="35,35,35,35" />
        </Border.StrokeShape>
    </Border>
</Grid>

补充说明 #

如果图片原始尺寸比例和Grid跨两行的空间比例差异较大，AspectFill会裁剪图片来填充空间，符合你的预期需求。如果想要完整显示图片同时保持比例，可以改用AspectFit，但同样需要设置填充约束来避免干扰Grid布局。

内容的提问来源于stack exchange，提问作者iwanlenin