如何在.NET MAUI主页面点击按钮显示CommunityToolkit弹窗？

你的错误在于自定义的PopupPage本身已经继承自toolkit:Popup，不需要再将它嵌套在toolkit:Popup标签中。正确的实现方式是通过代码后台（或MVVM命令）调用弹窗的显示方法，步骤如下：

1. 确认CommunityToolkit.Maui已正确初始化 #

在项目的MauiProgram.cs中，确保已添加初始化代码：

var builder = MauiApp.CreateBuilder();
builder
    .UseMauiApp<App>()
    // 添加CommunityToolkit初始化
    .UseMauiCommunityToolkit();

2. 在主页面添加触发按钮 #

修改MainPage.xaml，添加用于触发弹窗的按钮：

<ContentPage xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             x:Class="Myproject.MainPage"
             xmlns:local="clr-namespace:Myproject">

    <VerticalStackLayout>
        <!-- 触发弹窗的按钮 -->
        <Button Text="显示弹窗" Clicked="OnShowPopupClicked" />
    </VerticalStackLayout>
</ContentPage>

3. 实现按钮点击事件的弹窗逻辑 #

在MainPage.xaml.cs中，添加按钮点击事件的处理代码，实例化自定义弹窗并调用ShowAsync方法：

namespace Myproject;

public partial class MainPage : ContentPage
{
    public MainPage()
    {
        InitializeComponent();
    }

    private async void OnShowPopupClicked(object sender, EventArgs e)
    {
        // 实例化自定义弹窗
        var popup = new PopupPage();
        // 显示弹窗
        await this.ShowPopupAsync(popup);
    }
}

4. 确认PopupPage代码无需修改 #

你已创建的PopupPage.xaml代码是正确的，不需要做任何改动：

<toolkit:Popup xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             x:Class="Myproject.PopupPage"
             xmlns:toolkit="http://schemas.microsoft.com/dotnet/2022/maui/toolkit">
    <VerticalStackLayout>
        <Label 
            Text="Welcome to .NET MAUI!"
            VerticalOptions="Center" 
            HorizontalOptions="Center" />
    </VerticalStackLayout>
</toolkit:Popup>

这样点击按钮后就能正确显示你的自定义弹窗了。

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