Xamarin.Forms エントリ

  • [アーティクル]

Download Sampleサンプルのダウンロード

これは Xamarin.FormsEntry 、1 行のテキスト入力に使用されます。 Entryビューと同様にEditor、複数のキーボードの種類がサポートされています。 さらに、 Entry パスワード フィールドとして使用できます。

テキストの設定と読み取り

他の Entryテキスト表示ビューと同様に、プロパティが Text 公開されます。 このプロパティは、設定し、によって提示されるテキストを読み取るために使用することができます、 Entry. 次の例は、XAML でプロパティを設定する方法を Text 示しています。

<Entry x:Name="entry" Text="I am an Entry" />

C# の場合:

var entry = new Entry { Text = "I am an Entry" };

テキストを読み取るために、C# の Text プロパティにアクセスします。

var text = entry.Text;

プレースホルダー テキストを設定する

ユーザー Entry 入力を格納していない場合にプレースホルダー テキストを表示するように設定できます。 これは、プロパティを Placeholder a stringに設定することによって実現され、多くの場合、適切な Entryコンテンツの種類を示すために使用されます。 さらに、プレースホルダーのテキストの色は、プロパティColorを次のようにPlaceholderColor設定することで制御できます。

<Entry Placeholder="Username" PlaceholderColor="Olive" />

var entry = new Entry { Placeholder = "Username", PlaceholderColor = Color.Olive };

Note

プロパティを設定することで、an Entry の幅を WidthRequest 定義できます。 プロパティの Entry 値 Text に基づいて定義されている幅に依存しないでください。

テキスト入力を禁止する

ユーザーが Entry 内のテキストを変更できないようにするには、IsReadOnly プロパティの既定値を false から true に変更します。

<Entry Text="This is a read-only Entry"
       IsReadOnly="true" />

var entry = new Entry { Text = "This is a read-only Entry", IsReadOnly = true });

Note

IsReadonly プロパティは、Entry の外観を灰色に変更する IsEnabled プロパティとは異なり、Entry の外観を変更しません。

テキストの変換

Entry は、Text プロパティに格納されているテキストの大文字と小文字を変換できます。これを実行するには、TextTransform プロパティを TextTransform 列挙の値に設定します。 この列挙には、次の 4 つの値があります。

  • None は、テキストが変換されていないことを示します。
  • Default は、プラットフォームの既定の動作が使われることを示します。 これは、TextTransform プロパティの既定値です。
  • Lowercase は、テキストが小文字に変換されることを示します。
  • Uppercase は、テキストが大文字に変換されることを示します。

次は、テキストを大文字に変換する例を示しています。

<Entry Text="This text will be displayed in uppercase."
       TextTransform="Uppercase" />

同等の C# コードを次に示します。

Entry entry = new Entry
{
    Text = "This text will be displayed in uppercase.",
    TextTransform = TextTransform.Uppercase
};

入力の長さの制限

MaxLength プロパティを使用すると、Entry に許可される入力長を制限できます。 このプロパティは正の整数に設定する必要があります。

<Entry ... MaxLength="10" />

var entry = new Entry { ... MaxLength = 10 };

MaxLength プロパティ値 0 は入力が許可されないことを示し、値 int.MaxValue (Entry の既定値) は入力できる文字数に有効な制限がないことを示します。

文字間隔

Entry.CharacterSpacing プロパティを double 値に設定することで、文字間隔を Entry に適用できます。

<Entry ...
       CharacterSpacing="10" />

同等の C# コードを次に示します。

Entry entry = new Entry { CharacterSpacing = 10 };

結果として、Entry により表示されるテキスト内の文字は、デバイスに依存しない単位で CharacterSpacing 間隔になります。

Note

CharacterSpacing プロパティ値は、Text プロパティと Placeholder プロパティによって表示されるテキストに適用されます。

パスワード フィールド

Entry はプロパティを提供します IsPassword 。 このtrue場合IsPassword、フィールドの内容は黒い円として表示されます。

