Xamarin.Forms Pop-ups のチュートリアル

[アーティクル]
Developer (初級)
完了まで 6 分

このチュートリアルを試行する前に、以下を正常に完了しておく必要があります。

初めての Xamarin.Forms アプリのビルドに関するクイックスタート。
StackLayout のチュートリアル。
Button のチュートリアル。

このチュートリアルでは、以下の内容を学習します。

アラートを表示して、ユーザーに選択を求める。
アクションシートを表示して、タスクが完了するまでユーザーをガイドする。

Xamarin.Forms でポップアップを表示する方法を示す簡単なアプリケーションを作成するには、Visual Studio 2019 または Visual Studio for Mac を使用します。次のスクリーンショットは、最終的なアプリケーションです。

アラートを表示する

残り 5 分

Xamarin.Forms には、ユーザーにアラートを表示する、または簡単な質問をする、アラートと呼ばれる、モーダルポップアップがあります。この演習では、Page クラスから DisplayAlert メソッドを使用して、ユーザーにアラートを表示したり、簡単な質問をします。

Visual Studio
Visual Studio for Mac

このチュートリアルを完了するには、 .NET によるモバイル開発ワークロードがインストールされた、Visual Studio 2019 (最新リリース) が必要です。さらに、iOS でチュートリアルアプリケーションを構築するには、ペアリング済みの Mac が必要になります。 Xamarin プラットフォームのインストールについては、「Xamarin のインストール」を参照してください。 Mac ビルドホストへの Visual Studio 2019 の接続については、「Xamarin.iOS 開発のために Mac とペアリングする」を参照してください。

Visual Studio を起動し、PopupsTutorial という名前の新しい空の Xamarin.Forms アプリを作成します。

重要

このチュートリアルの C# スニペットと XAML スニペットでは、PopupsTutorial という名前のソリューションが必要です。別の名前を使用すると、コードをこのチュートリアルからソリューションにコピーするときに、ビルドエラーが発生します。

作成される .NET Standard ライブラリの詳細については、Xamarin.Forms クイックスタート Deep Dive の「Xamarin.Forms アプリケーションの構造」を参照してください。
ソリューションエクスプローラーの [PopupsTutorial] プロジェクトで、[MainPage.xaml] をダブルクリックして開きます。次に、 [MainPage.xaml] のテンプレートコードをすべて削除し、次のコードに置き換えます。
```
<?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="PopupsTutorial.MainPage">
    <StackLayout Margin="20,35,20,20">
        <Button Text="Display alert"
                Clicked="OnDisplayAlertButtonClicked" />
        <Button Text="Display alert question"
                Clicked="OnDisplayAlertQuestionButtonClicked" />
    </StackLayout>
</ContentPage>
```
このコードでは、StackLayout の中の 2 つの Button オブジェクトから構成される、ページのユーザーインターフェイスを宣言によって定義します。 Button.Text プロパティでは、各 Button に表示されるテキストを指定し、Clicked イベントは、次の手順で作成されるイベントハンドラーに設定されます。
ソリューションエクスプローラーの PopupsTutorial プロジェクトで [MainPage.xaml] を展開し、 [MainPage.xaml.cs] をダブルクリックして開きます。次に、 [MainPage.xaml.cs] で、OnDisplayAlertButtonClicked と OnDisplayAlertQuestionButtonClicked のイベントハンドラーをクラスに追加します。
```
async void OnDisplayAlertButtonClicked(object sender, EventArgs e)
{
    await DisplayAlert("Alert", "This is an alert.", "OK");
}

async void OnDisplayAlertQuestionButtonClicked(object sender, EventArgs e)
{
    bool response = await DisplayAlert("Save?", "Would you like to save your data?", "Yes", "No");
    Console.WriteLine("Save data: " + response);
}
```
Button がタップされると、それぞれのイベントハンドラーメソッドが実行されます。 OnDisplayAlertButtonClicked メソッドでは、単一のキャンセルボタンがあるモーダルアラートを表示するために、DisplayAlert メソッドを呼び出します。アラートが閉じられたら、ユーザーはアプリケーションの操作を続行できます。

OnDisplayAlertQuestionButtonClicked メソッドでは、承認ボタンとキャンセルボタンがあるモダールアラートを表示するために、DisplayAlert メソッドのオーバーロードを呼び出します。ユーザーがいずれかのボタンを選択した後、その選択が boolean として返されます。

重要

DisplayAlert メソッドは非同期であり、await キーワードで常に待機される必要があります。
Visual Studio ツールバーで、 [開始] ボタン ([再生] ボタンに似た三角形のボタン) を押し、選択したリモート iOS シミュレーターまたは Android エミュレーター内でアプリケーションを起動します。次に、最初の Button をタップします。

