Popup in MAUI cropped when including a multiline label

Question

I'm trying to generate custom popups in .Net MAUI to give some informations and messages in my application. I'm meeting an issue, when the text message displayed in my popup is longer than one line, the popup gets cropped and thebuttons at the bottom aren't fully displayed.

For example :

Single line label:

Multi line label:

The XAML code of my Popup

<?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"
           xmlns:utils="clr-namespace:MauiUtils"
           x:Class="MauiUtils.Popups.DialogPopup"
           CanBeDismissedByTappingOutsideOfPopup="True">
    <Grid MinimumWidthRequest="350" HorizontalOptions="FillAndExpand" Background="Transparent">

        <Grid.RowDefinitions>
            <RowDefinition Height="Auto"/>
            <RowDefinition Height="Auto"/>
            <RowDefinition Height="Auto"/>
        </Grid.RowDefinitions>

        <Grid Grid.Row="0" HorizontalOptions="FillAndExpand" Background="Transparent">
            <Grid.ColumnDefinitions>
                <ColumnDefinition Width="1*"/>
                <ColumnDefinition Width="Auto"/>
                <ColumnDefinition Width="2*"/>
                <ColumnDefinition Width="1*"/>
            </Grid.ColumnDefinitions>
            <utils:ImageTintColor x:Name="PopupIcon" Grid.Column="1" IsVisible="False" StyleClass="Popup" MaximumHeightRequest="40" MaximumWidthRequest="40" Margin="0, 5, 0, 5"/>
            <Label Grid.Column="2" x:Name="PopupTitle" HorizontalTextAlignment="Center" VerticalTextAlignment="Center" FontSize="Large" FontAttributes="Bold" Text="" MaximumWidthRequest="350" StyleClass="Popup"/>
        </Grid>

        <Grid Grid.Row="1">
            <Label x:Name="PopupContent" HorizontalTextAlignment="Center" FontSize="Medium" Margin="10" Text=""  StyleClass="Popup" VerticalOptions="FillAndExpand"/>
        </Grid>
         
        <Grid Grid.Row="2" Margin="0,0,0,10" Background="Transparent">
            <Grid.ColumnDefinitions>
                <ColumnDefinition Width="1*"/>
                <ColumnDefinition x:Name="TogglableColumn" Width="1*"/>
            </Grid.ColumnDefinitions>
            <Button x:Name="ConfirmBtn" Grid.Column="0" Text="" HorizontalOptions="Fill" Margin="20, 0, 20, 0" FontSize="Medium" Clicked="ComfirmBtn_Clicked" StyleClass="Popup"/>
            <Button x:Name="CancelBtn" Grid.Column="1" Text="" HorizontalOptions="Fill" Margin="20, 0, 20, 0" FontSize="Medium" Clicked="CancelBtn_Clicked" IsVisible="True" StyleClass="Popup"/>
        </Grid>
    </Grid>
</mct:Popup>

The associated C# code :

using CommunityToolkit.Maui.Views;
using System.Diagnostics;

namespace MauiUtils.Popups;

public partial class DialogPopup : Popup
{
    readonly Action ConfirmMethod;
    readonly Action CancelMethod;

    public DialogPopup(Action _ConfirmMethod = null, Action _CancelMethod = null, string _Title = "Dialog", string _IconSource = "", string _Content = "Lorem ipsum", bool _ShowCancelBtn = true, string _ConfirmBtnLabel = "Yes", string _CancelBtnLabel = "No", bool _TapOutDismiss = true)
    {
        ConfirmMethod = _ConfirmMethod;
        CancelMethod = _CancelMethod;
        this.CanBeDismissedByTappingOutsideOfPopup = _TapOutDismiss;

        InitializeComponent();

        PopupTitle.Text = _Title;

        if (_IconSource != "")
        {
            try
            {
                PopupIcon.Source = _IconSource;
                PopupIcon.IsVisible = true;
            }
            catch (Exception ex)
            {
                Debug.WriteLine(ex);
            }
        }

        PopupContent.Text = _Content;
        ConfirmBtn.Text = _ConfirmBtnLabel;
        CancelBtn.IsVisible = _ShowCancelBtn;
        if (!CancelBtn.IsVisible)
        {
            TogglableColumn.Width = new GridLength(0);
        }
        CancelBtn.Text = _CancelBtnLabel;
    }

    private void ComfirmBtn_Clicked(object sender, EventArgs e)
    {
        ConfirmMethod?.Invoke();
        Close();
    }

    private void CancelBtn_Clicked(object sender, EventArgs e)
    {
        CancelMethod?.Invoke();
        Close();
    }
}

Answer 1

Extensive use of auto-sizing with Grids is discouraged. Since you're only using rows for the outer Grid, you may want to change that to a VerticalStackLayout, which should resolve the layout issue with regards to the multiline label:

<?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"
           xmlns:utils="clr-namespace:MauiUtils"
           x:Class="MauiUtils.Popups.DialogPopup"
           CanBeDismissedByTappingOutsideOfPopup="True">

    <VerticalStackLayout MinimumWidthRequest="350" HorizontalOptions="Fill" Background="Transparent">

        <Grid HorizontalOptions="Fill" Background="Transparent">
            <Grid.ColumnDefinitions>
                <ColumnDefinition Width="1*"/>
                <ColumnDefinition Width="Auto"/>
                <ColumnDefinition Width="2*"/>
                <ColumnDefinition Width="1*"/>
            </Grid.ColumnDefinitions>
            <utils:ImageTintColor x:Name="PopupIcon" Grid.Column="1" IsVisible="False" StyleClass="Popup" MaximumHeightRequest="40" MaximumWidthRequest="40" Margin="0, 5, 0, 5"/>
            <Label Grid.Column="2" x:Name="PopupTitle" HorizontalTextAlignment="Center" VerticalTextAlignment="Center" FontSize="Large" FontAttributes="Bold" Text="" MaximumWidthRequest="350" StyleClass="Popup"/>
        </Grid>

        <Grid>
            <Label x:Name="PopupContent" HorizontalTextAlignment="Center" FontSize="Medium" Margin="10" Text="" StyleClass="Popup" VerticalOptions="Center"/>
        </Grid>
         
        <Grid Margin="0,0,0,10" Background="Transparent">
            <Grid.ColumnDefinitions>
                <ColumnDefinition Width="1*"/>
                <ColumnDefinition x:Name="TogglableColumn" Width="1*"/>
            </Grid.ColumnDefinitions>
            <Button x:Name="ConfirmBtn" Grid.Column="0" Text="" HorizontalOptions="Fill" Margin="20, 0, 20, 0" FontSize="Medium" Clicked="ComfirmBtn_Clicked" StyleClass="Popup"/>
            <Button x:Name="CancelBtn" Grid.Column="1" Text="" HorizontalOptions="Fill" Margin="20, 0, 20, 0" FontSize="Medium" Clicked="CancelBtn_Clicked" IsVisible="True" StyleClass="Popup"/>
        </Grid>

    </VerticalStackLayout>

</mct:Popup>

Alternatively, if you want to stick to a Grid on the outside, you could also try changing the values of the row definitions and limit the use of auto to a single row or use * instead:

<Grid.RowDefinitions>
    <RowDefinition Height="50"/>
    <RowDefinition Height="auto"/>
    <RowDefinition Height="80"/>
</Grid.RowDefinitions>

Or:

<Grid.RowDefinitions>
    <RowDefinition Height="50"/>
    <RowDefinition Height="*"/>
    <RowDefinition Height="80"/>
</Grid.RowDefinitions>

Also note that the *AndExpand LayoutOptions are deprecated in MAUI and will be removed in a future version.