Button with image not scaling to HeightRequest on iOS and Android

[duindain]

Description

Button with an image fails to correctly scale the source image to the size of the button this results in the full size image being displayed in Android and a skewed image in iOS

iOS

Android

WinUI

Steps to Reproduce

Create a new example Maui App

Add the following line of xaml to MainPage.xaml

<Button
                ImageSource="dotnet_bot.png"
                Text="Im a happy button"
                HeightRequest="40"
                WidthRequest="200"/>

Run the solution, works correctly in WinUI and results in the full sized image next to the button in Android and the image skewed and distorted but with the correct height in iOS

I expect this to correctly render the image in the button to the left of the text in the button using the heightrequest to scale down to the requested height maintaining the images aspect ratio, see WinUI example above where the image and button are rendered correctly

Version with bug

6.0.486 (current)

Last version that worked well

Unknown/Other

Affected platforms

iOS, Android

Affected platform versions

iOS 15.5, Android 33

Did you find any workaround?

Reduce the image size manually to be the correct size desired on a device

Relevant log output

No response

[jfversluis]

You mention "Run the solution," which would indicate there is a reproduction project? Could you please link us the GitHub repo? Thank you!

[ghost]

Hi @duindain. We have added the "s/needs-repro" label to this issue, which indicates that we require steps and sample code to reproduce the issue before we can take further action. Please try to create a minimal sample project/solution or code samples which reproduce the issue, ideally as a GitHub repo that we can clone. See more details about creating repros here: https://github.com/dotnet/maui/blob/main/.github/repro.md

This issue will be closed automatically in 7 days if we do not hear back from you by then - please feel free to re-open it if you come back to this issue after that time.

[duindain]

https://github.com/duindain/mauibuttonswithimages

[ghost]

We've moved this issue to the Backlog milestone. This means that it is not going to be worked on for the coming release. We will reassess the backlog following the current release and consider this item at that time. To learn more about our issue management process and to have better expectation regarding different types of issues you can read our Triage Process.

[Zhanglirong-Winnie]

Verified this issue with Visual Studio Enterprise 17.6.0 Preview 7.0. Repro on iOS platform with sample project. mauibuttonswithimages-main.zip

[jstedfast]

I ported this sample app to Xamarin.Forms and Android looks the same as in MAUI (IOW the large png is displayed at full size even though the button is much smaller than the image).

My guess is that iOS will also render the same as in MAUI.

[jstedfast]

Just tested the Xamarin.Forms port on iOS and what it shows is a scaled-down image in the button, but oddly no text?

[runnerdev]

Until this bug can be worked on, I was able to get button images to scale down and render correctly on iOS/Android via custom handlers. It is a bit of a hack for sure but seems to work for my needs.

In the ConnectHandler override of the the button handler I did the following:

Android: Set the platformView.IconSize. I set this to platformView.MinimumHeight

iOS:
create a UIImage instance using ((Button)VirtualView).ImageSource to get the image file name. Call platformView.SetBackgroundImage(, UIControlState.Normal) Set the ImageSource of the VirtualView to null otherwise you end up with a scaled image and the huge image on top

[plppp2001]

iOS Simulators and Release on devices, button HeightRequest not working for me either, my setup: VS 2022 -> Version 17.9.5

MAUI:

	<PackageReference Include="Microsoft.Maui.Controls" Version="8.0.14" />
		<PackageReference Include="Microsoft.Maui.Controls.Compatibility" Version="8.0.14" />
		<PackageReference Include="CommunityToolkit.Maui" Version="8.0.1" />
		<PackageReference Include="CommunityToolkit.Mvvm" Version="8.2.2" />