Addition of size calculation for Label placed in Popup and correction of size calculation when Popup Size is not specified #1456

cat0363 · 2023-10-13T07:37:53Z

This PR will correct the following:

Correct so that VerticalTextAlignment and HorizontalTextAlignment function correctly when a label is placed in the Popup's content.
When Popup Size is not specified and WidthRequest and HeightRequest of Popup Content are specified, change the Popup so that it is displayed at the intended size.

Description of Change

Below is the first change.

[src\CommunityToolkit.Maui.Core\Views\Popup\PopupExtensions.android.cs]

static void Measure(AView view, int width, int height, bool isNanWidth, bool isNanHeight, ref bool isRootView)
{
    if (isRootView)
    {
        isRootView = false;
        view.Measure(
            MeasureSpec.MakeMeasureSpec(width, !isNanWidth ? MeasureSpecMode.Exactly : MeasureSpecMode.AtMost),
            MeasureSpec.MakeMeasureSpec(height, !isNanHeight ? MeasureSpecMode.Exactly : MeasureSpecMode.AtMost)
        );
    }

    if (view is AppCompatTextView)
    {
        // https://github.com/dotnet/maui/issues/2019
        // https://github.com/dotnet/maui/pull/2059
        var layoutParams = view.LayoutParameters;
        view.Measure(
            MeasureSpec.MakeMeasureSpec(width, (layoutParams?.Width == LinearLayout.LayoutParams.WrapContent && !isNanWidth) ? MeasureSpecMode.Exactly : MeasureSpecMode.Unspecified),
            MeasureSpec.MakeMeasureSpec(height, (layoutParams?.Height == LinearLayout.LayoutParams.WrapContent && !isNanHeight) ? MeasureSpecMode.Exactly : MeasureSpecMode.Unspecified)
        );
    }

    if (view is ViewGroup viewGroup)
    {
        for (int i = 0; i < viewGroup.ChildCount; i++)
        {
            if (viewGroup.GetChildAt(i) is AView childView)
            {
                Measure(childView, width, height, isNanWidth, isNanHeight, ref isRootView);
            }
        }
    }
}

static void CalculateSizes(IPopup popup, Context context, Size windowSize, ref int realWidth, ref int realHeight, ref int realContentWidth, ref int realContentHeight)
{
    ArgumentNullException.ThrowIfNull(popup.Content);

    var density = context.Resources?.DisplayMetrics?.Density ?? throw new InvalidOperationException($"Unable to determine density. {nameof(context.Resources.DisplayMetrics)} cannot be null");
    var view = popup.Content.ToPlatform();

    if (popup.Size.IsZero)
    {
        if (double.IsNaN(popup.Content.Width) || double.IsNaN(popup.Content.Height))
        {
            if (view is not null)
            {
                bool isRootView = true;
                Measure(
                    view,
                    (int)(double.IsNaN(popup.Content.Width) ? windowSize.Width : (int)context.ToPixels(popup.Content.Width)),
                    (int)(double.IsNaN(popup.Content.Height) ? windowSize.Height : (int)context.ToPixels(popup.Content.Height)),
                    double.IsNaN(popup.Content.Width) && popup.HorizontalOptions != LayoutAlignment.Fill,
                    double.IsNaN(popup.Content.Height) && popup.VerticalOptions != LayoutAlignment.Fill,
                    ref isRootView
                );
                realContentWidth = view.MeasuredWidth;
                realContentHeight = view.MeasuredHeight;
            }

            if (double.IsNaN(popup.Content.Width))
            {
                realContentWidth = popup.HorizontalOptions == LayoutAlignment.Fill ? (int)windowSize.Width : realContentWidth;
            }
            if (double.IsNaN(popup.Content.Height))
            {
                realContentHeight = popup.VerticalOptions == LayoutAlignment.Fill ? (int)windowSize.Height : realContentHeight;
            }
        }
        else
        {
            realContentWidth = (int)context.ToPixels(popup.Content.Width);
            realContentHeight = (int)context.ToPixels(popup.Content.Height);
        }
    }
    else
    {
        if (view is not null)
        {
            bool isRootView = true;
            Measure(
                view,
                (int)context.ToPixels(popup.Size.Width),
                (int)context.ToPixels(popup.Size.Height),
                false,
                false,
                ref isRootView
            );
            realContentWidth = view.MeasuredWidth;
            realContentHeight = view.MeasuredHeight;
        }
    }

    realWidth = Math.Min(realWidth is 0 ? realContentWidth : realWidth, (int)windowSize.Width);
    realHeight = Math.Min(realHeight is 0 ? realContentHeight : realHeight, (int)windowSize.Height);

    if (realHeight is 0 || realWidth is 0)
    {
        realWidth = (int)(context.Resources?.DisplayMetrics?.WidthPixels * 0.8 ?? throw new InvalidOperationException($"Unable to determine width. {nameof(context.Resources.DisplayMetrics)} cannot be null"));
        realHeight = (int)(context.Resources?.DisplayMetrics?.HeightPixels * 0.6 ?? throw new InvalidOperationException($"Unable to determine height. {nameof(context.Resources.DisplayMetrics)} cannot be null"));
    }
}

