.NET MAUI Community toolkit - cannot center child views inside a Popup

Question

If I create a MAUI popup and I add a few labels, entries and buttons in a vertical stack layout, they appear at the top of the popup leaving an unaesthetic gap at the bottom. The problem: Issue on a read Android device:

Issue on a Pixel 5 simulator:

Same code works fine in a ContentPage:

VS 17.9.6 (tried 17.11.0 and got same result) .NET8 CommunityToolkit.MAUI 7.0.1 (tried 9.0.0 and got same results)

Initially I though to set VerticalOptions="CenterAndExpand" or VerticalOptions="FillAndExpand" on all the child views expecting them to space out vertically evenly. This didn't worked and it seems that it is not supposed to work: "Therefore, a vertically oriented StackLayout ignores the Start, Center, End, or Fill fields if they are set on the VerticalOptions properties of child views" source: https://learn.microsoft.com/en-us/dotnet/maui/user-interface/align-position?view=net-maui-8.0

I tough to try to set the Popup height be same as the sum of the heights of the child views. I can't do this because the Popup constructor is requesting me to say how big the Popup should be (which I think is irritating because in some applications, I may want to programmatically show of hide fields so I don't know how big it has to be)

Eventually I tried adding VerticalOptions="Center" to the main StackLayout. This solution works on a content page (if I paste the code in a content page), however it doesn't work on a Popup. I tried setting VerticalOptions="Center" to the Popup itself and hasn't worked.

Any of the below solutions would solve the issue but could not implement any of them:

• center the child views vertically
• evenly space out vertically child views
• make popup height be as big as the sum of the child views XAML:

<?xml version="1.0" encoding="utf-8" ?>
<mct:Popup x:Class="SLtest.SaveDialog"
            xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
            xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
            xmlns:mct="http://schemas.microsoft.com/dotnet/2022/maui/toolkit"
            CanBeDismissedByTappingOutsideOfPopup="False"
            VerticalOptions="Center">

    <VerticalStackLayout VerticalOptions="Center" BackgroundColor="Blue">
        <VerticalStackLayout x:Name="NotesSL" BackgroundColor="LightBlue">
            <Label x:Name="NotesLbl" Text="Notes"/>
            <Entry x:Name="NotesEntry"/>
        </VerticalStackLayout>
        <VerticalStackLayout x:Name="USFsl" BackgroundColor="LightCoral">
            <Label x:Name="USFlbl" Text="USF"/>
            <Entry x:Name="USFentry"/>
        </VerticalStackLayout>
        <Grid BackgroundColor="LightGreen">
            <Grid.RowDefinitions>
                <RowDefinition Height="*"/>
            </Grid.RowDefinitions>
            <Grid.ColumnDefinitions>
                <ColumnDefinition Width = "1*"/>
                <ColumnDefinition Width = "1*"/>
            </Grid.ColumnDefinitions>
            <Button Text="Cancel"
                    Margin="10,0"/>
            <Button Text="Save"
                    Clicked="Button_Clicked"
                    Margin="10,0"
                    Grid.Column="1"/>
        </Grid>
    </VerticalStackLayout>

</mct:Popup>

C#:

    using CommunityToolkit.Maui.Views;
    using SLtest.classes;
    
    namespace SLtest;
    
    public partial class SaveDialog : Popup
    {
        public SaveDialog(PopupSizeConstants popupSizeConstants)
        {
            InitializeComponent();
    
            Size = popupSizeConstants.Medium;
            ResultWhenUserTapsOutsideOfPopup = "User Tapped Outside of Popup";
        }
    
        async void Button_Clicked(object? sender, EventArgs e)
        {
            var cts = new CancellationTokenSource(TimeSpan.FromSeconds(5));
            await CloseAsync("Close button tapped", cts.Token);
        }
    }

Answer 1

I create a project and add a Popup that the code you provided:

<?xml version="1.0" encoding="utf-8" ?>
<mct:Popup x:Class="SLtest.SaveDialog"
            xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
            xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
            xmlns:mct="http://schemas.microsoft.com/dotnet/2022/maui/toolkit"
            CanBeDismissedByTappingOutsideOfPopup="False"
            VerticalOptions="Center">

    <VerticalStackLayout VerticalOptions="Center" BackgroundColor="Blue">
        <VerticalStackLayout x:Name="NotesSL" BackgroundColor="LightBlue">
            <Label x:Name="NotesLbl" Text="Notes"/>
            <Entry x:Name="NotesEntry"/>
        </VerticalStackLayout>
        <VerticalStackLayout x:Name="USFsl" BackgroundColor="LightCoral">
            <Label x:Name="USFlbl" Text="USF"/>
            <Entry x:Name="USFentry"/>
        </VerticalStackLayout>
        <Grid BackgroundColor="LightGreen">
            <Grid.RowDefinitions>
                <RowDefinition Height="*"/>
            </Grid.RowDefinitions>
            <Grid.ColumnDefinitions>
                <ColumnDefinition Width = "1*"/>
                <ColumnDefinition Width = "1*"/>
            </Grid.ColumnDefinitions>
            <Button Text="Cancel"
                    Margin="10,0"/>
            <Button Text="Save"
                    Clicked="Button_Clicked"
                    Margin="10,0"
                    Grid.Column="1"/>
        </Grid>
    </VerticalStackLayout>

</mct:Popup>

But I do not add this line of code:

Size = popupSizeConstants.Medium;

Set WidthRequest of VertialStackLayout to 250, here is the effect.