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

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

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

   重要

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

   作成される .NET Standard ライブラリの詳細については、Xamarin.Forms クイック スタート Deep Dive の「Xamarin.Forms アプリケーションの構造」を参照してください。

2. ソリューション エクスプローラーの [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 イベントは、次の手順で作成されるイベント ハンドラーに設定されます。

3. ソリューション エクスプローラーの 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 キーワードで常に待機される必要があります。

4. 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 のインストール」を参照してください。

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

   重要

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

   作成される .NET Standard ライブラリの詳細については、Xamarin.Forms クイック スタート Deep Dive の「Xamarin.Forms アプリケーションの構造」を参照してください。

2. 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 イベントは、次の手順で作成されるイベント ハンドラーに設定されます。

3. 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 キーワードで常に待機される必要があります。

4. Visual Studio for Mac ツール バーで、 [開始] ボタン ([再生] ボタンに似た三角形のボタン) を押し、選択した iOS シミュレーターまたは Android エミュレーター内でアプリケーションを起動します。 次に、最初の Button をタップします。

   

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

   

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

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

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

1. MainPage.xaml で、アクション シートを表示する新しい Button 宣言を追加します。

   <Button Text="Display action sheet"
           Clicked="OnDisplayActionSheetButtonClicked" />
   

   Button.Text プロパティでは、Button に表示するテキストを指定します。 さらに、Clicked イベントは、次の手順で作成する OnDisplayActionSheetButtonClicked という名前のイベント ハンドラーに設定されます。

2. ソリューション エクスプローラーの 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 キーワードで常に待機される必要があります。

3. Visual Studio ツール バーで、 [開始] ボタン ([再生] ボタンに似た三角形のボタン) を押し、選択したリモート iOS シミュレーターまたは Android エミュレーター内でアプリケーションを起動します。 次に、ContentPage に追加した Button をタップします。

   

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

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

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

1. MainPage.xaml で、アクション シートを表示する新しい Button 宣言を追加します。

   <Button Text="Display action sheet"
           Clicked="OnDisplayActionSheetButtonClicked" />
   

   Button.Text プロパティでは、Button に表示するテキストを指定します。 さらに、Clicked イベントは、次の手順で作成する OnDisplayActionSheetButtonClicked という名前のイベント ハンドラーに設定されます。

2. 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 キーワードで常に待機される必要があります。

3. Visual Studio for Mac ツール バーで、 [開始] ボタン ([再生] ボタンに似た三角形のボタン) を押し、選択した iOS シミュレーターまたは Android エミュレーター内でアプリケーションを起動します。 次に、ContentPage に追加した Button をタップします。

   

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

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

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