It has been reported in .NET MAUI Issue #2019 that on Android, VerticalTextAlignment and HorizontalTextAlignment do not work when Fill is specified for LayoutAlignment.
In PR #2059, the issue is resolved by calling the Measure method with MeasureSpecMode.Exactly specified as the Measure method argument. To accomplish the same thing, I defined a new Measure method and called it.

Below is the second change.

[src\CommunityToolkit.Maui.Core\Views\Popup\PopupExtensions.android.cs]

static void CalculateSizes(IPopup popup, Context context, Size windowSize, ref int realWidth, ref int realHeight, ref int realContentWidth, ref int realContentHeight)
{
    ArgumentNullException.ThrowIfNull(popup.Content);

    var density = context.Resources?.DisplayMetrics?.Density ?? throw new InvalidOperationException($"Unable to determine density. {nameof(context.Resources.DisplayMetrics)} cannot be null");
    var view = popup.Content.ToPlatform();

    if (popup.Size.IsZero)
    {
        if (double.IsNaN(popup.Content.Width) || double.IsNaN(popup.Content.Height))
        {
            if (view is not null)
            {
                bool isRootView = true;
                Measure(
                    view,
                    (int)(double.IsNaN(popup.Content.Width) ? windowSize.Width : (int)context.ToPixels(popup.Content.Width)),
                    (int)(double.IsNaN(popup.Content.Height) ? windowSize.Height : (int)context.ToPixels(popup.Content.Height)),
                    double.IsNaN(popup.Content.Width) && popup.HorizontalOptions != LayoutAlignment.Fill,
                    double.IsNaN(popup.Content.Height) && popup.VerticalOptions != LayoutAlignment.Fill,
                    ref isRootView
                );
                realContentWidth = view.MeasuredWidth;
                realContentHeight = view.MeasuredHeight;
            }

            if (double.IsNaN(popup.Content.Width))
            {
                realContentWidth = popup.HorizontalOptions == LayoutAlignment.Fill ? (int)windowSize.Width : realContentWidth;
            }
            if (double.IsNaN(popup.Content.Height))
            {
                realContentHeight = popup.VerticalOptions == LayoutAlignment.Fill ? (int)windowSize.Height : realContentHeight;
            }
        }
        else
        {
            realContentWidth = (int)context.ToPixels(popup.Content.Width);
            realContentHeight = (int)context.ToPixels(popup.Content.Height);
        }
    }
    else
    {
        ... omit
    }
    ... omit
}

[src\CommunityToolkit.Maui.Core\Views\Popup\PopupExtensions.macios.cs]

