ポップアップ - .NET MAUI Community Toolkit - Community Toolkits for .NET

[アーティクル]
12/21/2024

ポップアップは、現在のタスクに関連する情報をユーザーに表示するための非常に一般的な方法です。オペレーティングシステムには、メッセージを表示してユーザーに応答を要求する方法が用意されていますが、これらのアラートは通常、開発者が提供できるコンテンツのほか、レイアウトや外観などの点から見て制限されています。

Note

より微妙な何かをユーザーに表示する場合は、Toast および Snackbar オプションをチェックアウトしてください。

Popup ビューを使用すると、開発者は独自のカスタム UI を構築し、それをユーザーに表示できます。

Popup は、XAML または C# で作成できます。

XAML

XAML 名前空間を含める

XAML でこのツールキットを使用するには、次の xmlns をページまたはビューに追加する必要があります。

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

したがって、以下のコードは、

<ContentPage
    x:Class="CommunityToolkit.Maui.Sample.Pages.MyPage"
    xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
    xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml">

</ContentPage>

次のように、xmlns を含むように変更されます。

<ContentPage
    x:Class="CommunityToolkit.Maui.Sample.Pages.MyPage"
    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">

</ContentPage>

Popup が XAML で作成される場合は、C# のコードビハインドファイルも存在している必要があることに注意してください。これが必要な理由を理解するには、この .NET MAUI のドキュメントページを参照してください。

Popup を作成するための最も簡単な方法は、新しい .NET MAUI ContentView (XAML) をプロジェクトに追加してから、各ファイルを次のように変更することです。

<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="MyProject.SimplePopup">

    <VerticalStackLayout>
        <Label Text="This is a very important message!" />
    </VerticalStackLayout>
    
</toolkit:Popup>

public partial class SimplePopup : Popup
{
    public SimplePopup()
    {
        InitializeComponent();
    }
}

重要

コードビハインドファイルが InitializeComponent の呼び出しと共に作成されていない場合は、Popup を表示しようとしたときに例外がスローされます。

C#

using CommunityToolkit.Maui.Views;

var popup = new Popup
{
    Content = new VerticalStackLayout
    {
        Children = 
        {
            new Label
            {
                Text = "This is a very important message!"
            }
        }
    }
};

Popup が構築されたら、Popup 拡張メソッド経由で、またはこのツールキットの IPopupService 実装を使用してそれを表示できます。

重要

Popup は、Page か、または Page から継承された実装からのみ表示できます。

using CommunityToolkit.Maui.Views;

public class MyPage : ContentPage
{
    public void DisplayPopup()
    {
        var popup = new SimplePopup();

        this.ShowPopup(popup);
    }
}

Popup を閉じるには、プログラムによる方法とポップアップの外側をタップする方法の 2 種類があります。

Popup を閉じるには、開発者は Close 自体で CloseAsync または Popup を呼び出す必要があります。これは通常、ユーザーのボタン押下に応答することによって実行されます。

前の XAML の例は、以下のように OKButton を追加することで拡張できます。

<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="MyProject.SimplePopup">

    <VerticalStackLayout>
        <Label Text="This is a very important message!" />
        <Button Text="OK" 
                Clicked="OnOKButtonClicked" />
    </VerticalStackLayout>
    
</toolkit:Popup>

最終的なイベントハンドラーでは、Close を呼び出します。これにより、Popup がプログラムによって閉じられます。

Note

Close() は、ファイアアンドフォーゲットメソッドです。これは、オペレーティングシステムが画面から Popup を閉じる前に、完了して呼び出し元のスレッドに戻ります。オペレーティングシステムが画面から Popup を閉じるまでコードの実行を一時停止する必要がある場合は、代わりに CloseAsync() を使用してください。

public partial class MySimplePopup : Popup
{
    // ...

    void OnOKButtonClicked(object? sender, EventArgs e) => Close();
}

最終的なイベントハンドラーでは、CloseAsync を呼び出します。これにより、Popup がプログラムによって閉じられます。呼び出し元は、オペレーティングシステムが画面から await を閉じるまでメソッドに対して Popup を実行できます。

public partial class MySimplePopup : Popup
{
    // ...

    async void OnOKButtonClicked(object? sender, EventArgs e) 
    {
        var cts = new CancellationTokenSource(TimeSpan.FromSeconds(5));

         await CloseAsync(token: cts.Token);
         await Toast.Make("Popup Dismissed By Button").Show();
    }
}

既定では、ユーザーは Popup の外側をタップしてそれを閉じることができます。これは、CanBeDismissedByTappingOutsideOfPopup プロパティを使用して制御できます。このプロパティを false に設定すると、ユーザーは Popup の外側をタップしてそれを閉じることができなくなります。

結果を返す

開発者がユーザーに応答を要求することは、かなり頻繁に発生します。Popup ビューを使用すると、開発者は、ユーザーが待機し、それに対処できる結果を返すことができます。

元の XAML の例は、これがどのように実現されるかを示すように拡張できます。

XAML

XAML に次の 2 つの新しいボタンを追加します。

