How to show a popup/modal in a .NET MAUI Blazor app targeting macOS?

Question

I'm unable to get modals to work when targeting Mac Catalyst, and have tried 3 different approaches. The first approach was this video: https://www.youtube.com/watch?v=yM7opXlu-MU

That approach works great when targeting iOS, but when targeting Mac Catalyst I get this error: "The Parent must be of type Microsoft.Maui.Handlers.PageHandler."

The 2nd approach was with this video: https://www.youtube.com/watch?v=OGWhgASmSto

That approach just reset the ContentPage to the 2nd ContentPage, instead of actually presenting it as a modal. The 3rd approach was using await Navigation.PushModalAsync(new MyModalPage()); which also just reset the ContentPage to the 2nd ContentPage, instead of actually presenting it as a modal.

Any help with this would be greatly appreciated!

Answer 1

Update

I create a demo using default maui blazor project this time.

After I create a default maui blazor with default template, I switch to Counter page. I want to display the popup when i click the button (like the image below)

Here is a small demo for Counter.razor,

@using CommunityToolkit.Maui.Views;

@page "/counter"

<h1>Counter</h1>

<p role="status">Current count: @currentCount</p>

<button class="btn btn-primary" @onclick="IncrementCount">Open Popup</button>

@code {
    private int currentCount = 0;

    private void IncrementCount()
    {
        currentCount++;
        var popup = new PopupPage();
        App.Current.MainPage.ShowPopup(popup);

    }
}

Here is the screenshot,

---

It's a known issue on GitHub : MAUI Community Toolkit Popup Displayed Out Window Bounds On MacCatalyst , and it has been fixed in the latest Maui Community Toolkit and in .NET8.

I have tested it and here is the screenshot,

Please let me know if you have any question.