XAML の場合:

<Entry IsPassword="true" />

C# の場合:

var MyEntry = new Entry { IsPassword = true };

Entry IsPassword Example

プレースホルダーは、パスワード フィールドとして構成されているインスタンス Entry と共に使用できます。

XAML の場合:

<Entry IsPassword="true" Placeholder="Password" />

C# の場合:

var MyEntry = new Entry { IsPassword = true, Placeholder = "Password" };

Entry IsPassword and Placeholder Example

カーソル位置とテキスト選択の長さを設定する

CursorPosition プロパティを使用すると、文字列に次の文字を挿入する位置を返すか設定できます。この文字列は、Text プロパティに格納されています。

<Entry Text="Cursor position set" CursorPosition="5" />

var entry = new Entry { Text = "Cursor position set", CursorPosition = 5 };

CursorPosition プロパティの既定値は 0 です。これは、Entry の先頭にテキストが挿入されることを示します。

さらに、SelectionLength プロパティを使用して、Entry 内のテキスト選択の長さを返すか設定できます。

<Entry Text="Cursor position and selection length set" CursorPosition="2" SelectionLength="10" />

var entry = new Entry { Text = "Cursor position and selection length set", CursorPosition = 2, SelectionLength = 10 };

SelectionLength プロパティの既定値は 0 です。これは、テキストが選択されていないことを示します。

クリア ボタンを表示する

ClearButtonVisibility プロパティを使用すると、Entry にクリア ボタンを表示するかどうかを制御できます。このボタンを使用すると、ユーザーはテキストをクリアできます。 このプロパティは、ClearButtonVisibility 列挙メンバーに設定する必要があります。

  • Never は、クリア ボタンが表示されないようにすることを示します。 これは、Entry.ClearButtonVisibility プロパティの既定値です。
  • WhileEditing は、フォーカスとテキストがある間、クリア ボタンが Entry に表示されることを示します。

次の例は、XAML でのプロパティの設定を示しています。

<Entry Text="Xamarin.Forms"
       ClearButtonVisibility="WhileEditing" />

同等の C# コードを次に示します。

var entry = new Entry { Text = "Xamarin.Forms", ClearButtonVisibility = ClearButtonVisibility.WhileEditing };

次のスクリーンショットは、クリア ボタンが有効になっている状態を示しています Entry 。

Screenshot of an Entry with a clear button, on iOS and Android

キーボードのカスタマイズ

ユーザーが Entry を操作するときに表示されるキーボードは、Keyboard プロパティを使用して、Keyboard クラスの次のプロパティのいずれかにプログラムで設定できます。

  • Chat - 絵文字が使えるテキスト メッセージや場所に使います。
  • Default - 既定のキーボード。
  • Email - 電子メール アドレスを入力するときに使用します。
  • Numeric - 数値を入力するときに使用します。
  • Plain - KeyboardFlags を指定しないで、テキストを入力するときに使用します。
  • Telephone - 電話番号を入力するときに使用します。
  • Text - テキストを入力するときに使用します。
  • Url - ファイル パスおよび Web アドレスを入力するために使用します。

XAML では次のようにしてこれを実現できます。

<Entry Keyboard="Chat" />

同等の C# コードを次に示します。

var entry = new Entry { Keyboard = Keyboard.Chat };

各キーボードの例は、Recipes リポジトリにあります。

Keyboard クラスには、大文字の設定、スペルチェック、および単語補完候補の動作を指定することで、キーボードをカスタマイズするために使用できる Create ファクトリ メソッドもあります。 KeyboardFlags 列挙値がメソッドへの引数として指定され、カスタマイズされた Keyboard が返されます。 KeyboardFlags 列挙体には次の値が含まれます。

  • None - キーボードに機能は追加されません。
  • CapitalizeSentence - 入力された各文の最初の単語の最初の文字が自動的に大文字になることを示します。
  • Spellcheck - 入力したテキストに対してスペル チェックが実行されることを示します。
  • Suggestions - 入力したテキストに対して単語補完が提供されることを示します。
  • CapitalizeWord - 各単語の最初の文字が自動的に大文字になることを示します。
  • CapitalizeCharacter - すべての文字が自動的に大文字になることを示します。
  • CapitalizeNone - 大文字の自動設定を行わないことを示します。
  • All - 入力したテキストに対して、スペルチェック、単語補完、および文への大文字の設定が行われることを示します。

