.NET MAUI MVVM应用中CommunityToolkit Popup内容超出控件范围

在MVVM架构的.NET MAUI应用里，使用CommunityToolkit的toolkit:Popup组件时，XAML内的控件内容超出了Popup的可见范围，具体表现为文本被截断、边界溢出（见下图）。

弹窗XAML代码 #

<?xml version="1.0" encoding="utf-8" ?>
<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="MyApp.Controls.AlertPopup">
    <Grid
        BackgroundColor="#333333"
        WidthRequest="150"
        Margin="20">
        <Grid.ColumnDefinitions>
            <ColumnDefinition Width="auto" />
        </Grid.ColumnDefinitions>
        <Grid.RowDefinitions>
            <RowDefinition Height="Auto"/>
            <RowDefinition Height="Auto"/>
            <RowDefinition Height="Auto"/>
        </Grid.RowDefinitions>
        <Label
            Grid.Column="0"
            Grid.Row="0"
            Text="My title" />
        <Label 
            Grid.Column="0"
            Grid.Row="1"
            Text="lorem ipsum dolor amet lorem ipsum dolor amet lorem ipsum dolor amet " />
        <Button
            Grid.Column="0"
            Grid.Row="2"
            Text="Continue" />
    </Grid>
</toolkit:Popup>

ViewModel中显示弹窗的代码 #

[ICommand]
async Task DisplayPopup()
{
    Shell.Current.CurrentPage.ShowPopup(new MyApp.Controls.AlertPopup());
}

问题截图 #

解决方法 #

问题核心是Popup未设置合适的尺寸约束、文本未开启自动换行，以下是针对性修复方案：

1. 给Popup添加尺寸限制：直接在toolkit:Popup节点上设置宽度约束，避免内容无边界扩展
2. 开启文本自动换行：给长文本Label添加换行属性，让内容在Popup宽度内自动折行
3. 调整Grid布局逻辑：将Grid列宽从auto改为*，让列自适应Popup宽度，同时添加内边距优化显示

修改后的XAML代码：

<?xml version="1.0" encoding="utf-8" ?>
<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="MyApp.Controls.AlertPopup"
               WidthRequest="300"
               MaximumWidthRequest="350">
    <Grid
        BackgroundColor="#333333"
        Margin="20"
        Padding="15">
        <Grid.ColumnDefinitions>
            <ColumnDefinition Width="*" />
        </Grid.ColumnDefinitions>
        <Grid.RowDefinitions>
            <RowDefinition Height="Auto"/>
            <RowDefinition Height="Auto"/>
            <RowDefinition Height="Auto"/>
        </Grid.RowDefinitions>
        <Label
            Grid.Column="0"
            Grid.Row="0"
            Text="My title"
            TextColor="White" />
        <Label 
            Grid.Column="0"
            Grid.Row="1"
            Text="lorem ipsum dolor amet lorem ipsum dolor amet lorem ipsum dolor amet "
            LineBreakMode="WordWrap"
            TextColor="White" />
        <Button
            Grid.Column="0"
            Grid.Row="2"
            Text="Continue"
            Margin="0,10,0,0" />
    </Grid>
</toolkit:Popup>

如果弹窗内容可能过长，还可以给Grid套一层ScrollView，确保用户能滚动查看全部内容：

<toolkit:Popup ...>
    <ScrollView MaximumHeightRequest="400">
        <Grid ...>
            <!-- 原有控件 -->
        </Grid>
    </ScrollView>
</toolkit:Popup>

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