.NET MAUI(.NET マルチプラットフォーム アプリ UI )でアプリ開発をしている時にポップアップを表示したいてことはありませんか?
![](https://marunaka-blog.com/wp-content/uploads/2021/04/6a0f96fa975cc64c18fa90be906602e6.png)
ポップアップを表示したいけと、どうしたらいいの?
.NET MAUI には DisplayAlert メソッドが用意されており、このメソッドを使えば、ユーザーへの警告、簡単な質問などをポップアップ表示することができます。
この記事では、このポップアップ表示をする方法をまとめていますので、ぜひ参考にしてみて下さい。
![](https://marunaka-blog.com/wp-content/uploads/2023/05/c572f4d2cb372aa02e615d355756e70a-300x200.jpg)
オススメの参考書
丁寧に解説された1冊。リリースされて間もない.NET MAUI の基礎が学べるので、これから Android や iOS などをターゲットとして開発するなら非常に参考になる書籍です。
そもそもポップアップとは?
![](https://marunaka-blog.com/wp-content/uploads/2022/03/e79f61a6baca46b24df8b1f92d141ae5-2.png)
ポップアップとは、ユーザーに対して現在操作している内容に関するメッセージを表示したり、特定の操作を促したりするために用いられます。
次のように、操作中の画面の最前面に表示されます。
![](https://marunaka-blog.com/wp-content/uploads/2023/04/1aed6c542613e5e30d9472a87667505b.png)
ポップアップの表示が完了または取り消されるまで、操作中の画面に移動できない特徴があります。ユーザーによってポップアップの表示を完了または取り消す必要があります。
ポップアップ内にあるボタン、またはポップアップ以外の場所をタップもしくはクリックすると閉じることができます。
.NET MAUIでポップアップを表示するには?
![](https://marunaka-blog.com/wp-content/uploads/2022/03/091184bcda645b76415dad025b422929.jpg)
.NET MAUI ではポップアップを表示するための DisplayAlert という非同期メソッドが用意されています。
await DisplayAlert(string title, string message, string cancel);
このメソッドを使うことで簡単にモーダル形式のポップアップを表示させることが可能です。
DisplayAlertの使い方
![](https://marunaka-blog.com/wp-content/uploads/2022/03/2ba5cbb657d2e1599edd30d8fa258ed4.jpg)
ここからはポップアップの使い方をサンプルを交えながら紹介していきます。
モーダル ポップアップを表示する
次のように MainPage のコードビハインドを開き、ボタンのクリックハンドラに DisplayAlert メソッドを記述します。
private async void OnClicked(object sender, EventArgs e)
{
await DisplayAlert("Info", "ボタンがクリックされました。", "OK");
}
Android エミュレータで実行すると、次のような結果になります。
![](https://marunaka-blog.com/wp-content/uploads/2023/04/6f3fffc6c8041fa934f9d52aa47b8f24.png)
たった1行でポップアップを表示することができました。
アラートの応答を取得する
WPF や WinForm の MessageBox のように、どのボタンをクリックされたかに応じて、戻り値を返すことができます。
次の例では、ポップアップの右下に [Yes] ボタンと [No] ボタンを表示して、ユーザーの応答を取得できるようにしています。
private async void OnClicked(object sender, EventArgs e)
{
var result = await DisplayAlert("Question", "ボタンをクリックしましたか?", "YES", "NO");
Debug.WriteLine($"ユーザーの応答:{result}");
}
Android エミュレータで実行すると、次のように表示されます。
![](https://marunaka-blog.com/wp-content/uploads/2023/04/9d82f126268b406926f235416ba3f271.png)
[Yes] ボタンを選択すると、デバッグログに true が出力されます。
ユーザーの応答:true
アクションシートを表示する
ポップアップに複数の項目を表示して、その中から1つの項目をユーザーに選択させることができます。例えば、よく使う SNS をユーザーに選択させたい時とかに使えそうです。
アクションシートは DisplayActionSheet メソッドを使用します。
await DisplayActionSheet(string title, string cancel, string destruction, FlowDirection flowDirection, string[] buttons);
ボタンのクリックハンドラに次の処理を記述します。
private async void OnClicked(object sender, EventArgs e)
{
var result = await DisplayActionSheet("よく使う SNS は?", "Cancel", null, "Twitter", "Facebook", "Instagram");
Debug.WriteLine($"ユーザーの応答:{result}");
}
Android エミュレータで実行すると、次のように表示されます。
![](https://marunaka-blog.com/wp-content/uploads/2023/04/b705307b9fa1fb98780a0bec3567264d.png)
[Facebook] ボタンを選択すると、デバッグログに Facebook が出力されます。
ユーザーの応答:Facebook
プロンプトを表示する
ポップアップに入力欄を表示して、ユーザーに文字列や数値などを入力させることができます。
プロンプトを使うには DisplayPromptAsync メソッドを使用します。
await DisplayPromptAsync(string title, string message, string accept = “OK”, string cancel = “Cancel”, string placeholder = null, int maxLength = -1, Keyboard keyboard = null, string initialValue = “”);
ボタンのクリックハンドラに次の処理を記述します。
private async void OnClicked(object sender, EventArgs e)
{
var result = await DisplayPromptAsync("Question", "あなたのニックネームは?");
Debug.WriteLine($"ニックネーム:{result}");
}
Android エミュレータで実行すると、次のように表示されます。
![](https://marunaka-blog.com/wp-content/uploads/2023/04/8445a6c04c65e09b108a2a0bc2790efd.png)
ニックネームを入力して [OK] ボタンを選択すると、デバッグログに入力したニックネームが出力されます。[Cancel] ボタンを選択した場合は、null が返されます。
ニックネーム:mark
DisplayPromptAsync は引数を指定することで、より厳格に設定することができます。title と message 以外は省略が可能な引数になっています。
次の例では、キーボードの種類を数値のキーボードにし、入力できる文字数を3桁までにしています。
private async void OnClicked(object sender, EventArgs e)
{
var result = await DisplayPromptAsync("Question", "あなたの年齢は?", keyboard: Keyboard.Numeric, maxLength: 3);
Debug.WriteLine($"年齢:{result}");
}
Android エミュレータで実行すると、次のように表示されます。
![](https://marunaka-blog.com/wp-content/uploads/2023/04/5f6be55590356a630edd84686ec4ffc5.png)
年齢を数値で入力して [OK] ボタンを選択すると、デバッグログに入力した年齢が出力されます。[Cancel] ボタンを選択した場合は、null が返されます。
ニックネーム:21
まとめ
![](https://marunaka-blog.com/wp-content/uploads/2023/04/c35f903f10ed2371757ca77d9f41dce9-1024x358.png)
この記事では、DisplayAlert メソッドを使ったポップアップ表示について紹介しました。
ユーザーへの通知、警告、簡単な質問などをポップアップ表示することはよくあるので「ポップアップの使い方を知りたい」て時に、この記事が参考になれば幸いです。
ポップアップのレイアウトをカスタイマイズしたい場合は、次のリンクを参考にしてみて下さい。
![](https://marunaka-blog.com/wp-content/uploads/2023/04/6a71c061d6630143c2747e67a9886e53-300x200.jpg)
以上、最後まで読んで頂きありがとうございました。
![](https://marunaka-blog.com/wp-content/uploads/2023/04/259c955856c5bdc619d88605c3a5c583-300x200.jpg)
![](https://marunaka-blog.com/wp-content/uploads/2022/03/2f5a8ba6b1682610f773da3b2f1516f9-300x169.jpg)
![](https://marunaka-blog.com/wp-content/uploads/2022/09/1c0278efd52188a8154c18b8b21f1be2-300x169.jpg)