ポップアップの表示

  • [アーティクル]

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

アラートを表示する

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

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

アラートはモーダルに表示され、一度閉じると、ユーザーはアプリとの対話を続けます。

1 つのボタンを含むアラート ダイアログのスクリーンショット。

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

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

2 つのボタンを含むアラート ダイアログのスクリーンショット。

ユーザーがオプションの 1 つを選択すると、応答は として bool返されます。

メソッド DisplayAlert には、UI 要素がアラート内で FlowDirection 流れる方向を指定する引数を受け取るオーバーロードもあります。

タスクをユーザーにガイドする

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

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

アクション シートがモーダルで表示されます。

アクション シート ダイアログのスクリーンショット。

ユーザーがいずれかのボタンをタップすると、ボタン ラベルが として string返されます。

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

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

破棄ボタンが表示されたアクション シートのスクリーンショット。

注意

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

DisplayActionSheetメソッドには、UI 要素がアクション シート内で流れる方向を指定する引数を受け取るFlowDirectionオーバーロードもあります。

プロンプトの表示

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

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

プロンプトがモーダルに表示されます。

モーダル プロンプトのスクリーンショット。

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

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

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

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

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

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

オプションのモーダル プロンプトのスクリーンショット。

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

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