.NET MAUI Community Toolkit Popup PopupHandler is incompatible - popup

Question

I started working with .NET MAUI. I ran into a problem just by starting my development.
I want to show a popup and I'm using the Community Toolkit.
All I did is:
I created a new .NET MAUI Application Project, installed the Community Toolkit NuGet Package (of course also the .UseMauiCommunityToolkit in the start up class) and added a XAML File for the Popup:
<?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="TestApp.ProfilePopup">
<VerticalStackLayout>
<Label Text="This is a very important message!" />
</VerticalStackLayout>
</toolkit:Popup>
I've no partial class for this popup
I just modified the button on MainPage to display the popup:
private void OnCounterClicked(object sender, EventArgs e)
{
var popup = new ProfilePopup();
this.ShowPopup(popup);
}
If I run this application and click on the button to display the popup I'll get the error message:
CommunityToolkit.Maui.Core.Handlers.PopupHandler found for TestApp.ProfilePopup is incompatible
If I create the popup in C#, it works:
private void OnCounterClicked(object sender, EventArgs e)
{
var popup = new Popup
{
Content = new VerticalStackLayout
{
Children =
{
new Label
{
Text = "This is a very important message!"
}
}
}
};
this.ShowPopup(popup);
}
Any idea what I'm doing wrong?
Thank you!
Markus

Answer 1

I reproduced the error message.
THE CAUSE: "I've no partial class for this popup".
That won't work. without that, there is no InitializeComponent call. The result is not a valid View.
To fix the problem,
First make sure you have got the toolkit registered in MauiProgram.cs:
using CommunityToolkit.Maui;
...
builder.UseMauiApp<App>().UseMauiCommunityToolkit();
then you must have
file ProfilePopup.xaml.cs containing:
public partial class ProfilePopup : CommunityToolkit.Maui.Views.Popup
{
public ProfilePopup()
{
InitializeComponent();
}
}
I generate custom views using these steps:
Project / Add New Item / .NET MAUI ContentView (XAML).
Give name "MyView". This adds TWO files to project: MyView.xaml and MyView.xaml.cs.
In MyView.xaml, add needed xmlns and change base class.
Was:
<ContentView xmlns=...
...
x:Class=...>
...
</ContentView>
change to:
<toolkit:Popup xmlns=
...
xmlns:toolkit="http://schemas.microsoft.com/dotnet/2022/maui/toolkit"
x:Class=...>
...
</toolkit:Popup>
In MyView.xaml.cs, change base class.
Was:
public partial class ProfilePopup : ContentView
change to:
public partial class ProfilePopup : CommunityToolkit.Maui.Views.Popup

Answer 2

The documentation on Microsoft page should be completed (I used as template):
https://learn.microsoft.com/en-us/dotnet/communitytoolkit/maui/views/popup

Answer 3

I was having the same problem. I forgot to add .UseMauiCommunityToolkit(); to MauiProgram.cs.
You can try this, as well:
var popup = new PopupPage();
await PopupExtensions.ShowPopupAsync<PopupPage>(this, popup);