Xamarin.Formsで、ポップアップでメッセージを表示させてみました。

概要

Xamarin.Formsには、元からポップアップ表示させるためのメソッドがあるのでそれらを使いました。

今回は、Entryに入力した文字列をメッセージとして表示させるものや、メッセージと2つの選択肢を表示するもの、そして複数の選択肢から選ぶものについて説明します。

デザイン

xamlのファイル名はMainPage.xamlとして、画面のデザインは、Entryと、3つのボタンを配置しています。

<?xml version="1.0" encoding="utf-8" ?>
<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             x:Class="Popup.MainPage">
  <ContentPage.Padding>
    <OnPlatform x:TypeArguments="Thickness"
                iOS="20, 40, 20, 20"
                Android="20, 20, 20, 20"
                WinPhone="20, 20, 20, 20" />
  </ContentPage.Padding>
  <ContentPage.Content>
    <StackLayout VerticalOptions="FillAndExpand"
                 HorizontalOptions="FillAndExpand"
                 Orientation="Vertical"
                 Spacing="15">
      <Entry x:Name="PopUpEntry" Placeholder="PopUp Message" />
      <Button Text="PopUp" Clicked="OnPopUp" />
      <Button Text="Select PopUp" Clicked="OnSelectPopUp" />
      <Button Text="Action Sheet" Clicked="OnActionSheetPopUp" />
    </StackLayout>
  </ContentPage.Content>
</ContentPage>

PopUpと表示されるボタンが、メッセージのみのポップアップを表示するボタンです。

Select PopUpと表示されるボタンが、メッセージを表示して2つの選択肢を選ぶことができるポップアップを表示するボタンです。

Action Sheetと表示されるボタンが、複数の選択肢を選ぶことができるポップアップを表示するボタンです。

OnPopUpメソッド

PopUpボタンを押した時に実行されるメソッドです。

Entryの内容をメッセージとして、ポップアップを表示します。

void OnPopUp(object sender, EventArgs e)
{
    DisplayAlert("Pop Up", PopUpEntry.Text, "OK");
}

ポップアップの表示には、DisplayAlertを使用します。

第1引数がタイトル、第2引数がメッセージ、第3引数がポップアップを消す部分へ表示されるテキストになります。

OnSelectPopUpメソッド

Select PopUpボタンを押した時に実行されるメソッドです。

Entryの内容をメッセージとして、2つの選択肢を表示します。

その後、選んだものがどちらかを判定して、結果をポップアップで表示します。

async void OnSelectPopUp(object sender, EventArgs e)
{
    var answer = await DisplayAlert("Pop Up", PopUpEntry.Text, "Yes", "No");
    if (answer)
    {
        await DisplayAlert("Answer", "Yes", "OK");
    }
    else
    {
        await DisplayAlert("Answer", "No", "OK");
    }
}

DisplayAlertに第4引数を追加すると、第3引数と第4引数の2つが選択肢として表示されます。

気をつけることとして、aync/await構文を使って非同期処理として書いています。

これは、最初のDisplayAlertの結果を受け取る際に、await構文を使わないと、メソッドの戻り値が得られないからです。

なので、メソッドの戻り値を得たいのであれば、非同期構文で書く必要があります。

OnActionSheetPopUpメソッド

Action Sheetボタンを押した時に実行されるメソッドです。

複数の選択肢をポップアップで表示します。

その後、選んだものをまたポップアップで表示します。

async void OnActionSheetPopUp(object sender, EventArgs e)
{
    var action = await DisplayActionSheet("ActionSheet: Select", "Cancel", null, "Apple", "Banana", "Orange");
    if (action != "Cancel")
    {
        await DisplayAlert("Answer", action, "OK");
    }
}

複数の選択肢を表示するときには、DisplayActionSheetメソッドを使います。

第1引数がタイトル、第2引数がポップアップの画面を消す部分に表示されるテキスト、第3引数が削除等の強調表示したいテキスト、第4引数以降が選択肢となります。

今回は、第3引数にnullを指定して、強調表示したいものはないとしました。

戻り値は、選択したテキストの文字列なので、それをDisplayAlertを使って表示しています。

さいごに

簡単に、ポップアップの表示ができたので、驚きました。