アラートを閉じた後、2 番目の Button をタップします。

質問への回答を選択した後、回答が Visual Studio の [出力] ウィンドウに出力されることを確認します。このウィンドウが表示されていない場合は、[表示] > [出力] メニューオプションを選択すると表示されます。

Visual Studio で、アプリケーションを停止します。

アラートの表示について詳しくは、「Display Pop-ups (ポップアップの表示)」ガイドの「Display an alert (アラートを表示する)」をご覧ください。

このチュートリアルを完了するには、iOS と Android のプラットフォームのサポートがインストールされた Visual Studio for Mac (最新リリース) が必要です。さらに、Xcode (最新リリース) も必要になります。 Xamarin プラットフォームのインストールについて詳しくは、「Xamarin のインストール」を参照してください。

Visual Studio for Mac を起動し、PopupsTutorial という名前の新しい空の Xamarin.Forms アプリを作成します。

重要

このチュートリアルの C# スニペットと XAML スニペットでは、PopupsTutorial という名前のソリューションが必要です。別の名前を使用すると、コードをこのチュートリアルからソリューションにコピーするときに、ビルドエラーが発生します。

作成される .NET Standard ライブラリの詳細については、Xamarin.Forms クイックスタート Deep Dive の「Xamarin.Forms アプリケーションの構造」を参照してください。
Solution Pad の [PopupsTutorial] プロジェクトで、 [MainPage.xaml] をダブルクリックして開きます。次に、 [MainPage.xaml] のテンプレートコードをすべて削除し、次のコードに置き換えます。
```
<?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="PopupsTutorial.MainPage">
    <StackLayout Margin="20,35,20,20">
        <Button Text="Display alert"
                Clicked="OnDisplayAlertButtonClicked" />
        <Button Text="Display alert question"
                Clicked="OnDisplayAlertQuestionButtonClicked" />
    </StackLayout>
</ContentPage>
```
このコードでは、StackLayout の中の 2 つの Button オブジェクトから構成される、ページのユーザーインターフェイスを宣言によって定義します。 Button.Text プロパティでは、各 Button に表示されるテキストを指定し、Clicked イベントは、次の手順で作成されるイベントハンドラーに設定されます。
Solution Pad の PopupsTutorial プロジェクトで [MainPage.xaml] を展開し、[MainPage.xaml.cs] をダブルクリックして開きます。次に、 [MainPage.xaml.cs] で、OnDisplayAlertButtonClicked と OnDisplayAlertQuestionButtonClicked のイベントハンドラーをクラスに追加します。
```
async void OnDisplayAlertButtonClicked(object sender, EventArgs e)
{
    await DisplayAlert("Alert", "This is an alert.", "OK");
}

async void OnDisplayAlertQuestionButtonClicked(object sender, EventArgs e)
{
    bool response = await DisplayAlert("Save?", "Would you like to save your data?", "Yes", "No");
    Console.WriteLine("Save data: " + response);
}
```
Button がタップされると、それぞれのイベントハンドラーメソッドが実行されます。 OnDisplayAlertButtonClicked メソッドでは、単一のキャンセルボタンがあるモーダルアラートを表示するために、DisplayAlert メソッドを呼び出します。アラートが閉じられたら、ユーザーはアプリケーションの操作を続行できます。

OnDisplayAlertQuestionButtonClicked メソッドでは、承認ボタンとキャンセルボタンがあるモダールアラートを表示するために、DisplayAlert メソッドのオーバーロードを呼び出します。ユーザーがいずれかのボタンを選択した後、その選択が boolean として返されます。

重要

DisplayAlert メソッドは非同期であり、await キーワードで常に待機される必要があります。
Visual Studio for Mac ツールバーで、 [開始] ボタン ([再生] ボタンに似た三角形のボタン) を押し、選択した iOS シミュレーターまたは Android エミュレーター内でアプリケーションを起動します。次に、最初の Button をタップします。

アラートを閉じた後、2 番目の Button をタップします。

質問への回答を選択した後、回答が Visual Studio for Mac の [アプリケーション出力] ウィンドウに出力されることを確認します。このウィンドウが表示されていない場合は、[表示] > [その他のウィンドウ] > [アプリケーション出力] メニューオプションを選択すると表示されます。

Visual Studio for Mac で、アプリケーションを停止します。

アラートの表示について詳しくは、「Display Pop-ups (ポップアップの表示)」ガイドの「Display an alert (アラートを表示する)」をご覧ください。

アクションシートを表示する

残り 2 分

Xamarin.Forms には、アクションシートとして知られるモーダルポップアップが用意されており、タスクの完了までユーザーをガイドするのに使用できます。この演習では、Page クラスから DisplayActionSheet メソッドを使用して、タスクの完了までユーザーをガイドするアクションシートを表示します。

