Width calculation in the compatibility ButtonRenderer is broken

[holecekp]

Description

I have tried to migrate my project from Xamarin.Forms to MAUI. I have a custom button with some additional properties that uses a custom renderer in Xamarin.Forms. Everything works perfectly there. I was happy to learn that I can register a compatibility renderer in MAUI without any significant modifications.

However, MAUI renderer behaves differently than the Xamarin.Forms one. It works fine on Android but it sets completely incorrect width on Windows so the button has just a few pixels and its text is not visible. This bug complicates the migration from Xamarin.Forms.

I have prepared a repro project. It contains a line with buttons that should simulate a custom toolbar. First three buttons uses custom renderer. In the repro project, the renderer is empty. It just inherits from ButtonRenderer in MAUI and does nothing more.

    <Grid RowDefinitions="Auto, *" ColumnDefinitions="*">

        <StackLayout Orientation="Horizontal"
                     BackgroundColor="Silver"
                     HorizontalOptions="FillAndExpand">
                
            <local:MyButton Text="A"
                            WidthRequest="100" />
            <local:MyButton Text="B"
                            WidthRequest="100" />
            <local:MyButton Text="C"
                            WidthRequest="100" />
            <Button Text="D"
                    WidthRequest="100" />
            <Button Text="E"
                    WidthRequest="100" />
            
        </StackLayout>

    </Grid>

Screenshot of the result - first three buttons are displayed incorrectly:

Screenshot of the result of you remove AddCompatibilityRenderer line from MauiProgram.cs - all buttons are displayed correctly:

I have found out that the following conditions are required for the bug: 1) a compatibility renderer for Button is used, 2) a width is set by WidthRequest, or MinimumWidthRequest, 3) the buttons are placed inside a Grid.

It seems that the bug is so specific that it is not worth bothering with it. Nevertheless, I know from my own experience that, because of the very specific conditions, it took me quite a lot of time to find out why some buttons are rendered correctly and some incorrectly in my app after migrating to MAUI. There is not much chance that the bug will be fixed but I still think it is useful to fill out the issue for it so that it would be at least documented so the other developers migrating from Xamarin.Forms would know what causes it and what workarounds are available for fixing it.

Steps to Reproduce

1. Run the repro project on Windows.
2. You can see that there is a line of buttons and first three of them are displayed incorrectly. Their are too small and their text is cut. These ones use a custom renderer that does nothing. The remaining two buttons in the line are displayed correctly. These ones use the default Button without any compatibility renderer.
3. You can also run the project on Android to check that all buttons are displayed correctly there.

Link to public reproduction project repository

https://github.com/holecekp/MauiBugButtonRenderer

Version with bug

6.0.486 (current)

Last version that worked well

Unknown/Other

Affected platforms

Windows

Affected platform versions

Windows 10

Did you find any workaround?

There are more things that can be done but they are not always possible or not always leads to the desired design:

1. Remove the Grid and replace it by StackLayout. This is not possible if you need a more complicated layout that requires Grid.
2. Do not set any width for the buttons at all. This is not possible if you want your buttons to have the same width (e.g. buttons in a custom toolbar)
3. Do not use compatibility renderer and implement your custom button using handlers instead. I did not checked if it helps with the bug but it should. Problem is that this complicates the migration. It can be complicated and time consuming depending on the complexity of the renderer.

Relevant log output

No response

[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.

[jinxinjuan]

Verified this issue with Visual Studio 17.7.0 Preview 1.0. Can repro on windows platform with sample project.
MauiBugButtonRenderer