[Bug] Android Image Aspect issues

Description

AspectFill overflows.

Center doesn’t size at all. What is this supposed to do? Xamarin.Forms doesn’t have “Center”.

No aspect or sizing information provided seems to take up more space vertically than needed.

<?xml version="1.0" encoding="utf-8" ?>
<ContentPage xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
             xmlns:xct="http://xamarin.com/schemas/2020/toolkit"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             xmlns:app="clr-namespace:ControlGallery"
             xmlns:droid="clr-namespace:Microsoft.Maui.Controls.PlatformConfiguration.AndroidSpecific;assembly=Microsoft.Maui.Controls"
             xmlns:ios="clr-namespace:Microsoft.Maui.Controls.PlatformConfiguration.iOSSpecific;assembly=Microsoft.Maui.Controls"
             ios:Page.UseSafeArea="true"
             x:Class="ControlGallery.Pages.ImagePage"
             Title="Image">
    <ContentPage.Resources>
        <Style TargetType="Image">
            <Setter Property="Background" Value="#f1f1f1"/>
        </Style>
    </ContentPage.Resources>
    <ContentPage.Content>
        <ScrollView Margin="0,60,0,0">
            <VerticalStackLayout 
                Spacing="20"
                Padding="{OnPlatform iOS='30,60,30,30', Default='30,90'}">
                <Label Text="Images" 
                           StyleClass="Headline"/>
                <Border Stroke="Black"
                        StrokeThickness="3"
                        HorizontalOptions="Start"
                        >
                    <Border.StrokeShape>
                        <RoundRectangle />
                    </Border.StrokeShape>
                    <Image Source="{StaticResource CircleIcon}"
                           HeightRequest="50"
                           WidthRequest="50"
                           BackgroundColor="Black"
                           />
                </Border>

                <Label Text="Image with 40x40 and #f1f1f1 bg"/>
                <Image Source="dotnet_bot.png" 
                       BackgroundColor="#f1f1f1"
                       HeightRequest="40" WidthRequest="40"/>

                <Label Text="Image with AspectFill 40x100"/>
                <Image Source="dotnet_bot.png" 
                       BackgroundColor="#f1f1f1"
                       HeightRequest="40" 
                       WidthRequest="100"
                       Aspect="AspectFill"
                       />

                <Label Text="Image with AspectFit 40x100"/>
                <Image Source="dotnet_bot.png" 
                       HeightRequest="40" WidthRequest="100"
                       BackgroundColor="#f1f1f1"
                       Aspect="AspectFit"
                       />

                <!--<Label Text="Image with Center 40x100"/>
                <Image Source="dotnet_bot.png" 
                       HeightRequest="40" WidthRequest="100"
                       Aspect="Center"
                       />-->

                <Label Text="Image with Fill 40x100"/>
                <Image Source="dotnet_bot.png" 
                       HeightRequest="40" WidthRequest="100"
                       Aspect="Fill"
                       />

                <Label Text="Online image"/>
                <Image Source="https://aka.ms/campus.jpg" 
                       BackgroundColor="Red"
                       WidthRequest="200"
                       HeightRequest="200"/>

                <Label Text="Image without sizing info"/>
                <Image Source="dotnet_bot.png" HorizontalOptions="Start" />
            </VerticalStackLayout>
        </ScrollView>
    </ContentPage.Content>
</ContentPage>

Extra space at top and bottom:

When the image with Center is uncommented, it overflows and covers other content.

Steps to Reproduce

1. Create new project
2. Use the XAML above
3. Observe

Expected Behavior

Images don’t overflow specified sizing

Images are scaled to the specified sizing with the aspect rule.

Sizing is still correct on multiple rotations.

Actual Behavior

I was able to rotate a few times and sizing got worse.

Basic Information

• Version with issue: pre9/main
• Platform Target Frameworks:
  • Android: 28

[VincentBu]

Not repro in 32506.368.main. Here is the screenshot:

[VincentBu]

@jfversluis, Here is the screen shot on Android 28 emulator:

It looks like image with AspectFill 40x100 isn’t rendered successfully. Additionally, I’m using VS 17.3.0 Preview [32427.505.main].