public static void SetSize(this MauiPopup mauiPopup, in IPopup popup)
{
    ArgumentNullException.ThrowIfNull(popup.Content);

    CGRect frame;

    if (mauiPopup.ViewController?.View?.Window is UIWindow window)
    {
        frame = window.Frame;
    }
    else
    {
        frame = UIScreen.MainScreen.Bounds;
    }

    CGSize currentSize;

    if (popup.Size.IsZero)
    {
        if (double.IsNaN(popup.Content.Width) || double.IsNaN(popup.Content.Height))
        {
            var content = popup.Content.ToPlatform(popup.Handler?.MauiContext ?? throw new InvalidOperationException($"{nameof(popup.Handler.MauiContext)} Cannot Be Null"));
            var contentSize = content.SizeThatFits(new CGSize(double.IsNaN(popup.Content.Width) ? frame.Width : popup.Content.Width, double.IsNaN(popup.Content.Height) ? frame.Height : popup.Content.Height));
            var width = contentSize.Width;
            var height = contentSize.Height;

            if (double.IsNaN(popup.Content.Width))
            {
                width = popup.HorizontalOptions == Microsoft.Maui.Primitives.LayoutAlignment.Fill ? frame.Size.Width : width;
            }
            if (double.IsNaN(popup.Content.Height))
            {
                height = popup.VerticalOptions == Microsoft.Maui.Primitives.LayoutAlignment.Fill ? frame.Size.Height : height;
            }

            currentSize = new CGSize(width, height);
        }
        else
        {
            currentSize = new CGSize(popup.Content.Width, popup.Content.Height);
        }
    }
    else
    {
        currentSize = new CGSize(popup.Size.Width, popup.Size.Height);
    }

#if MACCATALYST
    currentSize.Width = NMath.Min(currentSize.Width, frame.Size.Width - defaultPopoverLayoutMargin * 2 - popupMargin * 2);
    currentSize.Height = NMath.Min(currentSize.Height, frame.Size.Height - defaultPopoverLayoutMargin * 2 - popupMargin * 2);
#else
    currentSize.Width = NMath.Min(currentSize.Width, frame.Size.Width);
    currentSize.Height = NMath.Min(currentSize.Height, frame.Size.Height);
#endif
    mauiPopup.PreferredContentSize = currentSize;
}

[src\CommunityToolkit.Maui.Core\Views\Popup\PopupExtensions.windows.cs]

public static void SetSize(this Popup mauiPopup, IPopup popup, IMauiContext? mauiContext)
{
    ArgumentNullException.ThrowIfNull(mauiContext);
    ArgumentNullException.ThrowIfNull(popup.Content);

    const double defaultBorderThickness = 0;
    const double defaultSize = 600;

    var popupParent = mauiContext.GetPlatformWindow();
    var currentSize = new Size { Width = defaultSize, Height = defaultSize / 2 };

    if (popup.Size.IsZero)
    {
        if (double.IsNaN(popup.Content.Width) || (double.IsNaN(popup.Content.Height)))
        {
            currentSize = popup.Content.Measure(double.IsNaN(popup.Content.Width) ? popupParent.Bounds.Width : popup.Content.Width, double.IsNaN(popup.Content.Height) ? popupParent.Bounds.Height : popup.Content.Height);

            if (double.IsNaN(popup.Content.Width))
            {
                currentSize.Width = popup.HorizontalOptions == LayoutAlignment.Fill ? popupParent.Bounds.Width : currentSize.Width;
            }
            if (double.IsNaN(popup.Content.Height))
            {
                currentSize.Height = popup.VerticalOptions == LayoutAlignment.Fill ? popupParent.Bounds.Height : currentSize.Height;
            }
        }
        else
        {
            currentSize.Width = popup.Content.Width;
            currentSize.Height = popup.Content.Height;
        }
    }
    else
    {
        currentSize.Width = popup.Size.Width;
        currentSize.Height = popup.Size.Height;
    }

    currentSize.Width = Math.Min(currentSize.Width, popupParent.Bounds.Width);
    currentSize.Height = Math.Min(currentSize.Height, popupParent.Bounds.Height);

    mauiPopup.Width = currentSize.Width;
    mauiPopup.Height = currentSize.Height;
    mauiPopup.MinWidth = mauiPopup.MaxWidth = currentSize.Width + (defaultBorderThickness * 2);
    mauiPopup.MinHeight = mauiPopup.MaxHeight = currentSize.Height + (defaultBorderThickness * 2);

    if (mauiPopup.Child is FrameworkElement control)
    {
        control.Width = mauiPopup.Width;
        control.Height = mauiPopup.Height;
    }
}