Visual Studio
Visual Studio for Mac

MainPage.xaml で、アクションシートを表示する新しい Button 宣言を追加します。
```
<Button Text="Display action sheet"
        Clicked="OnDisplayActionSheetButtonClicked" />
```
Button.Text プロパティでは、Button に表示するテキストを指定します。さらに、Clicked イベントは、次の手順で作成する OnDisplayActionSheetButtonClicked という名前のイベントハンドラーに設定されます。
ソリューションエクスプローラーの PopupsTutorial プロジェクトで [MainPage.xaml] を展開し、 [MainPage.xaml.cs] をダブルクリックして開きます。次に、MainPage.xaml.cs で、OnDisplayActionSheetButtonClicked イベントハンドラーをクラスに追加します。
```
async void OnDisplayActionSheetButtonClicked(object sender, EventArgs e)
{
    string action = await DisplayActionSheet("Send to?", "Cancel", null, "Email", "Twitter", "Facebook");
    Console.WriteLine("Action: " + action);
}
```
Button をタップすると、OnDisplayActionSheetButtonClicked メソッドが実行されます。このメソッドは、DisplayActionSheet メソッドを呼び出し、タスクを続行するための一連の代替方法をユーザーに提供します。ユーザーがいずれかの代替方法を選択すると、その選択が string として返されます。

重要

DisplayActionSheet メソッドは非同期であり、await キーワードで常に待機される必要があります。
Visual Studio ツールバーで、 [開始] ボタン ([再生] ボタンに似た三角形のボタン) を押し、選択したリモート iOS シミュレーターまたは Android エミュレーター内でアプリケーションを起動します。次に、ContentPage に追加した Button をタップします。

アクションシートダイアログで代替方法を選択した後、その選択が Visual Studio の [出力] ウィンドウに出力されることを確認します。このウィンドウが表示されていない場合は、[表示] > [出力] メニューオプションを選択すると表示されます。

Visual Studio で、アプリケーションを停止します。

アクションシートの表示に関する詳細は、「Display Pop-ups (ポップアップの表示)」ガイドの「Guide users through tasks (タスクを通じたユーザーのガイド)」をご覧ください。

MainPage.xaml で、アクションシートを表示する新しい Button 宣言を追加します。
```
<Button Text="Display action sheet"
        Clicked="OnDisplayActionSheetButtonClicked" />
```
Button.Text プロパティでは、Button に表示するテキストを指定します。さらに、Clicked イベントは、次の手順で作成する OnDisplayActionSheetButtonClicked という名前のイベントハンドラーに設定されます。
Solution Pad の PopupsTutorial プロジェクトで [MainPage.xaml] を展開し、[MainPage.xaml.cs] をダブルクリックして開きます。次に、MainPage.xaml.cs で、OnDisplayActionSheetButtonClicked イベントハンドラーをクラスに追加します。
```
async void OnDisplayActionSheetButtonClicked(object sender, EventArgs e)
{
    string action = await DisplayActionSheet("Send to?", "Cancel", null, "Email", "Twitter", "Facebook");
    Console.WriteLine("Action: " + action);
}
```
Button をタップすると、OnDisplayActionSheetButtonClicked メソッドが実行されます。このメソッドは、DisplayActionSheet メソッドを呼び出し、タスクを続行するための一連の代替方法をユーザーに提供します。ユーザーがいずれかの代替方法を選択すると、その選択が string として返されます。

重要

DisplayActionSheet メソッドは非同期であり、await キーワードで常に待機される必要があります。
Visual Studio for Mac ツールバーで、 [開始] ボタン ([再生] ボタンに似た三角形のボタン) を押し、選択した iOS シミュレーターまたは Android エミュレーター内でアプリケーションを起動します。次に、ContentPage に追加した Button をタップします。

アクションシートダイアログで代替方法を選択した後、その選択が Visual Studio for Mac の [出力] ウィンドウに出力されることを確認します。このウィンドウが表示されていない場合は、[表示] > [その他のウィンドウ] > [アプリケーション出力] メニューオプションを選択すると表示されます。

Visual Studio for Mac で、アプリケーションを停止します。

アクションシートの表示に関する詳細は、「Display Pop-ups (ポップアップの表示)」ガイドの「Guide users through tasks (タスクを通じたユーザーのガイド)」をご覧ください。

Xamarin.Forms Pop-ups のチュートリアル

アラートを表示する

アクションシートを表示する

おめでとうございます。

次のステップ

Xamarin.Forms Pop-ups のチュートリアル

アラートを表示する

アクション シートを表示する

おめでとうございます。

次のステップ

関連リンク

アクションシートを表示する