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

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

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

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

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

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

Entry の動作をカスタマイズする方法を示す簡単なアプリケーションを作成するには、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 を起動し、EntryTutorial という名前の新しい空の Xamarin.Forms アプリを作成します。

重要

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

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

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

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

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

重要

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

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

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

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

残り 5 分

Visual Studio
Visual Studio for Mac

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

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

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

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

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

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

動作をカスタマイズする

残り 2 分

Visual Studio
Visual Studio for Mac

[MainPage.xaml] で、Entry 宣言を変更して、その動作をカスタマイズします。
```
<Entry Placeholder="Enter password"
       MaxLength="15"
       IsSpellCheckEnabled="false"
       IsTextPredictionEnabled="false"
       IsPassword="true" />
```
このコードでは、Entry の動作をカスタマイズするプロパティを設定します。 MaxLength プロパティでは、Entry で許可されている入力の長さが制限され、IsSpellCheckEnabled プロパティは、スペルチェックを無効にするために false に設定されます。同様に、IsTextPredictionEnabled プロパティは、予測入力と自動予測入力を無効にするために false に設定されます。さらに、IsPassword プロパティでは、入力された文字が確実にパスワード文字 (黒丸) でマスクされるようにします。

Note

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

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

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

[MainPage.xaml] で、Entry 宣言を変更して、その動作をカスタマイズします。
```
<Entry Placeholder="Enter password"
       MaxLength="15"
       IsSpellCheckEnabled="false"
       IsTextPredictionEnabled="false"
       IsPassword="true" />
```
このコードでは、Entry の動作をカスタマイズするプロパティを設定します。 MaxLength プロパティでは、Entry で許可されている入力の長さが制限され、IsSpellCheckEnabled プロパティは、スペルチェックを無効にするために false に設定されます。同様に、IsTextPredictionEnabled プロパティは、予測入力と自動予測入力を無効にするために false に設定されます。さらに、IsPassword プロパティでは、入力された文字が確実にパスワード文字 (黒丸) でマスクされるようにします。

Note

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

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

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

次の方法で共有

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

エントリを作成する

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

動作をカスタマイズする

おめでとうございます。

次の手順

次の方法で共有

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

エントリを作成する

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

動作をカスタマイズする

おめでとうございます。

次の手順

関連リンク