この記事は公開されてから1年以上経過しています。情報が古い可能性がありますので、ご注意ください。
1 はじめに
ユーザへの警告や、選択が必要になった時、UIの1つとしてポップアップのメッセージを表示することがあります。 Xamarin.Formsでは、このような時のために、DisplayAlert及びDisplayActionSheetの2種類のアラートダイアログが用意されています。どちらのクラスも各プラットフォーム上で適当なネイティブコントロールでレンダリングされています。
2 DisplayAlert
DisplayAlertで軽易にアラートダイアログが表示できます。 3つだけパラメータを指定することで、選択のないOKボタンだけのメッセージボックスになります。
App.cs
public class App : Application {
public App() {
MainPage = new MyPage();
}
}
class MyPage : ContentPage {
public MyPage() {
//ボタンの生成
var button = new Button() {
Text = "Button"
};
//ボタンを押した際のイベント
button.Clicked += (s, e) => {
//DisplayAlertの表示
DisplayAlert("タイトル", "メッセージ", "OK");
};
Content = button;
}
}
iOS | Android | WindowsPhone |
第2パラメータまでセットすると、2択のインターフェースとなり、戻り値にboolを得ることができます。 なお、戻り値でプログラムを分岐させたい場合は、awaitを使用する必要があります。(ラムダ式にもasyncが必要になります)
App.cs
//ボタンを押した際のイベント
button.Clicked += async (s, e) => {
//DisplayAlertの表示
var result = await DisplayAlert("タイトル", "選択してください", "OK", "キャンセル");
//戻り値をボタンテキストにセットする
button.Text = result.ToString();
};
iOS | Android | WindowsPhone |
3 DisplayActionSheet
iOSのアクションシートと同じです。iOSでは、おなじみかも知れませんが、他のデバイスではどうなんでしょう・・・
DisplayActionSheetの第2パラメータと第3パラメータは、レンダリング位置や強調表示が、iOSのアクションシートと同じで固定になっています。nullを指定して、これを使用しないようにすることもできます。
※DisplayActionSheetは、Pageのメソッドであり、ContentPageの中で使用可能です。
App.cs
public class App : Application {
public App() {
MainPage = new MyPage();
}
}
class MyPage : ContentPage {
public MyPage(){
//ボタンの生成
var button = new Button(){
Text = "Button"
};
//ボタンを押した際のイベント
button.Clicked += async (s, e) =>{
//DisplayActionSheetの表示
var retult= await DisplayActionSheet("選択してください", "キャンセル", "削除", "編集", "コピー", "貼り付け");
//返された文字列でボタンテキストを書き換える
button.Text = retult;
};
Content = new StackLayout{
Padding = new Thickness(0, 20, 0, 0),//上に余白を持つ
Children ={button,}//スタックレイアウトにボタンを1つだけ持つ
};
}
}
iOS | Android | WindowsPhone |
4 まとめ
今回は、Xamarin.FormsにおけるポップアップUIを紹介しました。 ActionSheetがあるためか、やや、iOSに偏った印象を受けてしまいます。 ちなみに、Androidのトーストのようなメッセージ表示はありません。
サンプルコード(https://github.com/furuya02/Xamarin.Forms.AlertSample)
本記事は、2015年11月12日現在で最新の Xamarin.Forms 1.5.1.6471 を使用して作成されています。
5 参考リンク
Xamarin Developers Guide 「Working with Pop-ups」