如何在.NET MAUI中使Border尺寸与图片保持一致？

问题描述 #

期望Border与图片尺寸完全一致，但实际运行后图片上下出现空白区域，使用的是640x640px的PNG图片，原始XAML代码如下：

<?xml version="1.0" encoding="utf-8" ?>
<ContentPage xmlns="http://schemas.microsoft.com/dotnet/2021/maui" 
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             x:Class="Test101.MainPage">
    
    <ScrollView>
        <VerticalStackLayout VerticalOptions="Center">
            <Grid>
                <Border BackgroundColor="Aqua">
                    <Image Source="atom_1.png" Aspect="AspectFit"/>
                </Border>
            </Grid>
        </VerticalStackLayout>
    </ScrollView>
</ContentPage>

空白产生的原因 #

1. AspectFit的特性：Aspect="AspectFit" 会保持图片宽高比缩放到容器内，但Image控件本身会填充父容器的可用空间，图片缩放后留下的空白区域也会被包含在Image控件的范围内，导致Border包裹了整个控件（包括空白）。
2. 布局的空间扩展：外层的VerticalStackLayout和Grid默认会占据尽可能多的垂直可用空间，进一步拉伸了Border的高度。

解决方案 #

方案一：调整布局约束，让容器仅包裹图片实际尺寸 #

通过修改布局的垂直选项和Image的对齐方式，让Border仅包裹图片的实际显示区域：

<?xml version="1.0" encoding="utf-8" ?>
<ContentPage xmlns="http://schemas.microsoft.com/dotnet/2021/maui" 
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             x:Class="Test101.MainPage">
    
    <ScrollView>
        <VerticalStackLayout VerticalOptions="Center">
            <!-- 让Grid仅包裹内容，不占用额外垂直空间 -->
            <Grid VerticalOptions="Start">
                <!-- 移除Border默认内边距，确保紧贴图片 -->
                <Border BackgroundColor="Aqua" Padding="0">
                    <!-- 让Image仅占据自身实际显示空间，不拉伸填充容器 -->
                    <Image Source="atom_1.png" 
                           Aspect="AspectFit" 
                           VerticalOptions="Start" 
                           HorizontalOptions="Start"/>
                </Border>
            </Grid>
        </VerticalStackLayout>
    </ScrollView>
</ContentPage>

方案二：使用AspectFill填充容器（允许图片裁剪） #

如果不需要完整显示图片，仅要求Border与图片尺寸匹配，可以将Image的Aspect改为Fill，图片会拉伸填充整个Image控件，Border自然不会出现空白：

<Border BackgroundColor="Aqua">
    <Image Source="atom_1.png" Aspect="Fill"/>
</Border>

方案三：代码绑定图片实际渲染尺寸（精准匹配） #

若需要严格匹配图片的实际显示尺寸，可通过监听Image的尺寸变化，动态设置Border的尺寸：
XAML部分：

<Border x:Name="imageBorder" BackgroundColor="Aqua">
    <Image x:Name="cardImage" 
           Source="atom_1.png" 
           Aspect="AspectFit"
           SizeChanged="CardImage_SizeChanged"/>
</Border>

后台代码（MainPage.xaml.cs）：

private void CardImage_SizeChanged(object sender, EventArgs e)
{
    if (sender is Image image)
    {
        imageBorder.WidthRequest = image.Width;
        imageBorder.HeightRequest = image.Height;
    }
}

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