[Android] Combination of ContentLayout, ImageSource and Text on a Button causes issues with Text

[MaxKolac]

Description

ButtonContentLayout.Top used on a Button with ImageSource and Text properties does not properly center the text below the image, and with some LineBreakMode values, it is unnecessarily truncated. The issue only appears once upon the Page's first appearance. Performing one of the actions below causes the text to become properly centered again until the Page is disposed:

• Rotating the phone
• Editing any BindableProperty of the affected Button while debugging and applying changes through XAML Hot Reload

Once it is "fixed" on the MainPage it remains fixed, however going back and forth to AnotherPage in my repro, shows that the issue keeps reappearing. The button with the ContentLayout set to Bottom is only there to show what I believe to be the intended behavior.

Value of property LineBreakMode seems to have an effect on how the issue propagates:

• No explicit value set or NoWrap - the text appears to be cut-off:
  
• WordWrap, CharacterWrap - text always appears off to the far-right of the Button:
  
• HeadTruncation, MiddleTruncation, TailTruncation - text always appears truncated and off to the far-right of the Button and after rotating the screen, text is no longer truncated:
  

Tried to reproduce the issue on Windows, only my physical Android device shows the issue. At the moment, I'm unable to confirm if an Android emulator would show same results.

Offtopic a little bit but, this is my first ever issue created on a public repository, I hope I provided enough details.

Steps to Reproduce

1. Create a new .NET MAUI app.
2. Paste the following Button into MainPage.xaml. Optionally, add any LineBreakMode value:

<Button HeightRequest="300"
        WidthRequest="300"
        ContentLayout="Top"
        ImageSource="dotnet_bot.png" 
        LineBreakMode="WordWrap"
        Text="Lorem ipsum et dolores lorem ipsum et dolores" />

3. Deploy and run the app in an Android phone/emulator.

Expected outcome: The text seen below the Button's image should be centered, just like the usage of ButtonContentLayout.Bottom does
Actual outcome: The text appears to be moved to the left

Link to public reproduction project repository

https://github.com/MaxKolac/ButtonContentLayoutIssue

Version with bug

7.0.92

Is this a regression from previous behavior?

Not sure, did not test other versions

Last version that worked well

7.0.92

Affected platforms

Android

Affected platform versions

Android 33

Did you find any workaround?

No response

Relevant log output

No response

[XamlTest]

Verified this on Visual Studio Enterprise 17.8.0 Preview 2.0(8.0.0-rc.1.9171). Repro on Android 13.0-API33(7.0.92), not repro on Android 13.0-API33(8.0.0-rc.1.9171) with below Project:
17811.zip

Android(.NET 7):

Android(.NET 8):

[ghost]

Hi @MaxKolac. We have added the "s/try-latest-version" label to this issue, which indicates that we'd like you to try and reproduce this issue on the latest available public version. This can happen because we think that this issue was fixed in a version that has just been released, or the information provided by you indicates that you might be working with an older version.

You can install the latest version by installing the latest Visual Studio (Preview) with the .NET MAUI workload installed. If the issue still persists, please let us know with any additional details and ideally a reproduction project provided through a GitHub repository.

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.

[MaxKolac]

I apologize for the issue spam. It took me a while to figure out how to setup a .NET 8 Maui project, and it appears that the issue is already fixed in the latest 8.0.0-rc.2.9373 preview.