如何在 .NET Maui 中制作模态多窗口？

Question

我正在通过

Application.Current.OpenWindow()

在 .NET Maui 打开第二个窗口，并且想知道是否有解决方案使第二个窗口成为“模态”（例如，必须先关闭第二个窗口，然后才能再次与父窗口交互）。我在网上做了一些研究，遇到了一些死胡同。我仍在学习 Maui、Blazor 和 XAML 的过程中，所以如果我混淆了一些术语，我感谢您的理解。

在我的 Razor 组件 (DialogueTest.razor) 中，我使用此函数来启动第二个窗口。

public void ModalWindowLaunch()
   {
       Window secondWindow = new Window()
           {
               Page = new WindowPage(),
           };
       Application.Current.OpenWindow(secondWindow);
   }

此函数使用我创建的类 WindowPage，它继承自 ContentPage

public partial class WindowPage : ContentPage

在本课程中，我基于此 Microsoft Learn 帖子添加了以下代码。

var mauiWindow = this.Window.Handler.VirtualView;
var nativeWindow = this.Window.Handler.PlatformView as Microsoft.Maui.MauiWinUIWindow;
nativeWindow.Activate();
IntPtr windowHandle = WinRT.Interop.WindowNative.GetWindowHandle(nativeWindow);
var windowId = Microsoft.UI.Win32Interop.GetWindowIdFromWindow(windowHandle);
var appWindow = Microsoft.UI.Windowing.AppWindow.GetFromWindowId(windowId);
var p = appWindow.Presenter as Microsoft.UI.Windowing.OverlappedPresenter;
p.IsModal = true;

但是，我得到一个例外：“当 IsModal=true 时，窗口应该有一个所有者”。我一直无法找到有关如何在毛伊岛向父窗口分配所有权的任何线索，因为似乎需要在创建时分配所有权，但 Application.Current.OpenWindow 正在创建没有所有权的窗口（可能是错误的）这个）。

我也尝试过

await Navigation.PushModalAsync(new WindowPage());

，但是当新的 Page 对象被推送到模式堆栈上时，这不会显示父窗口（我想避免的行为，我希望两个窗口都可见，而父窗口不可见）互动）

我的做法不正确吗？我应该通过 Maui 禁用/冻结父窗口，而不是尝试使用 WinUI 进行更改吗？任何提示或建议将不胜感激。

Answer 1

想知道是否有解决方案使第二个窗口成为“模态” （例如，必须先关闭第二个窗口，然后才能与 再次返回父窗口）。

一开始想用

Popup of .NET MAUI Community Toolkit

来实现，但是在Blazor中无法使用。

但是，您可以使用以下代码来实现：

创建一个 ，然后添加一个

Razor Component

，命名为：Modalpopuplayout.razor:

@inherits LayoutComponentBase


@Body


@code {


}

对于 Index.razor，更改为：

@page "/"
@layout Modalpopuplayout
<button @onclick="()=>{ispopup=true;}" class="btn btn-light" type="button" data-bs-dismiss="modal">Show Modal</button>


@if (ispopup)
{
    <div class="modal fade show" role="dialog" tabindex="-1" id="modal-1" style="display: block;    background-color: #0000005c;">
        <div class="modal-dialog" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <h4 class="modal-title">Modal Title</h4>
                    <button type="button" @onclick="()=>{ispopup=false;}" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
                <div class="modal-body">
                    <p>The content of your modal.</p>
                </div>
                <div class="modal-footer">
                    <button class="btn btn-light" @onclick="()=>{ispopup=false;}" type="button" data-bs-dismiss="modal">Close</button>
                    <button class="btn btn-primary" type="button">Save</button>
                </div>
            </div>
        </div>
    </div>


}

@code {
    bool ispopup = false;
    }

运行项目，这是。

另外，您还可以参考本案例的解决方案：使用C#方法在Blazor中创建弹窗。