Fixed the width and height passed when calling the Measure method when the Popup size is unspecified.
If the Popup size is unspecified and the Popup Content Size is unspecified, the screen size is passed. If the Popup size is unspecified and the Popup Content size is specified, the Popup Content size is passed. I have modified it as follows.

Linked Issues

Fixes [BUG] [Popup][Android] HorizontalTextAlignment Not working #1450

PR Checklist

Has a linked Issue, and the Issue has been approved(bug) or Championed (feature/proposal)
Has tests (if omitted, state reason in description)
Has samples (if omitted, state reason in description)
Rebased on top of main at time of PR
Changes adhere to coding standard
Documentation created or updated: https://github.com/MicrosoftDocs/CommunityToolkit/pull/XYZ

Additional information

Below are the verification results for the first modification.

I tested it with the following layout.

<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="MauiComm_VerityPopupSize.PopupPage1"
    Size="320,240"
    Color="Transparent">
    <Grid>
        <Label Text="Hello, World!" FontSize="32" BackgroundColor="LightBlue" VerticalTextAlignment="Center"  HorizontalTextAlignment="Center" />
        <Button Text="Click me" VerticalOptions="Start" HorizontalOptions="Center" />
    </Grid>
</toolkit:Popup>

These are the execution results for each platform.

[Android]	[iOS]	[Windows]

You can see that the Popup is displayed as expected on all platforms.

Below are the verification results for the second modification.

I tested it with the following layout.

<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="MauiComm_VerityPopupSize.PopupPage1"
    Color="Transparent">
    <Grid WidthRequest="320">
        <Label Text="Hello, World!" FontSize="32" BackgroundColor="LightBlue" VerticalTextAlignment="Center"  HorizontalTextAlignment="Center" />
        <Button Text="Click me" VerticalOptions="Start" HorizontalOptions="Center" />
    </Grid>
</toolkit:Popup>

These are the execution results for each platform.

[Android]	[iOS]	[Windows]
Android.Emulator.-.pixel_2_-_api_30_5554.2023-10-13.15-35-33.mp4	iPhone.14.iOS.16.4.2023-10-13.15-30-07.mp4	2023-10-13.15-38-14.mp4

I tested it with the following layout.

<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="MauiComm_VerityPopupSize.PopupPage1"
    Color="Transparent">
    <Grid HeightRequest="240">
        <Label Text="Hello, World!" FontSize="32" BackgroundColor="LightBlue" VerticalTextAlignment="Center"  HorizontalTextAlignment="Center" />
        <Button Text="Click me" VerticalOptions="Start" HorizontalOptions="Center" />
    </Grid>
</toolkit:Popup>

These are the execution results for each platform.

[Android]	[iOS]	[Windows]
Android.Emulator.-.pixel_2_-_api_30_5554.2023-10-13.15-43-52.mp4	iPhone.14.iOS.16.4.2023-10-13.15-46-39.mp4	2023-10-13.15-41-45.mp4

You can see that the Popup is displayed as expected on all platforms.

Finally, the results of verification that there is no impact on PRs created so far are shown below.

