Implementation of .Net MAUI Community Toolkit Popup

Introduction

In this article, I will explain about .NET MAUI Popup page implementation using Visual Studio 2022. Popups are a very common way of presenting information to a user that relates to their current task and Operating systems provide a way to show a message and require a response from the user these alerts are typically restrictive in terms of the content a developer can provide and also the layout and appearance.

Important

If the code behind the file is not created along with the call to InitializeComponent then an exception will be thrown when trying to display your Popup.
A Popup can only be displayed from a Page or an implementation inheriting from Page.

Note

Close() is a fire-and-forget method and It will complete and return to the calling thread before the operating system has dismissed the Popup from the screen If you need to pause the execution of your code until the operating system has dismissed the Popup from the screen use instead CloseAsync()
In order to handle the tapping outside of a Popup when also awaiting the result you can change the value that is returned through the ResultWhenUserTapsOutsideOfPopup property.
When creating a Style that targets Popup and you wish to make it apply to custom popups like the SimplePopup example make sure to set the ApplyToDerivedTypes property on the Style definition.

Step 1. Create a new project in Visual Studio 2022 and select the app option under the multiplatform on the left side panel, after that, you need to click the .NET MAUI App with C# option and click the continue button.

New project

Step 2. On the next page, you need to select the .Net framework version 6.0 and click the continue button.

Configure the project

Step 3. On the next page, You need to provide your project name and solution name along with your location and click on the Create button

Create project

Step 4. The next step is to download the NuGet Package CommunityToolkit.Maui and CommunityToolkit should be configured in the MauiProgram.cs file.

1. Download the Community Toolkit from NuGet Package Manager.

dotnet add package CommunityToolkit.Maui --version 7.0.1

2. Configure CommunityToolKit in MauiProgram.cs.

using Microsoft.Extensions.Logging;
using CommunityToolkit.Maui;

namespace Popup
{
    public static class MauiProgram
    {
        public static MauiApp CreateMauiApp()
        {
            var builder = MauiApp.CreateBuilder();

            builder
                .UseMauiApp<App>()
                .UseMauiCommunityToolkit()
                .ConfigureFonts(fonts =>
                {
                    fonts.AddFont("OpenSans-Regular.ttf", "OpenSansRegular");
                    fonts.AddFont("OpenSans-Semibold.ttf", "OpenSansSemibold");
                });

#if DEBUG
            builder.Logging.AddDebug();
#endif

            return builder.Build();
        }
    }
}

Step 5. The next step is to create the new content page and define the Community Popup view In order to use the toolkit in XAML the following xmlns need to be added to your page or view.

xmlns:toolkit="http://schemas.microsoft.com/dotnet/2022/maui/toolkit"

Therefore, the following

<?xml version="1.0" encoding="utf-8" ?>
<mct:Popup xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
           xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
           xmlns:mct="clr-namespace:CommunityToolkit.Maui.Views;assembly=CommunityToolkit.Maui"
           x:Class="Popup.MainPage"
           CanBeDismissedByTappingOutsideOfPopup="False"
           Size="300, 300">

    <Border VerticalOptions="CenterAndExpand"
            HorizontalOptions="CenterAndExpand"
            Stroke="White"
            StrokeThickness="1"
            StrokeShape="RoundRectangle 10">

        <VerticalStackLayout VerticalOptions="CenterAndExpand" Spacing="20">

            <Label Text="Welcome to .NET MAUI!"
                   VerticalOptions="Center"
                   HorizontalOptions="Center" />

            <Button Text="Close" Clicked="Button_Clicked" />

        </VerticalStackLayout>

    </Border>
</mct:Popup>

Step 6. The next step is to call the Popup from Main Page event or initialization and A Popup can only be displayed from a Page or an implementation inheriting from Page.

using CommunityToolkit.Maui.Views;

namespace Popup
{
    public partial class FirstPage : ContentPage
    {
        public FirstPage()
        {
            InitializeComponent();
        }

        private void OnCounterClicked(object sender, EventArgs e)
        {
            this.ShowPopup(new MainPage());
        }
    }
}

Output screen

Output screen

Conclusion

Hopefully, this article has given you sufficient information for you to create an MAUI collection view using viewmodel and run the app on both Android/iOS. Feel free to leave a comment if you would like me to further elaborate on anything within this article.