.NET MAUI中含多行Label的Popup被裁剪问题

我在.NET MAUI中基于CommunityToolkit.Maui的Popup实现自定义弹窗，用于展示应用内信息与消息。当前遇到的问题是：当Popup中显示的文本消息超过一行时，弹窗会被裁剪，底部的按钮无法完整显示。

示例：
单行Label的Popup：

多行Label的Popup：

当前使用的XAML代码 #

<?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>

关联的C#代码 #

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();
    }
}

解决方法 #

1. 调整Popup的尺寸约束 #

在<mct:Popup>标签中添加Size和MaximumHeightRequest，让Popup宽度固定、高度自适应内容，同时限制最大高度避免超出屏幕：

<mct:Popup xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
           ...
           MaximumHeightRequest="800"
           Size="350,-1">

Size="350,-1"表示宽度设为350，高度设为-1即自动适配内容高度。

2. 优化内容Label的换行与布局 #

给PopupContent添加LineBreakMode="WordWrap"确保文本自动换行，同时移除VerticalOptions="FillAndExpand"避免不必要的拉伸：

<Label x:Name="PopupContent" HorizontalTextAlignment="Center" 
       FontSize="Medium" Margin="10" Text="" StyleClass="Popup"
       LineBreakMode="WordWrap"/>

3. 添加滚动容器防止内容溢出 #

如果文本内容过长，给中间内容行的Grid嵌套ScrollView，这样用户可以滚动查看完整文本，底部按钮始终保持可见：

<Grid Grid.Row="1">
    <ScrollView VerticalOptions="FillAndExpand" MaximumHeightRequest="400">
        <Label x:Name="PopupContent" HorizontalTextAlignment="Center" 
               FontSize="Medium" Margin="10" Text="" StyleClass="Popup"
               LineBreakMode="WordWrap"/>
    </ScrollView>
</Grid>

4. 优化外层Grid的垂直布局 #

给外层Grid设置VerticalOptions="Center"，让弹窗在屏幕中垂直居中，避免内容过长时超出屏幕范围：

<Grid MinimumWidthRequest="350" HorizontalOptions="FillAndExpand" 
      Background="Transparent" VerticalOptions="Center">

内容的提问来源于stack exchange，提问作者GChapX