如何在面向macOS的.NET MAUI Blazor应用中显示弹窗/模态框？

针对你遇到的三种方法都无法正常实现模态弹窗的问题，给出以下针对性解决步骤：

1. 确保页面处于NavigationPage导航结构中 #

Mac Catalyst对导航层级的要求比iOS更严格，若当前页面未被包裹在NavigationPage中，PushModalAsync会出现仅替换页面的异常。在App.xaml.cs中设置根页面：

MainPage = new NavigationPage(new MainPage());

2. 修复"The Parent must be of type Microsoft.Maui.Handlers.PageHandler"错误 #

这个错误是因为代码中错误地将模态弹窗的父级绑定到了View而非Page元素。确保在页面的事件处理中调用弹窗，示例代码：

private async void OpenModalBtn_Clicked(object sender, EventArgs e)
{
    await Navigation.PushModalAsync(new MyModalPage());
}

3. 解决PushModalAsync仅替换页面的问题 #

若调用PushModalAsync后看起来像是替换了原页面，可从两方面排查：

• 配置窗口场景：在项目的Info.plist中添加Mac Catalyst窗口配置，确保支持模态弹窗的层级显示：

  <key>UIApplicationSceneManifest</key>
  <dict>
      <key>UIApplicationSupportsMultipleScenes</key>
      <true/>
      <key>UISceneConfigurations</key>
      <dict>
          <key>UIWindowSceneSessionRoleApplication</key>
          <array>
              <dict>
                  <key>UISceneConfigurationName</key>
                  <string>Default Configuration</string>
                  <key>UISceneDelegateClassName</key>
                  <string>SceneDelegate</string>
                  <key>UISceneStoryboardFile</key>
                  <string>Main</string>
                  <key>UIScenePreferredConfiguration</key>
                  <dict>
                      <key>UISceneWindowLevel</key>
                      <integer>0</integer>
                  </dict>
              </dict>
          </array>
      </dict>
  </dict>
  

• 区分模态弹窗与原页面：给MyModalPage设置半透明背景或边框，比如：

  public MyModalPage()
  {
      InitializeComponent();
      BackgroundColor = Color.FromArgb("#CCFFFFFF"); // 半透明背景
  }
  

4. 替代方案：使用MAUI Community Toolkit的Popup控件 #

如果原生模态弹窗问题无法解决，推荐使用MAUI Community Toolkit的Popup控件，它对Mac Catalyst的兼容性更好：

1. 安装NuGet包CommunityToolkit.Maui
2. 在App.xaml.cs中初始化工具包：

   using CommunityToolkit.Maui;
   
   public static MauiApp CreateMauiApp()
   {
       var builder = MauiApp.CreateBuilder();
       builder
           .UseMauiApp<App>()
           .UseMauiCommunityToolkit();
       return builder.Build();
   }
   

3. 创建自定义Popup并调用：

   public class MyModalPopup : Popup
   {
       public MyModalPopup()
       {
           Content = new VerticalStackLayout
           {
               Padding = new Thickness(20),
               Children = {
                   new Label { Text = "这是模态弹窗" },
                   new Button { Text = "关闭", Command = new Command(() => Close()) }
               }
           };
       }
   }
   
   // 在页面中调用
   private async void OpenPopup_Clicked(object sender, EventArgs e)
   {
       await this.ShowPopupAsync(new MyModalPopup());
   }
   

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