次の XAML コード例は、既定の Keyboard をカスタマイズして、単語補完を提供し、入力したすべての文字を大文字に設定する方法を示しています。

<Entry Placeholder="Enter text here">
    <Entry.Keyboard>
        <Keyboard x:FactoryMethod="Create">
            <x:Arguments>
                <KeyboardFlags>Suggestions,CapitalizeCharacter</KeyboardFlags>
            </x:Arguments>
        </Keyboard>
    </Entry.Keyboard>
</Entry>

同等の C# コードを次に示します。

var entry = new Entry { Placeholder = "Enter text here" };
entry.Keyboard = Keyboard.Create(KeyboardFlags.Suggestions | KeyboardFlags.CapitalizeCharacter);

リターン キーをカスタマイズする

フォーカスがあるときに表示される Entry ソフト キーボードの戻りキーの外観は、プロパティを ReturnType 列挙体の ReturnType 値に設定することでカスタマイズできます。

  • Default: 特定のリターン キーが必要なく、プラットフォームの既定値が使用されることを示します。
  • Done: "完了" リターン キーを示します。
  • Go: "移動" リターン キーを示します。
  • Next: "次へ" リターン キーを示します。
  • Search: "検索" リターン キーを示します。
  • Send: "送信" リターン キーを示します。

次の XAML 例は、リターン キーを設定する方法を示しています。

<Entry ReturnType="Send" />

同等の C# コードを次に示します。

var entry = new Entry { ReturnType = ReturnType.Send };

Note

リターン キーの正確な外観は、プラットフォームによって異なります。 iOS では、リターン キーはテキストベースのボタンです。 ただし、Android と ユニバーサル Windows プラットフォーム では、戻りキーはアイコンベースのボタンです。

リターン キーが押されると、Completed イベントが発生し、ReturnCommand プロパティで指定されたすべての ICommand が実行されます。 さらに、ReturnCommandParameter プロパティで指定されたすべての object が、パラメーターとして ICommand に渡されます。 コマンドについて詳しくは、コマンド インターフェイスに関するページをご覧ください。

スペル チェックの有効化と無効化

IsSpellCheckEnabled プロパティは、スペル チェックを有効にするかどうかを制御します。 既定では、プロパティは true に設定されています。 ユーザーがテキストを入力すると、スペルミスが示されます。

ただし、ユーザー名の入力などの一部のテキスト入力シナリオでは、スペル チェックはエクスペリエンスに悪影響を及ぼすので、次のように IsSpellCheckEnabled プロパティを false に設定して無効にする必要があります。

<Entry ... IsSpellCheckEnabled="false" />

var entry = new Entry { ... IsSpellCheckEnabled = false };

Note

IsSpellCheckEnabled プロパティが false に設定されていて、カスタム キーボードが使用されていない場合、ネイティブ スペル チェック機能は無効になります。 ただし、Keyboard でスペル チェック機能が無効になっている場合 (Keyboard.Chat など)、IsSpellCheckEnabled プロパティは無視されます。 そのため、このプロパティを使用して、Keyboard で明示的に無効になっているスペル チェック機能を有効にすることはできません。

テキスト予測を有効または無効にする

IsTextPredictionEnabled プロパティは、テキスト予測と自動テキスト修正を有効にするかどうかを制御します。 既定では、プロパティは true に設定されています。 ユーザーがテキストを入力すると、単語の予測が表示されます。

