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

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

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

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

このチュートリアルでは、次の作業を行う方法について説明します。

XAML で Xamarin.FormsEditor を作成する。
Editor の変更中にテキストに応答する。
Editor の動作をカスタマイズする。

Editor の動作をカスタマイズする方法を示す簡単なアプリケーションを作成するには、Visual Studio 2019 または Visual Studio for Mac を使用します。次のスクリーンショットは、最終的なアプリケーションです。

また、Xamarin.Forms 向け XAML ホットリロードを使用して、アプリケーションをリビルドせずに UI の変更を確認することもできます。

エディターを作成する

残り 7 分

Visual Studio
Visual Studio for Mac

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

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

重要

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

作成される .NET Standard ライブラリの詳細については、Xamarin.Forms クイックスタート Deep Dive の「Xamarin.Forms アプリケーションの構造」を参照してください。
ソリューションエクスプローラーの 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 の高さをデバイスに依存しない単位で指定します。
Visual Studio ツールバーで、 [開始] ボタン ([再生] ボタンに似た三角形のボタン) を押し、選択したリモート iOS シミュレーターまたは Android エミュレーター内でアプリケーションを起動します。

Note

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

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

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

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

重要

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

作成される .NET Standard ライブラリの詳細については、Xamarin.Forms クイックスタート Deep Dive の「Xamarin.Forms アプリケーションの構造」を参照してください。
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 の高さをデバイスに依存しない単位で指定します。
Visual Studio for Mac ツールバーで、 [開始] ボタン ([再生] ボタンに似た三角形のボタン) を押し、選択した iOS シミュレーターまたは Android エミュレーター内でアプリケーションを起動します。

Note

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

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

テキストの変更に応答する

残り 5 分

Visual Studio
Visual Studio for Mac

[MainPage.xaml] で、TextChanged イベントと Completed イベントのハンドラーを設定するように Editor 宣言を変更します。
```
<Editor Placeholder="Enter multi-line text here"
        HeightRequest="200"
        TextChanged="OnEditorTextChanged"
        Completed="OnEditorCompleted" />
```
このコードは、TextChanged イベントを OnEditorTextChanged という名前のイベントハンドラーに設定し、Completed イベントを OnEditorCompleted という名前のイベントハンドラーに設定します。どちらのイベントハンドラーも次の手順で作成されます。
ソリューションエクスプローラーの [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 プロパティに格納されます。
Visual Studio ツールバーで、 [開始] ボタン ([再生] ボタンに似た三角形のボタン) を押し、選択したリモート iOS シミュレーターまたは Android エミュレーター内でアプリケーションを起動します。

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

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

[MainPage.xaml] で、TextChanged イベントと Completed イベントのハンドラーを設定するように Editor 宣言を変更します。
```
<Editor Placeholder="Enter multi-line text here"
        HeightRequest="200"
        TextChanged="OnEditorTextChanged"
        Completed="OnEditorCompleted" />
```
このコードは、TextChanged イベントを OnEditorTextChanged という名前のイベントハンドラーに設定し、Completed イベントを OnEditorCompleted という名前のイベントハンドラーに設定します。どちらのイベントハンドラーも次の手順で作成されます。
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 プロパティに格納されます。
Visual Studio for Mac ツールバーで、 [開始] ボタン ([再生] ボタンに似た三角形のボタン) を押し、選択した iOS シミュレーターまたは Android エミュレーター内でアプリケーションを起動します。

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

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

動作をカスタマイズする

残り 2 分

Visual Studio
Visual Studio for Mac

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

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

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

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

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

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

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

エディターを作成する

テキストの変更に応答する

動作をカスタマイズする

おめでとうございます。

次の手順

関連リンク