エディター

  • [アーティクル]

.NET マルチプラットフォーム アプリ UI (.NET MAUI) Editor を使用すると、複数行のテキストを入力および編集できます。

Editor は次の特性を定義します。

  • AutoSize型 EditorAutoSizeOptionの は、エディターがユーザー入力に合わせてサイズを変更するかどうかを定義します。 既定では、エディターのサイズは自動的に設定されません。
  • CharacterSpacing型 doubleの 。 は、入力したテキストの文字間の間隔を設定します。
  • CursorPosition型 intの は、エディター内でのカーソルの位置を定義します。
  • FontAttributes型 FontAttributesの 。 は、テキスト スタイルを決定します。
  • FontAutoScalingEnabled型 boolの は、オペレーティング システムで設定されたスケーリング設定をテキストに反映するかどうかを定義します。 このプロパティの既定値は true です。
  • FontFamily型 stringの は、フォント ファミリを定義します。
  • FontSize型 doubleの は、フォント サイズを定義します。
  • HorizontalTextAlignment型 TextAlignmentの は、テキストの水平方向の配置を定義します。
  • IsTextPredictionEnabled型 boolの 、 は、テキスト予測と自動テキスト修正を有効にするかどうかを制御します。
  • Placeholder型 stringの は、コントロールが空のときに表示されるテキストを定義します。
  • PlaceholderColor型 Colorの は、プレースホルダー テキストの色を定義します。
  • SelectionLength型 intの は、エディター内で選択したテキストの長さを表します。
  • Text型 stringの は、エディターに入力されたテキストを定義します。
  • TextColor型 Colorの は、入力したテキストの色を定義します。
  • VerticalTextAlignment型 TextAlignmentの は、テキストの垂直方向の配置を定義します。

これらのプロパティは、BindableProperty オブジェクトが基になっています。つまり、これらは、データ バインディングの対象にすることができ、スタイルを設定できます。

さらに、 Editor は イベントを Completed 定義します。これは、ユーザーが戻りキーを使用して 内のテキストを Editor 最終処理するときに発生します。

Editor は、 クラスから InputView 派生し、そこから次のプロパティを継承します。

  • IsReadOnly型 boolの 。 は、ユーザーがテキストを変更できないようにするかどうかを定義します。 このプロパティの既定値は false です。
  • IsSpellCheckEnabled型 boolの 。 は、スペル チェックが有効かどうかを制御します。
  • Keyboard型 Keyboardの は、テキストを入力するときに表示される仮想キーボードを指定します。
  • MaxLength型 intの は、最大入力長を定義します。
  • TextTransform型 TextTransformの は、入力したテキストの大文字と小文字を指定します。

これらのプロパティは、BindableProperty オブジェクトが基になっています。つまり、これらは、データ バインディングの対象にすることができ、スタイルを設定できます。

さらに、 InputView は、内の TextChanged テキストが変更されたときに発生するイベントを Editor 定義します。 TextChangedEventArgsイベントに付随TextChangedする オブジェクトにはNewTextValue、 プロパティと OldTextValue プロパティがあり、それぞれ新しいテキストと古いテキストを指定します。

で Editorフォントを指定する方法については、「 フォント」を参照してください。

エディターを作成する

次の例は、 を作成する方法を Editor示しています。

<Editor x:Name="editor"
        Placeholder="Enter your response here"
        HeightRequest="250"
        TextChanged="OnEditorTextChanged"
        Completed="OnEditorCompleted" />

これに相当する C# コードを次に示します。

Editor editor = new Editor { Placeholder = "Enter text", HeightRequest = 250 };
editor.TextChanged += OnEditorTextChanged;
editor.Completed += OnEditorCompleted;

次のスクリーンショットは、Android での結果 Editor を示しています。

Android 上の基本的なエディターのスクリーンショット。

入力したテキストには、 プロパティを Text 読み取ることでアクセスできます。イベント TextChanged と Completed イベントは、テキストが変更または完了したことを通知します。

イベントはTextChanged、内のテキストEditorが変更されたときに発生し、 プロパティと NewTextValue プロパティをTextChangedEventArgs使用して変更の前後にテキストをOldTextValue提供します。

void OnEditorTextChanged(object sender, TextChangedEventArgs e)
{
    string oldText = e.OldTextValue;
    string newText = e.NewTextValue;
    string myText = editor.Text;
}

イベントは Completed 、ユーザーがキーボードの戻りキーを押すか、Windows の Tab キーを押して入力を終了したときに発生します。 イベントのハンドラーは、汎用イベント ハンドラーです。

void OnEditorCompleted(object sender, EventArgs e)
{
   string text = ((Editor)sender).Text;
}

文字間隔を設定する

に文字間隔を Editor 適用するには、 プロパティを CharacterSpacing 値に double 設定します。

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

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

注意

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

入力の長さを制限する

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

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

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

エディターの自動サイズ設定

Editorプロパティを に設定Editor.AutoSizeすることで、そのコンテンツのサイズを自動的にTextChanges設定できます。これは列挙体のEditorAutoSizeOption値です。 この列挙には、次の 2 つの値があります。

  • Disabled は、自動サイズ変更が無効であり、既定値であることを示します。
  • TextChanges は、自動サイズ変更が有効になっていることを示します。

これは次のようにして実装します。

<Editor Text="Enter text here"
        AutoSize="TextChanges" />

自動サイズ変更が有効になっている場合、ユーザーがテキストを入力すると の Editor 高さが増え、ユーザーがテキストを削除すると高さが小さくなります。

注意

Editorプロパティが設定されている場合、 HeightRequest は自動サイズになりません。

テキストの変換

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

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

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

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

キーボードをカスタマイズする

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

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

プロパティの設定の例を次に Keyboard 示します。

<Editor Keyboard="Chat" />

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

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

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

<Editor>
    <Editor.Keyboard>
        <Keyboard x:FactoryMethod="Create">
            <x:Arguments>
                <KeyboardFlags>Suggestions,CapitalizeCharacter</KeyboardFlags>
            </x:Arguments>
        </Keyboard>
    </Editor.Keyboard>
</Editor>

これに相当する C# コードを次に示します。

Editor editor = new Editor();
editor.Keyboard = Keyboard.Create(KeyboardFlags.Suggestions | KeyboardFlags.CapitalizeCharacter);

スペル チェックを有効または無効にする

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

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

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

注意

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

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

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

ただし、ユーザー名の入力など、一部のテキスト入力シナリオでは、テキスト予測と自動テキスト修正は否定的なエクスペリエンスを提供し、 プロパティを IsTextPredictionEnabled に設定して無効にする false必要があります。

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

注意

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

テキスト入力を禁止する

ユーザーは、 の既定値である プロパティを に設定IsReadOnlyすることで、 内Editorのfalsetrueテキストを変更できないようにすることができます。

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

注意

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