ポップアップから値を返す

.NET MAUI Community Toolkit は、 ポップアップ をユーザーに表示する機能を提供します。 このツールキットを使用することで、開発者が、Popup を表示し、await が閉じられた時に Popup の結果を返すより複雑で一般的なシナリオが可能になります。 このページでは、 Popup<T> クラスを使用して目的の動作を実現する方法について説明します。

ポップアップの作成

Popup<T>は、XAML または C# で次のように作成できます。

XAML でのポップアップの作成

次のセクションでは、XAML を使用して Popup<T> を作成する方法について説明します。

ポップアップの定義

Popup<T>を作成する最も簡単な方法は、プロジェクトに新しい.NET MAUI ContentView (XAML)を追加することです。これにより、2 つのファイル (*.xaml ファイルと *.xaml.cs ファイル) が作成されます。 各ファイルの内容は、次のように置き換えることができます。

XAML ファイル

<toolkit:Popup
    xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
    xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
    xmlns:system="clr-namespace:System;assembly=mscorlib"
    xmlns:toolkit="http://schemas.microsoft.com/dotnet/2022/maui/toolkit"
    Padding="10"
    x:TypeArguments="system:Boolean"
    x:Class="MyProject.ReturnResultPopup">

    <VerticalStackLayout Spacing="6">
        <Label Text="This is a very important message! Do you agree?" />

        <Button Text="Yes" 
                Clicked="OnYesButtonClicked" />

        <Button Text="No"
                Clicked="OnNoButtonClicked" />
    
    </VerticalStackLayout>
    
</toolkit:Popup>

XAML で x:TypeArguments を使用すると、ジェネリック型の型パラメーターを指定できます。

XAML Code-Behind ファイル

public partial class ReturnResultPopup : Popup<bool>
{
    public ReturnResultPopup()
    {
        InitializeComponent();
    }

    async void OnYesButtonClicked(object? sender, EventArgs e)
    {
        await CloseAsync(true);
    }
    
    async void OnNoButtonClicked(object? sender, EventArgs e)
    {
        await CloseAsync(false);
    }
}

Popup<bool>の使用は、x:TypeArgumentsを使用して XAML の定義と一致する必要があります。

Von Bedeutung

分離コード ファイルがInitializeComponent への呼び出しと共に作成されなかった場合で、Popup を表示しようとすると、例外がスローされます。

C でのポップアップの作成#

次のセクションでは、C# を使用して Popup を作成する方法について説明します。

using CommunityToolkit.Maui.Views;

namespace MyProject;

public class ReturnResultPopup : Popup<bool>
{
    public ReturnResultPopup()
    {
        var yesButton = new Button { Text = "Yes" };
        yesButton.Clicked += OnYesButtonClicked;

        var noButton = new Button { Text = "No" };
        noButton.Clicked += OnNoButtonClicked;

        Content = new VerticalStackLayout
        {
            Children = 
            {
                new Label { Text = "This is a very important message! Do you agree?" },
                
                yesButton,
                noButton
            }
        };
    }

    async void OnYesButtonClicked(object? sender, EventArgs e)
    {
        await CloseAsync(true);
    }
    
    async void OnNoButtonClicked(object? sender, EventArgs e)
    {
        await CloseAsync(false);
    }
}

CloseAsyncメソッドを使用すると、値を指定できます。これは結果の戻り値になります。 Popup<T>でジェネリックを使用すると、Popup から値を返すときの型セーフが提供されます。

ポップアップからの結果の待機

結果を待機するには、 ShowPopupAsync メソッドを次のように使用する必要があります。

using CommunityToolkit.Maui.Views;

public class MyPage : ContentPage
{
    public async Task DisplayPopup()
    {
        var popup = new ReturnResultPopup();

        // The type parameter must match the type returned from the popup.
        IPopupResult<bool> popupResult = await this.ShowPopupAsync<bool>(popup, PopupOptions.Empty, CancellationToken.None);

        if (popupResult.WasDismissedByTappingOutsideOfPopup)
        {
            return;
        }

        if (popupResult.Result is true)
        {
            // Yes was tapped
        }
        else
        {
            // No was tapped
        }
    }
}

注

WasDismissedByTappingOutsideOfPopupがtrue場合、Resultプロパティは常にnullまたはdefaultになります。

ポップアップオプション

PopupOptions クラスは、表示されるPopupの Border、Shadow、PageOverlayColor などをカスタマイズする機能を提供します。

詳細については、 PopupOptions のドキュメント を参照してください。

例示

この機能の例は、 .NET MAUI Community Toolkit サンプル アプリケーションで動作しています。

API（アプリケーション・プログラミング・インターフェース）

Popup のソース コードは、.NET MAUI Community Toolkit の GitHub リポジトリにあります。

その他のリソース

• Popup
• IPopupService
• PopupOptions - Popup の動作と外観のカスタマイズ