ポップアップの表示

UI の一般的なタスクは、アラートを表示したり、ユーザーに選択を求めたり、プロンプトを表示することです。 Xamarin.Forms の Page クラスには、ポップアップを介してユーザーと対話するための 3 つのメソッド DisplayAlert、DisplayActionSheet、DisplayPromptAsync があります。 それらは適切なネイティブ コントロールを使用して、各プラットフォーム上に表示されます。

アラートを表示する

Xamarin.Forms でサポートされるすべてのプラットフォームには、ユーザーにアラートを表示したり、簡単な質問をしたりするための、モーダル ポップアップがあります。 Xamarin.Forms でこれらのアラートを表示するには、任意の Page 上で DisplayAlert メソッドを使います。 次のコード行は、ユーザーに簡単なメッセージを表示します。

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

この例は、ユーザーから情報を収集しません。 アラートはモーダルとして表示され、一度無視するとユーザーは引き続きアプリケーションとやり取りできるようになります。

また、DisplayAlert メソッドは、2 つのボタンを表示して boolean を返すことで、ユーザーの応答をキャプチャするためにも使用できます。 アラートから応答を取得するには、両方のボタンにテキストを提供し、メソッドを await します。 ユーザーがオプションのいずれかを選択すると、コードに応答が返されます。 以下のサンプル コード内の async キーワードと await キーワードに注意してください。

async void OnAlertYesNoClicked (object sender, EventArgs e)
{
  bool answer = await DisplayAlert ("Question?", "Would you like to play a game", "Yes", "No");
  Debug.WriteLine ("Answer: " + answer);
}

DisplayAlert メソッドには、UI 要素がアラート内を流れる方向を指定する FlowDirection 引数を受け取るオーバーロードもあります。 フローの向きについて詳しくは、「右から左へのローカライズ」をご覧ください。

タスクを通じたユーザーのガイド

UIActionSheet は、iOS の一般的な UI 要素です。 Xamarin.Forms の DisplayActionSheet メソッドを使うと、このコントロールをクロスプラットフォーム アプリに組み込み、Android と UWP でネイティブの代替アイテムをレンダリングできます。

アクション シートを表示するには、任意の Page 内の DisplayActionSheet を await し、メッセージとボタンのラベルを文字列として渡します。 そのメソッドは、ユーザーがクリックしたボタンの文字列ラベルを返します。 簡単な例を次に示します。

async void OnActionSheetSimpleClicked (object sender, EventArgs e)
{
  string action = await DisplayActionSheet ("ActionSheet: Send to?", "Cancel", null, "Email", "Twitter", "Facebook");
  Debug.WriteLine ("Action: " + action);
}

destroy ボタンのレンダリングは iOS の他のボタンと異なり、null のままにするか、3 つ目の文字列パラメーターとして指定することができます。 次の例では、destroy ボタンを使用します。

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

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

プロンプトの表示

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

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

プロンプトはモーダルで表示されます。

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

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

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

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

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

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

関連リンク

• 右から左へのローカライズ