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

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

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

   重要

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

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

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

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

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

   

   注意

   Android では Editor の高さが示されますが、iOS では示されません。

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

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

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

   重要

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

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

2. Solution Pad の EditorTutorial プロジェクトで、[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="EditorTutorial.MainPage">
       <StackLayout Margin="20,35,20,20">
           <Editor Placeholder="Enter multi-line text here"
                   HeightRequest="200" />
       </StackLayout>
   </ContentPage>
   

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

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

   

   注意

   Android では Editor の高さが示されますが、iOS では示されません。

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

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

   <Editor Placeholder="Enter multi-line text here"
           HeightRequest="200"
           TextChanged="OnEditorTextChanged"
           Completed="OnEditorCompleted" />
   

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

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

   void OnEditorTextChanged(object sender, TextChangedEventArgs e)
   {
       string oldText = e.OldTextValue;
       string newText = e.NewTextValue;
   }
   
   void OnEditorCompleted(object sender, EventArgs e)
   {
       string text = ((Editor)sender).Text;
   }
   

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

   編集が完了すると、OnEditorCompleted メソッドが実行されます。 これは、Editor からフォーカスを外すか、さらに iOS では [完了] ボタンを押して行います。 sender 引数は、TextChanged イベントの発生を担当する Editor オブジェクトであり、Editor オブジェクトへのアクセスに使用できます。

   重要

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

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

   

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

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

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

   <Editor Placeholder="Enter multi-line text here"
           HeightRequest="200"
           TextChanged="OnEditorTextChanged"
           Completed="OnEditorCompleted" />
   

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

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

   void OnEditorTextChanged(object sender, TextChangedEventArgs e)
   {
       string oldText = e.OldTextValue;
       string newText = e.NewTextValue;
   }
   
   void OnEditorCompleted(object sender, EventArgs e)
   {
       string text = ((Editor)sender).Text;
   }
   

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

   編集が完了すると、OnEditorCompleted メソッドが実行されます。 これは、Editor からフォーカスを外すか、さらに iOS では [完了] ボタンを押して行います。 sender 引数は、TextChanged イベントの発生を担当する Editor オブジェクトであり、Editor オブジェクトへのアクセスに使用できます。

   重要

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

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

   

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

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

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

   <Editor Placeholder="Enter multi-line text here"
           AutoSize="TextChanges"
           MaxLength="200"
           IsSpellCheckEnabled="false"
           IsTextPredictionEnabled="false" />
   

   このコードでは、Editor の動作をカスタマイズするプロパティを設定します。 AutoSize プロパティは TextChanges に設定されます。これは、Editor の高さが、テキストが取り込まれたときに増え、テキストが削除されたときに減ることを示します。 MaxLength プロパティでは、Editor に許可されている入力の長さを制限します。 さらに、IsSpellCheckEnabled プロパティはスペルチェックを無効にするために false に設定され、一方、IsTextPredictionEnabled プロパティは予測入力と自動予測入力を無効にするために false に設定されます。

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

   

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

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

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

   <Editor Placeholder="Enter multi-line text here"
           AutoSize="TextChanges"
           MaxLength="200"
           IsSpellCheckEnabled="false"
           IsTextPredictionEnabled="false" />
   

   このコードでは、Editor の動作をカスタマイズするプロパティを設定します。 AutoSize プロパティは TextChanges に設定されます。これは、Editor の高さが、テキストが取り込まれたときに増え、テキストが削除されたときに減ることを示します。 MaxLength プロパティでは、Editor に許可されている入力の長さを制限します。 さらに、IsSpellCheckEnabled プロパティはスペルチェックを無効にするために false に設定され、一方、IsTextPredictionEnabled プロパティは予測入力と自動予測入力を無効にするために false に設定されます。

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

   

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

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