[BUG] CommunityToolkit.Maui.Views.Popup Button Text Alignment

[alaskanrogue]

Is there an existing issue for this?

• I have searched the existing issues

Did you read the "Reporting a bug" section on Contributing file?

• I have read the "Reporting a bug" section on Contributing file: https://github.com/CommunityToolkit/Maui/blob/main/CONTRIBUTING.md#reporting-a-bug

Current Behavior

If a popup appears after restoring the application from a background state, the button text is aligned to the left where the text is centered if the popup is created while the application is in a foreground state.

Foreground

Background

Expected Behavior

Button text aligned center.

Steps To Reproduce

1. 1. Create a simple Android application which can create a popup and is designed to operate in a background state as while as foreground.
2. Trigger the popup appearance after a short period of time, i.e., 10 seconds, so that there is sufficient time to move the application to the background and activate the popup appearance after the background state is entered.

Link to public reproduction project repository

https://github.com/cat0363/MauiComm-IssueForeBackChange

Environment

.NET 7.0.96

ios 16.4.8968-net8-rc2/8.0.100-rc.2
android 34.0.0-rc.2.468/8.0.100-rc.2

.NET MAUI 6.0

VS 17.8.34219.65

Anything else?

NA

[ghost]

Hi @alaskanrogue. We have added the "needs reproduction" label to this issue, which indicates that we cannot take further action. This issue will be closed automatically in 5 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.

[cat0363]

@bijington , I created a reproduction code. I will upload it below.
https://github.com/cat0363/MauiComm-IssueForeBackChange.git

Below is the execution result of version 6.0.0.

Android.Emulator.-.pixel_2_-_api_30_5554.2023-11-04.21-03-28.mp4

Below is the execution result of version 6.1.0.

Android.Emulator.-.pixel_2_-_api_30_5554.2023-11-04.20-58-54.mp4

Version 6.0.0 reproduces the reporting issue, but version 6.1.0 does not reproduce the reporting issue.
My reproduction code may be wrong, so please use it as a reference only.

[alaskanrogue]

@cat0363 Great that you were able to find and resolve the issue. I also created a reproduction project: https://github.com/alaskanrogue/CriticalPopup. I look forward for verification of resolution.

[cat0363]

@alaskanrogue , The above link is a 404 error.
Could you please check the access rights of the repository?

[cat0363]

I have confirmed that the repro code I created is different from the repro code you provided, and that the problem also occurs in version 6.1.0.

Additional Information:
The least I can say is that this problem occurs when the Button does not have an explicit width specified.

[cat0363]

I don't know if it's the same as the following, but it's similar in terms of the alignment of the button text.

dotnet/maui#14712

When the text of the button in the Popup is not centered, it is necessary to check whether the screen is rotated to update it. If this is the same problem, I need to see if it can be solved in .NET 8.

[alaskanrogue]

@cat0363 I agree, it appears that rotation while in the background centers the text, however on the rotated phone while totally in the foreground the issue continues to exist.

The other filed issue seems to be very similar.

[cat0363]

@alaskanrogue , Below is the workaround I came up with.

<toolkit:Popup xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
    xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
    xmlns:toolkit="http://schemas.microsoft.com/dotnet/2022/maui/toolkit"
    x:Class="CriticalPopup.AuthorizationPopup">
    <VerticalStackLayout>
        <Label x:Name="PopUp" BackgroundColor="White" TextColor="Black" FontSize="Medium" VerticalOptions="Center" HorizontalOptions="Center" />
        <Button x:Name="Button_Continue" BackgroundColor="Red" TextColor="White" FontSize="Large" Clicked="OnShowDestination" SizeChanged="Button_Continue_SizeChanged"/>
    </VerticalStackLayout>
</toolkit:Popup>

Try adding the button's SizeChanged event and implementing the following.

private void Button_Continue_SizeChanged(object sender, EventArgs e)
{
    var button = (sender as Button);
    button.HeightRequest = button.Height;
    button.WidthRequest = button.Width;
}

The button label should now be centered even when rotated in the background.

[cat0363]

If you do not implement the above workaround, the issue will occur if you rotate the device while the button labels are displayed correctly.
In Issue #14712, the situation is slightly different, as the button text returns to its normal position when the device is rotated.

All that remains is to confirm whether this problem occurs in .NET 8.

[alaskanrogue]

The workaround was successful. The application tested on is locked in portrait mode however, so I was not able to test the landscape mode. It did work in the reproduction app also but rotating had an expected impact of resizing and that was subsequently maintained when the app returned to portrait.

[cat0363]

I now understand what mechanism is causing this problem.
In conclusion, on Android, the button size does not reflect LayoutOptions.
For this reason, the Button size is set to the minimum size necessary to display the button.
The reason why the Button's text appears to be closer to the right edge is because it is only as large as necessary to display the Button's text.

The size required to display the Popup is determined by calling the platform's Measure method.
However, for Android only, it seems necessary to call the Measure method strictly taking into consideration the LayoutOptions on the VirtualView side.

Below are the verification results.

Android.Emulator.-.pixel_2_-_api_30_5554.2023-11-08.15-35-10.mp4

Below are the verification results before and after rotating the device.

[Before Rotation]

[After Rotation]

Various patterns must be tested and large-scale modifications are required.

It would be best if the layout could be updated on the VirutalView side, but it is very troublesome because the layout needs to be updated on the PlatformView side. It looks like it will take some time to fix it.

[cat0363]

I forgot to mention that this issue has nothing to do with #14712. Therefore, even if it is updated to .NET 8, it will not work as intended.

[cat0363]

I will create a PR regarding this matter soon.
I was able to write the fix code, but I've been busy with my day job and haven't been able to create a PR.

[vallgrenerik]

Im also facing this issue!
Thank you @cat0363 for fixing this! ⭐