ポップアップの表示

アラートの表示、ユーザーに選択の依頼、またはプロンプトの表示は、一般的な UI タスクです。 .NET マルチプラットフォーム アプリ UI (.NET MAUI) には、ポップアップを介してユーザーと対話するための 3 つのメソッドがクラスにPage用意されていますDisplayPromptAsyncDisplayAlertDisplayActionSheet ポップアップは、各プラットフォーム上のネイティブ コントロールでレンダリングされます。

アラートを表示する

.NET MAUI でサポートされているすべてのプラットフォームには、ユーザーに警告したり、簡単な質問をしたりするためのポップアップが表示されます。 アラートを表示するには、任意PageのメソッドをDisplayAlert使用します。 次の例は、ユーザーへの単純なメッセージを示しています。

await DisplayAlert("Alert", "You have been alerted", "OK");

Screenshot of an alert dialog with one button.

アラートが無視されると、ユーザーはアプリとの対話を続行します。

Note

Android では、アラートの外側にあるページをタップすると、アラートを無視できます。 デスクトップ プラットフォームでは、エスケープ キーを使用してアラートを無視できます。

また、DisplayAlert メソッドは、2 つのボタンを表示して bool を返すことで、ユーザーの応答をキャプチャするためにも使用できます。 アラートから応答を取得するには、ボタンと await メソッドの両方のテキストを指定します。

bool answer = await DisplayAlert("Question?", "Would you like to play a game", "Yes", "No");
Debug.WriteLine("Answer: " + answer);

Screenshot of an alert dialog with two buttons.

ユーザーがオプションの 1 つを選択すると、応答は bool.

また、この DisplayAlert メソッドには、アラート内で FlowDirection UI 要素が流れる方向を指定する引数を受け入れるオーバーロードもあります。 フローの方向の詳細については、「右から左へのローカリゼーション」を参照してください

警告

Windows では、既定では、アラートが表示されるときに、アラートの背後にあるページで定義されているアクセス キーをアクティブ化できます。 詳細については、「Windows の VisualElement アクセス キー」を参照してください

タスクをユーザーに案内する

アクション シートには、タスクを続行する方法に関する一連の代替手段がユーザーに表示されます。 アクション シートを表示するには、任意PageのメソッドをDisplayActionSheet使用して、メッセージとボタンのラベルを文字列として渡します。

string action = await DisplayActionSheet("ActionSheet: Send to?", "Cancel", null, "Email", "Twitter", "Facebook");
Debug.WriteLine("Action: " + action);

Screenshot of an action sheet dialog.

ユーザーがいずれかのボタンをタップすると、ボタンラベルが string.

Note

アクション シートの外側のページをタップすると、タッチ プラットフォームと Mac Catalyst でアクション シートを閉じます。 Windows では、アクション シートをエスケープ キーで閉じることができ、アクション シートの外側にあるページをクリックします。

アクション シートでは、破壊的な動作を表すボタンである破棄ボタンもサポートされています。 破棄ボタンは、メソッドの 3 番目の文字列引数として指定することも、左nullDisplayActionSheetすることもできます。 次の例では、破棄ボタンを指定します。

async void OnActionSheetCancelDeleteClicked(object sender, EventArgs e)
{
  string action = await DisplayActionSheet("ActionSheet: SavePhoto?", "Cancel", "Delete", "Photo Roll", "Email");
  Debug.WriteLine("Action: " + action);
}

Screenshot of an action sheet with a destroy button.

Note

iOS では、破棄ボタンはアクション シート内の他のボタンとは異なる方法でレンダリングされます。

この DisplayActionSheet メソッドには、UI 要素がアクション シート内を流れる方向を指定する引数を受け取る FlowDirection オーバーロードもあります。 フローの方向の詳細については、「右から左へのローカリゼーション」を参照してください

プロンプトの表示

プロンプトを表示するには、on any PageDisplayPromptAsync呼び出し、タイトルとメッセージを引数としてstring渡します。

string result = await DisplayPromptAsync("Question 1", "What's your name?");

Screenshot of a prompt.

[OK] ボタンをタップすると、入力した応答が string. [キャンセル] ボタンがタップされると、 null 返されます。

Note

Android では、アラートの外側にあるページをタップすることで、プロンプトを無視できます。 デスクトップ プラットフォームでは、エスケープ キーを使用してプロンプトを無視できます。

メソッドの完全な引数リスト DisplayPromptAsync は次のとおりです。

  • titleは、プロンプト stringに表示するタイトルです。
  • messageは、プロンプト stringに表示するメッセージです。
  • acceptは、受 stringけ入れボタンのテキストです。 これは省略可能な引数で、既定値は OK です。
  • cancelstring、キャンセル ボタンのテキストです。 これは省略可能な引数で、既定値は Cancel です。
  • placeholderは、プロンプト stringに表示するプレースホルダー テキストです。 これは省略可能な引数で、既定値は null.
  • maxLengthは、ユーザー int応答の最大長です。 これは省略可能な引数で、既定値は -1 です。
  • keyboardは、 Keyboardユーザーの応答に使用するキーボードの種類です。 これは省略可能な引数で、既定値は Keyboard.Default.
  • initialValuestring、表示され、編集できる定義済みの応答です。 これは省略可能な引数で、既定値は空 stringです。

次の例は、省略可能な引数の一部を設定する方法を示しています。

string result = await DisplayPromptAsync("Question 2", "What's 5 + 5?", initialValue: "10", maxLength: 2, keyboard: Keyboard.Numeric);

このコードは、定義済みの応答 10 を表示し、入力できる文字数を 2 に制限し、ユーザー入力用の数値キーボードを表示します。

Screenshot of an optional prompt.

警告

Windows では、既定では、プロンプトが表示されるときに、プロンプトの背後にあるページで定義されているアクセス キーをアクティブ化できます。 詳細については、「Windows の VisualElement アクセス キー」を参照してください

ページをポップアップとして表示する

.NET MAUI では、モーダル ページ ナビゲーションがサポートされています。 モーダル ページを使用すると、タスクが完了または取り消されるまで移動できない自己完結型タスクを完了することがユーザーに推奨されます。 たとえば、ユーザーが複数のデータを入力する必要があるポップアップとしてフォームを表示するには、フォームの UI を含むフォームを作成 ContentPage し、モーダル ページとしてナビゲーション スタックにプッシュします。 詳しくは、「モーダル ナビゲーションを実行する」をご覧ください。