.NET MAUI カスタムポップアップの表示

NuGetパッケージの追加

CommunityToolKit.Mauiのパッケージをインストールをします。

パッケージの初期化

MauiProgram.csでCommunityToolkitを有効化する必要があります。

MauiProgran.cs

using CommunityToolkit.Maui;

namespace MauiApp2;

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");
			});

		return builder.Build();
	}
}

ポップアップの表示

デザインはボタンを表示させる為だけなので適当です。
今回はボタンをクリックした際にポップアップを表示させるようにしてみます。

MainPage.xaml

<ContentPage xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             x:Class="MauiApp2.MainPage">

    <ScrollView>
        <VerticalStackLayout
            Spacing="25"
            Padding="30,0"
            VerticalOptions="Center">

            <Label
                Text="ポップアップを表示するボタンです"
                FontSize="18"
                HorizontalOptions="Center" />

            <Button
                x:Name="PopupBtn"
                Text="Click me"
                Clicked="OnClicked"
                HorizontalOptions="Center" />

        </VerticalStackLayout>
    </ScrollView>

</ContentPage>

クリック時に拡張メソッドを使用してPopupを表示します。

MainPage.xaml.cs

using CommunityToolkit;
using CommunityToolkit.Maui.Views;

namespace MauiApp2;

public partial class MainPage : ContentPage
{
	public MainPage()
	{
		InitializeComponent();
	}

	private void OnClicked(object sender, EventArgs e)
	{
        var popup = new Popup
        {
            Content = new VerticalStackLayout
            {
                Children =
                {
                    new Label
                    {
                        Text = "ポップアップです"
                    }
                }
            }
        };
        this.ShowPopup(popup);
	}
}

実際にdebugで画面を確認してみるとボタンをクリック時にポップアップが表示されています。
画面外をクリックする事でポップアップは閉じます。

画面外をタップしてもポップアップを閉じないようにしたい場合は
Popupに対して以下の用に設定すると閉じなくなります。

CanBeDismissedByTappingOutsideOfPopup = false

参考資料