In .Net MAUI a container is wrong resized on iOS, when an image with AspectFit is inside

This issue has been moved from a ticket on Developer Community.

---

Hi, in .Net MAUI a container is wrong resized on iOS, when an image with AspectFit is inside. I described it with pictures in the word file. You 'll find in the attachments also a sample programm to debug the problem. The error cause, that I can’t update my Xamarin.Forms app to .NET MAUI. Thanks Marian

(full repro attached in internal ticket)

From the Word document:

<?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="MauiAppImages2.MainPage">

    <ScrollView>
        <VerticalStackLayout Spacing="25" HorizontalOptions="FillAndExpand" VerticalOptions="FillAndExpand">

            <Grid>
                <Image
                    Source="image1.png"
                    Aspect="AspectFit"
                    HorizontalOptions="FillAndExpand"
                    VerticalOptions="Start"
                    BackgroundColor="Yellow"/>
                <Border HorizontalOptions="FillAndExpand" VerticalOptions="FillAndExpand" Stroke="Red" StrokeThickness="4" StrokeShape="RoundRectangle 10,10,10,10" BackgroundColor="Transparent" Margin="0" Padding="0" />
            </Grid>


            <Label
                Text="Hello, World!"
                SemanticProperties.HeadingLevel="Level1"
                FontSize="32"
                HorizontalOptions="Center" />

            <Label
                Text="Welcome to .NET Multi-platform App UI"
                SemanticProperties.HeadingLevel="Level2"
                SemanticProperties.Description="Welcome to dot net Multi platform App U I"
                FontSize="18"
                HorizontalOptions="Center" />

            <Button
                x:Name="CounterBtn"
                Text="Click me"
                SemanticProperties.Hint="Counts the number of times you click"
                Clicked="OnCounterClicked"
                HorizontalOptions="Center" />

        </VerticalStackLayout>
    </ScrollView>

</ContentPage>

---

Original Comments

Feedback Bot on 3/15/2023, 07:56 PM:

(private comment, text removed)

---

Original Solutions

(no solutions)

[marcoseraphin]

Hi all,

yes I am also experience the same behavior with my images in my current project, so please fix the problem.

[davidortinau]

Here’s a fundamental workaround. The sizing logic in the GetDesiredSize override could be improved, but this works for this case and gives you the place to do whatever you need for sizing.

Subclass ImageHandler for iOS, and then register the handler for iOS Image.

Platforms/iOS/SizedImageHandler.cs

using System;
using Microsoft.Maui.Handlers;

namespace MauiAppImages2.Platforms.iOS;

public class SizedImageHandler : ImageHandler
{
	public SizedImageHandler()
	{
	}

    public override Size GetDesiredSize(double widthConstraint, double heightConstraint)
    {
        if (VirtualView.Aspect == Aspect.AspectFit
            && VirtualView.VerticalLayoutAlignment != Microsoft.Maui.Primitives.LayoutAlignment.Fill
            && double.IsInfinity(heightConstraint))
        {
            if (PlatformView.Image != null)
            {                
                var ratio = widthConstraint / this.PlatformView.Image.PreferredPresentationSizeForItemProvider.Width;
                heightConstraint = Math.Round(this.PlatformView.Image.PreferredPresentationSizeForItemProvider.Height * ratio);
            }
        }

        return new(widthConstraint, heightConstraint);
    }
}

MauiProgram.cs

using Microsoft.Extensions.Logging;

namespace MauiAppImages2;

public static class MauiProgram
{
	public static MauiApp CreateMauiApp()
	{
		var builder = MauiApp.CreateBuilder();
		builder
			.UseMauiApp<App>()
			.ConfigureFonts(fonts =>
			{
				fonts.AddFont("OpenSans-Regular.ttf", "OpenSansRegular");
				fonts.AddFont("OpenSans-Semibold.ttf", "OpenSansSemibold");
			});

#if IOS
		builder.ConfigureMauiHandlers((handlers) =>
		{
			handlers.AddHandler<Image, Platforms.iOS.SizedImageHandler>();
		});

#endif

#if DEBUG
		builder.Logging.AddDebug();
#endif


		return builder.Build();
	}

}