Button sizing broken by .NET9 when using the Mac UI Idiom

[piersdeseilligny]

Description

It seems like the sizing/layout of buttons has been broken by .NET 9 in Mac Catalyst, when using the Mac UI Idiom.

.NET 8 (correct):

.NET 9 (incorrect):

Adding padding does not fix the issue, as it ends up being inconsistent depending on the length of the text. For example, both of these buttons have Padding="0,25", but now have inconsistent padding.

Steps to Reproduce

Any buttons without an explicitly set size seem to have this issue:

        <HorizontalStackLayout VerticalOptions="Center" HorizontalOptions="End" Spacing="10" Padding="20" >
            <Button Text="Cancel" Clicked="UIAction_Cancel_Clicked"/>
            <Button Text="Save" Clicked="UIAction_Save_Clicked"/>
        </HorizontalStackLayout>

Link to public reproduction project repository

No response

Version with bug

9.0.10 SR1

Is this a regression from previous behavior?

Yes, this used to work in .NET MAUI

Last version that worked well

Unknown/Other

Affected platforms

macOS

Affected platform versions

MacOS 15.1.1 (at least)

Did you find any workaround?

No response

Relevant log output

[similar-issues-ai]

We've found some similar issues:

• NET 8 :: Sizing of windows, text buttons and icon buttons are off #21285 , similarity score: 81%

If any of the above are duplicates, please consider closing this issue out and adding additional context in the original issue.

Note: You can give me feedback by 👍 or 👎 this comment.

[tj-devel709]

@piersdeseilligny Thanks for the issue, could you share how you are using the Mac Idiom with a reproduction? I am not seeing this behavior on my end. I do believe there are some known weird behavior with the mac idioms though.

[beeradmoore]

I was able to make a reproduction project here, https://github.com/beeradmoore/maui-issue-MacCatalystButtonText

Steps to reproduce:

1. New .NET 9 MAUI project (I did mine in Rider Nightly)
2. Add Mac Idom (edit Platforms/MacCatalyst/Info.plist key of UIDeviceFamily to value of6)
3. Update nuget to be using latest stable MAUI release
4. On MainPage.xaml change the buttons HorizontalOptions from Fill to Center.
5. Disable all styles except those needed (label headline and label subheadline)

Now run the project and the "Click me" will be truncated.

Through trial and error it looks like the part of the style that is required to make it work is the implicit style for Button.

        <Setter Property="FontSize" Value="14"/>

This means you can also fix it by adding FontSize to button explicitly

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

However this exposes another problem. Here is the same button with no implicit style, and the explicit font size of 24. There is new horizontal padding as though the button has larger text on it, but neither the button text or its height changes.

Styles out of the box work because while the font size 14 doesn't appear to change the font size, it does make the button a tad larger.

Oddities like this is why my MAUI Desktop apps have styles disabled from the get go. Keeps the native styles and prevents, too much odd things happening. But ironically keeping the style would have displayed the button incorrectly as to what is expected, but correctly to at least not truncate it.

[piersdeseilligny]

Thanks for figuring that one out! Is it possible to reopen this issue @tj-devel709 ?

[ninachen03]

This issue has been verified using Visual Studio code 1.96.2 (9.0.21 & 9.0.0-preview1.9973). Can repro on maccatalyst platform. but not repro in Visual Studio code 1.96.2 (8.0.100).