Hello!
While the whole world is waiting for Ukraine's victory in the war against Russia, .NET MAUI GA is coming closer. A lot of developers started creating new apps or migrating their old apps from Xamarin.Forms to .NET MAUI.
The first impression is very important. The application should have a good-looking UI and a user-friendly experience. But some applications may have complex features, that require additional tutorials for the general user.
In this article, I will show you how to create an interactive app tutorial in .NET MAUI using CommunityToolkit.Maui Popup.
First of all, create a new .NET MAUI application and install the CommunityToolkit.Maui NuGet package.
CommunityToolkit.Maui Preview 8 brings the first control with the new Handler architecture - Popup. It overlays over the current application page and allows it to show any View content. We will use it as a container for our tutorial.
Popup requires NavigationStack, so we need to put our MainPage inside a NavigationPage. Update App.xaml.cs with the next code:
Now, let's create a new Popup:
The idea is pretty simple. We make a transparent popup and put our tips over the main components.
When our popup is ready, we can display it on our main page. Add the next method and call it when you need it:
To show the popup at the start of the application you have to call it after Handler initialization. For example:
After all these simple steps you should see the next result:
The full code can be found on GitHub.
Thank you for reading!