I tested it with the following layout. [Confirm Issue #1423]

<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"
    Size="300,300"
    HorizontalOptions="Center"
    VerticalOptions="Center"
    x:Class="MauiComm_VerityPopupSize.PopupPage4">

    <Grid>
        <Grid ColumnDefinitions="*" RowDefinitions="auto,auto,auto" >
            <Label x:Name="testlabel1" BackgroundColor="Red" HorizontalTextAlignment="Center" />
            <Label x:Name="testlabel2" Grid.Row="1" />

            <VerticalStackLayout Grid.Row="2" Spacing="4">
                <Label x:Name="testlabel3" BackgroundColor="Red" HorizontalTextAlignment="Center"></Label>
                <Label x:Name="testlabel4"></Label>
            </VerticalStackLayout>
        </Grid>

        <Grid WidthRequest="10" HeightRequest="10" BackgroundColor="Blue" VerticalOptions="Start" HorizontalOptions="Start" />
        <Grid WidthRequest="10" HeightRequest="10" BackgroundColor="Blue" VerticalOptions="Start" HorizontalOptions="End" />
        <Grid WidthRequest="10" HeightRequest="10" BackgroundColor="Blue" VerticalOptions="End" HorizontalOptions="Start" />
        <Grid WidthRequest="10" HeightRequest="10" BackgroundColor="Blue" VerticalOptions="End" HorizontalOptions="End" />
    </Grid>
</toolkit:Popup>

These are the execution results for each platform.

[Android]	[iOS]	[Windows]

I tested it with the following layout. [Confirm Issue #1353]

<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="MauiComm_VerityPopupSize.PopupPage5">

    <VerticalStackLayout>
        <Label Text="Popup" FontSize="20"/>
        <BoxView HeightRequest="3" Color="AliceBlue" />
        <Label x:Name="txt1" Text="Short String" />
        <Label x:Name="txt2" Text="Long String1 Long String2 Long String3 Long String4 Long String5 Long String6 Long String7 Long String8 Long String9 Long String10 Long String" />
    </VerticalStackLayout>
</toolkit:Popup>

These are the execution results for each platform.

[Android]	[iOS]	[Windows]

I tested it with the following layout. [Confirm PR #1361]

<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="MauiComm_VerityPopupSize.PopupPage2">
    <Grid>
        <Label Text="1234567890ABCDEFGHIJKLMNOPQRSTUVWXYZ" TextColor="Black" HorizontalOptions="Start" />
    </Grid>
</toolkit:Popup>

These are the execution results for each platform.

[Android]	[iOS]	[Windows]
Android.Emulator.-.pixel_2_-_api_30_5554.2023-10-13.16-31-44.mp4	iPhone.14.iOS.16.4.2023-10-13.16-29-04.mp4	2023-10-13.16-34-15.mp4

You can see that the Popup is displayed as expected on all platforms.

… of size calculation when Popup Size is not specified

cat0363 · 2023-10-13T07:57:59Z

The code used for verification is below.
https://github.com/cat0363/MauiComm-VerifyPopupSize.git

brminnick

Great fix! Thanks @cat0363!!

Addition of size calculation for Label placed in Popup and correction…

0f711a5

… of size calculation when Popup Size is not specified

cat0363 and others added 3 commits October 16, 2023 10:50

Merge branch 'main' into Issue-1450

9177e4e

Merge branch 'main' into Issue-1450

e80b9d5

Merge branch 'main' into Issue-1450

49396a7

brminnick enabled auto-merge (squash) October 22, 2023 13:39

brminnick approved these changes Oct 22, 2023

View reviewed changes

brminnick merged commit 030bc61 into CommunityToolkit:main Oct 22, 2023
7 checks passed

This was referenced Nov 15, 2023

Change in Popup Size measurement method #1520

Closed

[BUG] Android: Popup with Grid and ScrollView fills the whole screen #1516

Closed

cat0363 mentioned this pull request Mar 19, 2024

Fix an issue with Popup size and position on Android #1683

Merged

6 tasks

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Addition of size calculation for Label placed in Popup and correction of size calculation when Popup Size is not specified #1456

Addition of size calculation for Label placed in Popup and correction of size calculation when Popup Size is not specified #1456

cat0363 commented Oct 13, 2023

cat0363 commented Oct 13, 2023

brminnick left a comment

Addition of size calculation for Label placed in Popup and correction of size calculation when Popup Size is not specified #1456

Addition of size calculation for Label placed in Popup and correction of size calculation when Popup Size is not specified #1456

Conversation

cat0363 commented Oct 13, 2023

Description of Change

Linked Issues

PR Checklist

Additional information

cat0363 commented Oct 13, 2023

brminnick left a comment

Choose a reason for hiding this comment