.NET Maui CommunityToolkit.Maui Popup labels in Android positioning wrong

Question

I recently did an App with .NET MAUI that had no errors, but last day I opened it to try and update a new compilation, I found out that all the labels in the Popups appear way more on the bottom than intended, cutting the label, and if I try to apply a padding to rise it up, it appears more up but cut the same way.

This, is only happening on Android, while on iOS everything is still good as it was before the update.

The only thing I changed during that update was some updated to NuGet Packages (including the CommunityToolkit), and I checked other Maui projects I have with popups, and having the same packages with the same versions, I don't have this problem.

I tried making a new project, copying the same code and the problem was still there.

The code of the label inside the popup is:

<?xml version="1.0" encoding="utf-8" ?>
<mct:Popup xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             xmlns:mct ="clr-namespace:CommunityToolkit.Maui.Views;assembly=CommunityToolkit.Maui"
             x:Class="Project.Popups.PopUp_Continue"
             >
    <VerticalStackLayout HorizontalOptions="Center" VerticalOptions="Fill" x:Name="vStack" HeightRequest="205">

        <Label x:Name="Lbl_Message"
               VerticalOptions="Center" 
               HorizontalOptions="Center"
               FontAttributes="Bold"
               FontSize="23"
               HorizontalTextAlignment="Center"
               FontAutoScalingEnabled="False"
               HeightRequest="120"
               VerticalTextAlignment="Center"
               Margin="10,10,10,0"
               />

        <HorizontalStackLayout Margin="0,10,0,10" x:Name="hStack" HorizontalOptions="Center" HeightRequest="55">      
            <Button x:Name="Btn_No" Clicked="Btn_No_Clicked" BackgroundColor="IndianRed" Text="Cancelar" HeightRequest="55" FontSize="20" FontFamily="" FontAttributes="Bold" HorizontalOptions="Center" Margin="0,0,10,0" FontAutoScalingEnabled="False"/>
            <Button x:Name="Btn_Yes" Clicked="Btn_Yes_Clicked" BackgroundColor="Green" Text="Aceptar" HeightRequest="55" FontSize="20" FontFamily="" FontAttributes="Bold" HorizontalOptions="Center" Margin="10,0,0,0" FontAutoScalingEnabled="False"/>
        </HorizontalStackLayout>

    </VerticalStackLayout>
</mct:Popup>

And it displays like this: https://drive.google.com/file/d/1HT1h-vP0_NqbcuQK71Ec0l_q1GSJPkn5/view?usp=sharing

Normally, it would display the label right in the center of the space between the button and the top of the Popup (since it doesn't work, I cannot show you an example)

Has somebody found and solved this problem?

Thanks.

Edits: After some investigation, I found out that the label seems to be vertically centering to the Popup height instead of centering to the height given to the label itself.

Manually setting the height of the label with Margins and Paddings, or following @H.A.H.'s comment, I'm getting this result:

@H.A.H.'s comment resulting code:

<?xml version="1.0" encoding="utf-8" ?>
<mct:Popup xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             xmlns:mct ="clr-namespace:CommunityToolkit.Maui.Views;assembly=CommunityToolkit.Maui"
             x:Class="Project.Popups.PopUp_Continue"
             >
    <VerticalStackLayout HorizontalOptions="Center" VerticalOptions="Fill" x:Name="vStack" HeightRequest="205">
        <Grid HeightRequest="120">
            <Label x:Name="Lbl_Message"
                   Margin="0,50,0,50"
                   VerticalOptions="Center" 
                   HorizontalOptions="Center"
                   FontAttributes="Bold"
                   FontSize="23"
                   FontAutoScalingEnabled="False"
                   />
        </Grid>
        <HorizontalStackLayout Margin="0,10,0,10" x:Name="hStack" HorizontalOptions="Center" HeightRequest="55">      
            <Button x:Name="Btn_No" Clicked="Btn_No_Clicked" BackgroundColor="IndianRed" Text="Cancelar" HeightRequest="55" FontSize="20" FontFamily="" FontAttributes="Bold" HorizontalOptions="Center" Margin="0,0,10,0" FontAutoScalingEnabled="False"/>
            <Button x:Name="Btn_Yes" Clicked="Btn_Yes_Clicked" BackgroundColor="Green" Text="Aceptar" HeightRequest="55" FontSize="20" FontFamily="" FontAttributes="Bold" HorizontalOptions="Center" Margin="10,0,0,0" FontAutoScalingEnabled="False"/>
        </HorizontalStackLayout>

    </VerticalStackLayout>
</mct:Popup>

Answer 1

Remove those lines:

Margin="10,10,10,0"
HeightRequest="120"
HorizontalTextAlignment="Center"
VerticalTextAlignment="Center"

Then, First way - wrap your control with Grid:

<Grid HeightRequest="120">
    <Label Text="Centered"
           VerticalOptions="Center" 
           HorizontalOptions="Center"

Second way - use margins top and bottom:

<Label Text="Centered"
           Margin="0,50,0,50"
           HorizontalOptions="Center"

Edit to clarify a bit:

Using the first way, you will end up with label with specific height. (The height you specify in your Grid wrapper). Setting Horizontal and Vertical options here will make sure the text is centered.

Using the second way, the height of the field will be equal to Margin top + bottom + the height of the control itself. (That you should not specify) So the height being variable, you let it rest in the Stack itself, not within wrapper.

Paddings are not needed in both cases.