<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="MyProject.SimplePopup">

    <VerticalStackLayout>
        <Label Text="This is a very important message! Do you agree?" />
        <Button Text="Yes" 
                Clicked="OnYesButtonClicked" />
        <Button Text="No"
                Clicked="OnNoButtonClicked" />
    </VerticalStackLayout>
    
</toolkit:Popup>

次に、C# に次のイベントハンドラーを追加します。

async void OnYesButtonClicked(object? sender, EventArgs e)
{
    var cts = new CancellationTokenSource(TimeSpan.FromSeconds(5));
    await CloseAsync(true, cts.Token);
}

async void OnNoButtonClicked(object? sender, EventArgs e)
{
    var cts = new CancellationTokenSource(TimeSpan.FromSeconds(5));
    await CloseAsync(false, cts.Token);
}

Close メソッドでは object 値を指定でき、これが最終的な戻り値になります。結果を待機するには、ShowPopupAsync メソッドを次のように使用する必要があります。

using CommunityToolkit.Maui.Views;

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

        var result = await this.ShowPopupAsync(popup, CancellationToken.None);

        if (result is bool boolResult)
        {
            if (boolResult)
            {
                // Yes was tapped
            }
            else
            {
                // No was tapped
            }
        }
    }
}

Note

同時に結果も待っている間の Popup の外側でのタップを処理するために、ResultWhenUserTapsOutsideOfPopup プロパティを使用して、返される値を変更できます。

スタイル設定

Popup クラスでは、.NET MAUI Styles を使用して、複数のポップアップにまたがって共通のビジュアル設定を簡単に共有できます。

次の例は、前のセクションの SimplePopup の例に適用されるスタイルを定義する方法を示しています。

<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"
               xmlns:popups="clr-namespace:CommunityToolkit.Maui.Sample.Views.Popups"
               x:Class="MyProject.SimplePopup">

    <toolkit:Popup.Resources>
        <Style TargetType="{x:Type popups:SimplePopup}">
            <Setter Property="Size" Value="100,200" />
            <Setter Property="Color" Value="Green" />
            <Setter Property="HorizontalOptions" Value="Center" />
            <Setter Property="VerticalOptions" Value="Start" />
            <Setter Property="CanBeDismissedByTappingOutsideOfPopup" Value="True" />
        </Style>
    </toolkit:Popup.Resources>

    <VerticalStackLayout>
        <Label Text="This is a very important message! Do you agree?" />
        <Button Text="Yes" 
                Clicked="OnYesButtonClicked" />
        <Button Text="No"
                Clicked="OnNoButtonClicked" />
    </VerticalStackLayout>
    
</toolkit:Popup>

Note

Style を対象とする Popup を作成し、それを SimplePopup の例のようなカスタムポップアップに適用させる場合は、必ず ApplyToDerivedTypes 定義で Style プロパティを設定してください。

Properties

プロパティ	タイプ	説明
`Anchor`	`View`	`View` アンカーを取得または設定します。 Anchor は、ポップアップが最も近くにレンダリングされる場所です。 Anchor が構成されている場合、ポップアップはそのコントロールの上の中央か、またはできるだけ近くに表示されます。
`CanBeDismissedByTappingOutsideOfPopup`	`bool`	ポップアップの外側をタップしてポップアップを閉じることができるかどうかを示す値を取得または設定します。 Android では、false の場合、ハードウェアの戻るボタンが無効になります。
`Color`	`Color`	ポップアップの `Color` を取得または設定します。この色は、`Popup` のネイティブな背景色を設定します。これは、実際の `Content` で構成されているどの背景色にも依存しません。
`Content`	`View`	`View` でレンダリングする `Popup` コンテンツを取得または設定します。
`HorizontalOptions`	`LayoutAlignment`	`LayoutAlignment` を画面上に水平方向に配置するための `Popup` を取得または設定します。
`Result`	`Task<object?>`	閉じられた `Popup` の最終的な結果を取得します。
`Size`	`Size`	ポップアップ表示の `Size` を取得または設定します。ポップアップでは、`Popup` が指定されていない限り、常に `Size` の実際のサイズをビューのサイズに制約しようとします。 `Popup` で、既定値ではない `HorizontalOptions` または `VerticalOptions` プロパティが使用される場合は、この `Size` プロパティが必要です。
`VerticalOptions`	`LayoutAlignment`	`LayoutAlignment` を画面上に垂直方向に配置するための `Popup` を取得または設定します。

Events

Event	説明
`Closed`	`Popup` が閉じているときに発生します。
`Opened`	`Popup` が開いているときに発生します。

例

この機能の動作状態の例は、.「NET MAUI Community Toolkit サンプルアプリケーション」でご覧になれます。

API

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

次の方法で共有

XAML

XAML 名前空間を含める

C#

結果を返す

XAML

スタイル設定

Properties

Events

例

API

その他のリソース

次の方法で共有

Popup

ポップアップの構築

XAML

XAML 名前空間を含める

ポップアップの定義

C#

ポップアップのユーザーへの表示

ポップアップを閉じる

プログラムによってポップアップを閉じる

ポップアップの外側をタップする

結果を返す

XAML

スタイル設定

Properties

Events

例

API

その他のリソース