Xamarin.Forms Entry のチュートリアル

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

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

   重要

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

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

2. ソリューション エクスプローラーの EntryTutorial プロジェクトで、[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="EntryTutorial.MainPage">
       <StackLayout Margin="20,35,20,20">
           <Entry Placeholder="Enter text" />
       </StackLayout>
   </ContentPage>
   

   このコードでは、StackLayout の中の Entry から構成されるページのユーザー インターフェイスを宣言によって定義します。 Entry.Placeholder プロパティは、Entry が最初に表示されたときに表示されるプレースホルダー テキストを指定します。

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

   

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

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

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

   重要

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

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

2. Solution Pad の EntryTutorial プロジェクトで、[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="EntryTutorial.MainPage">
       <StackLayout Margin="20,35,20,20">
           <Entry Placeholder="Enter text" />
       </StackLayout>
   </ContentPage>
   

   このコードでは、StackLayout の中の Entry から構成されるページのユーザー インターフェイスを宣言によって定義します。 Entry.Placeholder プロパティは、Entry が最初に表示されたときに表示されるプレースホルダー テキストを指定します。

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

   

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

1. [MainPage.xaml] で、TextChanged イベントと Completed イベントのハンドラーを設定するように Entry 宣言を変更します。

   <Entry Placeholder="Enter text"
          TextChanged="OnEntryTextChanged"
          Completed="OnEntryCompleted" />
   

   このコードは、TextChanged イベントを OnEntryTextChanged という名前のイベント ハンドラーに設定し、Completed イベントを OnEntryCompleted という名前のイベント ハンドラーに設定します。 どちらのイベント ハンドラーも次の手順で作成されます。

2. ソリューション エクスプローラーの EntryTutorial プロジェクトで [MainPage.xaml] を展開し、[MainPage.xaml.cs] をダブルクリックして開きます。 次に、 [MainPage.xaml.cs] で、OnEntryTextChanged と OnEntryCompleted のイベント ハンドラーをクラスに追加します。

   void OnEntryTextChanged(object sender, TextChangedEventArgs e)
   {
       string oldText = e.OldTextValue;
       string newText = e.NewTextValue;
   }
   
   void OnEntryCompleted(object sender, EventArgs e)
   {
       string text = ((Entry)sender).Text;
   }
   

   Entry のテキストが変更されると、OnEntryTextChanged メソッドが実行されます。 sender 引数は、TextChanged イベントの発生を担当する Entry オブジェクトであり、Entry オブジェクトへのアクセスに使用できます。 TextChangedEventArgs 引数は、テキストの変更前と変更後の古いテキスト値と新しいテキスト値を提供します。

   Return キーで Entry のテキストを確定すると、OnEntryCompleted メソッドが実行されます。 sender 引数は、TextChanged イベントの発生を担当する Entry オブジェクトであり、Entry オブジェクトへのアクセスに使用できます。

   重要

   Entry に入力されたテキストはすべて Text プロパティに格納されます。

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

   

   2 つのイベント ハンドラーにブレークポイントを設定し、Entry にテキストを入力して、TextChanged と Completed のイベントの発生を確認します。

   Entry イベントの詳細については、「Xamarin.Forms Entry」ガイドの「Events and Interactivity」(イベントとインタラクティビティ) をご覧ください。

1. [MainPage.xaml] で、TextChanged イベントと Completed イベントのハンドラーを設定するように Entry 宣言を変更します。

   <Entry Placeholder="Enter text"
          TextChanged="OnEntryTextChanged"
          Completed="OnEntryCompleted" />
   

   このコードは、TextChanged イベントを OnEntryTextChanged という名前のイベント ハンドラーに設定し、Completed イベントを OnEntryCompleted という名前のイベント ハンドラーに設定します。 どちらのイベント ハンドラーも次の手順で作成されます。

2. Solution Pad の EntryTutorial プロジェクトで [MainPage.xaml] を展開し、[MainPage.xaml.cs] をダブルクリックして開きます。 次に、 [MainPage.xaml.cs] で、OnEntryTextChanged と OnEntryCompleted のイベント ハンドラーをクラスに追加します。

   void OnEntryTextChanged(object sender, TextChangedEventArgs e)
   {
       string oldText = e.OldTextValue;
       string newText = e.NewTextValue;
   }
   
   void OnEntryCompleted(object sender, EventArgs e)
   {
       string text = ((Entry)sender).Text;
   }
   

   Entry のテキストが変更されると、OnEntryTextChanged メソッドが実行されます。 sender 引数は、TextChanged イベントの発生を担当する Entry オブジェクトであり、Entry オブジェクトへのアクセスに使用できます。 TextChangedEventArgs 引数は、テキストの変更前と変更後の古いテキスト値と新しいテキスト値を提供します。

   Return キーで Entry のテキストを確定すると、OnEntryCompleted メソッドが実行されます。 sender 引数は、TextChanged イベントの発生を担当する Entry オブジェクトであり、Entry オブジェクトへのアクセスに使用できます。

   重要

   Entry に入力されたテキストはすべて Text プロパティに格納されます。

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

   

   2 つのイベント ハンドラーにブレークポイントを設定し、Entry にテキストを入力して、TextChanged と Completed のイベントの発生を確認します。

   Entry イベントの詳細については、「Xamarin.Forms Entry」ガイドの「Events and Interactivity」(イベントとインタラクティビティ) をご覧ください。

1. [MainPage.xaml] で、Entry 宣言を変更して、その動作をカスタマイズします。

   <Entry Placeholder="Enter password"
          MaxLength="15"
          IsSpellCheckEnabled="false"
          IsTextPredictionEnabled="false"
          IsPassword="true" />
   

   このコードでは、Entry の動作をカスタマイズするプロパティを設定します。 MaxLength プロパティでは、Entry で許可されている入力の長さが制限され、IsSpellCheckEnabled プロパティは、スペルチェックを無効にするために false に設定されます。 同様に、IsTextPredictionEnabled プロパティは、予測入力と自動予測入力を無効にするために false に設定されます。 さらに、IsPassword プロパティでは、入力された文字が確実にパスワード文字 (黒丸) でマスクされるようにします。

   Note

   パスワードの入力などの一部のテキスト入力シナリオの場合、スペルチェックと予測入力でネガティブなエクスペリエンスが提供されるため、これらは無効にする必要があります。

2. アプリケーションがまだ実行されている場合は、変更内容をファイルに保存すると、アプリケーションのユーザー インターフェイスがシミュレーターまたはエミュレーターで自動的に更新されます。 もしくは、Visual Studio ツール バーで、 [開始] ボタン ([再生] ボタンに似た三角形のボタン) を押し、選択したリモート iOS シミュレーターまたは Android エミュレーター内でアプリケーションを起動します。 テキストを Entry に入力し、各文字がパスワード マスク文字で置き換えられており、入力できる文字の最大数が 15 であることを確認します。

   

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

   Entry 動作のカスタマイズの詳細については、「Xamarin.Forms Entry」ガイドを参照してください。

1. [MainPage.xaml] で、Entry 宣言を変更して、その動作をカスタマイズします。

   <Entry Placeholder="Enter password"
          MaxLength="15"
          IsSpellCheckEnabled="false"
          IsTextPredictionEnabled="false"
          IsPassword="true" />
   

   このコードでは、Entry の動作をカスタマイズするプロパティを設定します。 MaxLength プロパティでは、Entry で許可されている入力の長さが制限され、IsSpellCheckEnabled プロパティは、スペルチェックを無効にするために false に設定されます。 同様に、IsTextPredictionEnabled プロパティは、予測入力と自動予測入力を無効にするために false に設定されます。 さらに、IsPassword プロパティでは、入力された文字が確実にパスワード文字 (黒丸) でマスクされるようにします。

   Note

   パスワードの入力などの一部のテキスト入力シナリオの場合、スペルチェックと予測入力でネガティブなエクスペリエンスが提供されるため、これらは無効にする必要があります。

2. アプリケーションがまだ実行されている場合は、変更内容をファイルに保存すると、アプリケーションのユーザー インターフェイスがシミュレーターまたはエミュレーターで自動的に更新されます。 もしくは、Visual Studio for Mac ツール バーで、 [開始] ボタン ([再生] ボタンに似た三角形のボタン) を押し、選択した iOS シミュレーターまたは Android エミュレーター内でアプリケーションを起動します。 テキストを Entry に入力し、各文字がパスワード マスク文字で置き換えられており、入力できる文字の最大数が 15 であることを確認します。

   

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

   Entry 動作のカスタマイズの詳細については、「Xamarin.Forms Entry」ガイドを参照してください。