ただし、一部のテキスト入力のシナリオでは (ユーザー名の入力など)、テキスト予測と自動テキスト修正が操作性に悪影響を与えるため、IsTextPredictionEnabled プロパティを false に設定して、テキスト予測と自動テキスト修正を無効にする必要があります。

<Entry ... IsTextPredictionEnabled="false" />

var entry = new Entry { ... IsTextPredictionEnabled = false };

Note

IsTextPredictionEnabled プロパティが false に設定されていて、カスタム キーボードが使用されていない場合、テキスト予測と自動テキスト修正は無効になります。 ただし、Keyboard でテキスト予測が無効になっている場合、IsTextPredictionEnabled プロパティは無視されます。 そのため、このプロパティを使用して、Keyboard で明示的に無効になっているテキスト予測を有効にすることはできません。

色

次のバインド可能なプロパティを使用して、カスタムの背景色とテキストの色を使用するようにエントリを設定できます。

  • TextColor – テキストの色を設定します。
  • BackgroundColor – テキストの背後に表示される色を設定します。

各プラットフォームで色を使用できるようにするには、特別な注意が必要です。 各プラットフォームにはテキストと背景色の既定値が異なるため、多くの場合、両方を設定する場合は両方を設定する必要があります。

次のコードを使用して、エントリのテキストの色を設定します。

XAML の場合:

<Entry TextColor="Green" />

C# の場合:

var entry = new Entry();
entry.TextColor = Color.Green;

Entry TextColor Example

プレースホルダーは、指定した値の影響を受けないことをご注意ください TextColor。

XAML で背景色を設定するには:

<Entry BackgroundColor="#2c3e50" />

C# の場合:

var entry = new Entry();
entry.BackgroundColor = Color.FromHex("#2c3e50");

Entry BackgroundColor Example

選択した背景とテキストの色が各プラットフォームで使用できることを確認し、プレースホルダー テキストを隠さないように注意してください。

イベントと対話機能

エントリは、次の 2 つのイベントを公開します。

  • TextChanged – テキストがエントリ内で変更されたときに発生します。 変更の前後のテキストを提供します。
  • Completed – ユーザーがキーボードのリターン キーを押して入力を終了したときに発生します。

Note

VisualElement継承元のEntryクラスにもFocusedイベントがありますUnfocused。

完了済み

イベントは Completed 、Entry との対話の完了に対応するために使用されます。 Completed は、ユーザーがキーボードのリターン キーを押すか、UWP の Tab キーを押して、フィールドで入力を終了したときに発生します。 イベントのハンドラーは汎用イベント ハンドラーであり、送信者を EventArgs受け取り、次の処理を行います。

void Entry_Completed (object sender, EventArgs e)
{
    var text = ((Entry)sender).Text; //cast sender to access the properties of the Entry
}

完成したイベントは XAML でサブスクライブできます。

<Entry Completed="Entry_Completed" />

および C#:

var entry = new Entry ();
entry.Completed += Entry_Completed;

Completed イベントが発生すると、ReturnCommand プロパティで指定された任意の ICommand プロパティが実行され、ReturnCommandParameter プロパティで指定された object が ICommand に渡されます。

TextChanged

イベントは TextChanged 、フィールドの内容の変更に対応するために使用されます。

TextChanged は、変更が行われるたびに Text 発生します Entry 。 イベントのハンドラーは、次の TextChangedEventArgsインスタンスを受け取ります。 TextChangedEventArgsでは、次のプロパティを介して古い値と新しい値EntryTextにOldTextValueNewTextValueアクセスできます。

void Entry_TextChanged (object sender, TextChangedEventArgs e)
{
    var oldText = e.OldTextValue;
    var newText = e.NewTextValue;
}

イベントは TextChanged XAML でサブスクライブできます。

<Entry TextChanged="Entry_TextChanged" />

および C#:

var entry = new Entry ();
entry.TextChanged += Entry_TextChanged;