Xamarin.Forms アラートダイアログ

2015.11.12

この記事は公開されてから1年以上経過しています。情報が古い可能性がありますので、ご注意ください。

1 はじめに

ユーザへの警告や、選択が必要になった時、UIの１つとしてポップアップのメッセージを表示することがあります。 Xamarin.Formsでは、このような時のために、DisplayAlert及びDisplayActionSheetの２種類のアラートダイアログが用意されています。どちらのクラスも各プラットフォーム上で適当なネイティブコントロールでレンダリングされています。

2 DisplayAlert

DisplayAlertで軽易にアラートダイアログが表示できます。３つだけパラメータを指定することで、選択のないOKボタンだけのメッセージボックスになります。

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

第２パラメータまでセットすると、２択のインターフェースとなり、戻り値にboolを得ることができます。なお、戻り値でプログラムを分岐させたい場合は、awaitを使用する必要があります。（ラムダ式にもasyncが必要になります）

 //ボタンを押した際のイベント
button.Clicked += async (s, e) => {
    //DisplayAlertの表示
    var result = await DisplayAlert("タイトル", "選択してください", "OK", "キャンセル");
    //戻り値をボタンテキストにセットする
    button.Text = result.ToString();
};

iOS	Android	WindowsPhone

3 DisplayActionSheet

iOSのアクションシートと同じです。iOSでは、おなじみかも知れませんが、他のデバイスではどうなんでしょう・・・

DisplayActionSheetの第２パラメータと第３パラメータは、レンダリング位置や強調表示が、iOSのアクションシートと同じで固定になっています。nullを指定して、これを使用しないようにすることもできます。

※DisplayActionSheetは、Pageのメソッドであり、ContentPageの中で使用可能です。

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,}//スタックレイアウトにボタンを１つだけ持つ
        };
    }
}