[エディター]

[アーティクル]
08/30/2024

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

Editor には、次のプロパティが定義されています。

EditorAutoSizeOption 型の AutoSize は、ユーザーの入力に合わせてエディターがサイズを変更するかどうかを定義します。既定では、エディターはサイズを自動的に設定しません。
TextAlignment 型の HorizontalTextAlignment は、テキストの水平方向の配置を定義します。
TextAlignment 型の VerticalTextAlignment は、テキストの垂直方向の配置を定義します。

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

さらに、Editor は、ユーザーがリターンキーを押して Editor 内のテキストを確定したときに発生する Completed イベントを定義します。

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

double 型の CharacterSpacing は、入力されたテキストの文字間の間隔を設定します。
int 型の CursorPosition は、エディター内でのカーソルの位置を定義します。
FontAttributes 型の FontAttributes は、テキストスタイルを決定します。
bool 型の FontAutoScalingEnabled は、テキストがオペレーティングシステムで設定されたスケーリング設定を反映するかどうかを定義します。このプロパティの既定値は true です。
string 型の FontFamily は、フォントファミリを定義します。
double 型の FontSize は、フォントサイズを定義します。
bool 型の IsReadOnly は、ユーザーがテキストを変更できないようにするかどうかを定義します。このプロパティの既定値は false です。
bool 型の IsSpellCheckEnabled は、スペルチェックが有効かどうかを制御します。
bool 型の IsTextPredictionEnabled は、テキスト予測と自動テキスト修正が有効かどうかを制御します。
Keyboard 型の Keyboard は、テキストを入力するときに表示されるソフト入力キーボードを指定します。
int 型の MaxLength は、入力の最大長を定義します。
string 型の Placeholder は、コントロールが空の場合に表示されるテキストを定義します。
Color 型の PlaceholderColor は、プレースホルダーテキストの色を定義します。
int 型の SelectionLength は、コントロール内で選択したテキストの長さを表します。
string 型の Text は、コントロールに入力されたテキストを定義します。
Color 型の TextColor は、入力したテキストの色を定義します。
TextTransform 型の TextTransform は、入力されたテキストの大文字と小文字を指定します。

さらに、InputView は、Editor 内のテキストが変更されたときに発生する TextChanged イベントを定義します。 TextChanged イベントに付随する TextChangedEventArgs オブジェクトには 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 上の基本的な Editor のスクリーンショット。

Note

iOS では、ソフト入力キーボードは、フィールドが画面の下部付近にある場合にテキスト入力フィールドにかぶることがあり、テキストの入力が困難になります。ただし、.NET MAUI iOS アプリでは、ソフト入力キーボードがテキスト入力フィールドにかぶる場合にページが自動的にスクロールされ、フィールドがソフト入力キーボードの上に配置されます。この既定の動作は、Microsoft.Maui.Platform 名前空間内の KeyboardAutoManagerScroll.Disconnect メソッドを呼び出すことで無効にすることができます。無効にした後、KeyboardAutoManagerScroll.Connect メソッドを呼び出すと、動作をもう一度有効にすることができます。

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

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

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;
}

文字間隔を設定する

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

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

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

Note

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

入力の長さを制限する

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

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

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

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

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

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

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

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

自動サイズ変更が有効になっている場合、ユーザーがテキストを入力すると Editor の高さが増え、ユーザーがテキストを削除すると高さが小さくなります。これを使用すると、CollectionView 内にある DataTemplate のオブジェクトが正しく Editor サイズ調整されます。

重要

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

テキストの変換

TextTransform プロパティを TextTransform 列挙型の値に設定すれば、Editor は、Text プロパティに格納されているテキストの大文字と小文字を変換できます。この列挙型には、次の 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);

ソフト入力キーボードの表示と非表示

Microsoft.Maui 名前空間の SoftInputExtensions クラスは、テキスト入力をサポートするコントロールでソフト入力キーボードとの対話をサポートする一連の拡張メソッドを提供します。このクラスは次のメソッドを定義します。

IsSoftInputShowing は、デバイスが現在ソフト入力キーボードを表示しているかどうかを確認します。
HideSoftInputAsync は、ソフト入力キーボードが現在表示されている場合、非表示にしようとします。
ShowSoftInputAsync は、ソフト入力キーボードが現在非表示になっている場合、表示しようとします。

次の例は、editor という名前の Editor でソフト入力キーボードが現在表示されている場合に非表示にする方法を示しています。

if (editor.IsSoftInputShowing())
    await editor.HideSoftInputAsync(System.Threading.CancellationToken.None);

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

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

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

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

Note

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

テキスト予測を有効および無効にする

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

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

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

Note

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

テキスト入力を禁止する

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

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

Note

IsReadonly プロパティは、IsEnabled プロパティが Editor の視覚的外観を灰色に変えるのとは異なり、Editor の視覚的外観を変えることはありません。

次の方法で共有

[エディター]

エディターを作成する

文字間隔を設定する

入力の長さを制限する

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

テキストの変換

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

ソフト入力キーボードの表示と非表示

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

テキスト予測を有効および無効にする

テキスト入力を禁止する

その他のリソース

次の方法で共有

[エディター]

エディターを作成する

文字間隔を設定する

入力の長さを制限する

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

テキストの変換

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

ソフト入力キーボードの表示と非表示

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

テキスト予測を有効および無効にする

テキスト入力を禁止する

その他のリソース

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