net maui 弹出窗口超出了 MVVM 应用程序的控制范围？

Question

我正在尝试使用工具包：来自 CommunityToolkit 的 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>

在 MVVM 视图模型中显示弹出窗口

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

Answer 1

您可以在 Maui 弹出窗口中使用元素属性的

Size

。

获取或设置弹出窗口显示的大小。除非指定了 Size，否则 Popup 将始终尝试将 Popup 的实际大小限制为 View 的大小。如果 Popup 使用非默认值的 HorizontalOptions 或 VerticalOptions 属性，则需要此 Size 属性。

---

更新

对于网格，我发现

widthrequest

控制弹出窗口宽度，但

<ColumnDefinition Width="auto" /> 

控制文本和元素宽度。因此，您需要设置 ColumnWidth 以匹配弹出窗口的宽度。