次の方法で共有

テキスト コントロール

テキスト コントロールは、テキスト入力ボックス、パスワード ボックス、自動提案ボックス、およびテキスト ブロックで構成されます。 XAML フレームワークには、テキストをレンダリング、入力、編集するためのコントロールと、テキストを書式設定するための一連のプロパティが用意されています。

重要な API: TextBlock クラス、 RichTextBlock クラス、 TextBox クラス、 RichEditBox クラス、 AutoSuggestBox クラス、 PasswordBox クラス

これは適切なコントロールですか?

使用するテキスト コントロールは、シナリオによって異なります。 この情報を使用して、アプリで使用する適切なテキスト コントロールを選択します。

読み取り専用テキストをレンダリングする

TextBlock を使用して、アプリ内のほとんどの読み取り専用テキストを表示します。 これを使用すると、1 行または複数行のテキスト、インライン ハイパーリンク、太字、斜体、下線などの書式設定でテキストを表示できます。

TextBlock は通常、使いやすく、RichTextBlock よりも優れたテキスト レンダリング パフォーマンスを提供するため、ほとんどのアプリ UI テキストに適しています。 Text プロパティの値を取得することで、アプリの TextBlock からテキストに簡単にアクセスして使用できます。

また、テキストのレンダリング方法をカスタマイズするための同じ書式設定オプションも多数用意されています。 テキストには改行を入れることができますが、TextBlock は 1 つの段落を表示するように設計されており、テキストインデントをサポートしていません。

複数の段落、複数列のテキスト、またはその他の複雑なテキスト レイアウト、または画像などのインライン UI 要素をサポートする必要がある場合は、 RichTextBlock を使用します。 RichTextBlock には、高度なテキスト レイアウト用のいくつかの機能が用意されています。

RichTextBlock の content プロパティは 、Paragraph要素を 介して段落ベースのテキストをサポートする Blocks プロパティです。 アプリ内のコントロールのテキスト コンテンツに簡単にアクセスするために使用できる Text プロパティはありません。

テキスト入力

TextBox コントロールを使用して、ユーザーが書式設定されていないテキスト (フォーム内など) を入力および編集できるようにします。 Text プロパティを使用すると、 TextBox 内のテキストを取得および設定できます。

TextBox は読み取り専用にすることができますが、これは一時的な条件付き状態である必要があります。 テキストが編集できない場合は、代わりに TextBlock を使用することを検討してください。

PasswordBox コントロールを使用して、パスワードまたはその他のプライベート データ (社会保障番号など) を収集します。 パスワード ボックスは、プライバシーのために入力された文字を隠すテキスト入力ボックスです。 パスワード ボックスはテキスト入力ボックスのように見えますが、入力されたテキストの代わりに行頭文字がレンダリングされる点が異なります。 行頭文字はカスタマイズできます。

AutoSuggestBox コントロールを使用して、入力時に選択する候補の一覧をユーザーに表示します。 自動提案ボックスは、基本的な検索候補の一覧をトリガーするテキスト 入力ボックスです。 推奨される用語は、一般的な検索用語とユーザーが入力した過去の用語の組み合わせから引き出すことができます。

AutoSuggestBox コントロールを使用して検索ボックスを実装する必要もあります。

RichEditBox を使用して、テキスト ファイルを表示および編集します。 RichEditBox を使用して、他の標準テキスト入力ボックスを使用する方法でユーザー入力をアプリに取得することはありません。 代わりに、アプリとは別のテキスト ファイルを操作するために使用します。 通常、RichEditBox に入力されたテキストを.rtf ファイルに保存します。

テキスト入力が最適なオプションですか?

アプリでユーザー入力を取得するには、さまざまな方法があります。 これらの質問は、標準のテキスト入力ボックスまたは別のコントロールのいずれかがユーザー入力を取得するのに最適かどうかを答えるのに役立ちます。

  • すべての有効な値を効率的に列挙することは実用的ですか? その場合は、 チェック ボックス、 ドロップダウン リスト、リスト ボックス、 ラジオ ボタン、 スライダー、 トグル スイッチ、 日付ピッカー、時刻ピッカーなどの選択コントロールのいずれかを使用することを検討してください。
  • 有効な値のセットはかなり小さいですか? その場合は、 ドロップダウン リスト またはリスト ボックス (特に値の長さが数文字を超える場合) を検討してください。
  • 有効なデータは完全に制約されていませんか? または、有効なデータは形式 (制約付き長さまたは文字型) によってのみ制約されますか? その場合は、テキスト入力コントロールを使用します。 入力できる文字数を制限したり、アプリ コードで形式を検証したりできます。
  • 値は、特殊な共通コントロールを持つデータ型を表していますか? その場合は、テキスト入力コントロールの代わりに適切なコントロールを使用します。 たとえば、日付入力を受け入れるには、テキスト入力コントロールの代わりに DatePicker を使用します。
  • データが厳密に数値の場合:
    • 値は、同じページ上の別の数量に対して概数または相対的に入力されていますか? その場合は、スライダーを使用 します。
    • ユーザーは、設定の変更の効果に関する即時フィードバックの恩恵を受けますか? その場合は、 スライダーを使用します。場合によっては、付属のコントロールを使用します。
    • 入力された値は、ボリュームや画面の明るさなど、結果が観察された後に調整される可能性がありますか? その場合は、スライダーを使用 します。

例示

WinUI 2 ギャラリー
WinUI ギャラリー

WinUI 2 ギャラリー アプリがインストールされている場合は、ここをクリックしてアプリを開き、動作中のテキスト コントロールを確認します。

テキスト ボックス

テキスト ボックス

[自動提案] ボックス

展開された自動提案コントロールの例

[パスワード] ボックス

パスワード ボックスのフォーカス状態の入力テキスト

テキスト コントロールを作成する

各テキスト コントロールに固有の情報と例については、次の記事を参照してください。

フォントとスタイルのガイドライン

フォントのガイドラインについては、次の記事を参照してください。

ペン入力

適用対象: TextBox、RichEditBox、AutoSuggestBox

Windows 10 バージョン 1803 以降では、XAML テキスト入力ボックスには、 Windows Ink を使用したペン入力の埋め込みサポートが用意されています。 ユーザーが Windows ペンを使用してテキスト入力ボックスをタップすると、テキスト ボックスが変換され、ユーザーは別の入力パネルを開くのではなく、ペンで直接入力できます。

ペンでタップするとテキスト ボックスが展開する

詳細については、「 手書きビューを使用したテキスト入力」を参照してください。

テキスト コントロールに適したキーボードを選択する

適用対象: TextBox、PasswordBox RichEditBox

ユーザーがタッチ キーボードまたはソフト入力パネル (SIP) を使用してデータを入力できるように、ユーザーが入力する必要があるデータの種類と一致するようにテキスト コントロールの入力範囲を設定できます。

ヒント この情報は SIP にのみ適用されます。 Windows の簡単操作オプションで使用できるハードウェア キーボードやスクリーン キーボードには適用されません。

タッチ キーボードは、タッチ スクリーンを備えたデバイスでアプリを実行するときにテキスト入力に使用できます。 ユーザーが編集可能な入力フィールド (TextBox や RichEditBox など) をタップすると、タッチ キーボードが呼び出されます。 ユーザーが入力するデータの種類に合わせてテキスト コントロールの入力スコープを設定することで、ユーザーがアプリにデータを入力する時間を大幅に短縮し、簡単にすることができます。 入力スコープは、コントロールで想定されるテキスト入力の種類に関するヒントをシステムに提供するため、システムは入力の種類に特化したタッチ キーボード レイアウトを提供できます。

たとえば、テキスト ボックスを使用して 4 桁の PIN を入力する場合は、 InputScope プロパティを Number に設定します。 これにより、システムにキーパッドのレイアウトが表示されます。これにより、ユーザーが PIN を簡単に入力できるようになります。

Important
入力スコープによって入力検証が実行されることはありません。また、ユーザーがハードウェア キーボードやその他の入力デバイスを介して入力を提供することを妨げません。 必要に応じて、コード内の入力を検証する必要があります。

詳細については、「 入力スコープを使用してタッチ キーボードを変更する」を参照してください。

カラー フォント

適用対象: TextBlock、RichTextBlock、TextBox、RichEditBox

Windows では、フォントにグリフごとに複数の色付きレイヤーを含めることができます。 たとえば、Segoe UI 絵文字フォントでは、絵文字やその他の絵文字の色バージョンを定義します。

標準およびリッチ テキスト コントロールでは、表示色フォントがサポートされています。 既定では、 IsColorFontEnabled プロパティは true で、これらの追加レイヤーを含むフォントは色でレンダリングされます。 システムの既定の色フォントは Segoe UI 絵文字であり、コントロールはこのフォントにフォールバックしてグリフを色で表示します。

<TextBlock FontSize="30">Hello ☺⛄☂♨⛅</TextBlock>

レンダリングされたテキストは次のようになります。

カラー フォントを含むテキスト ブロック

詳細については、 IsColorFontEnabled プロパティを参照してください。

行区切り記号と段落区切り記号のガイドライン

適用対象: TextBlock、RichTextBlock、複数行の TextBox、RichEditBox

プレーン テキストを分割するには、行区切り文字 (0x2028) と段落区切り文字 (0x2029) を使用します。 各行の区切り記号の後に新しい行が開始されます。 各段落区切り記号の後に新しい段落が開始されます。

これらの文字を使用してファイルの最初の行または段落を開始したり、最後の行または段落を終了したりする必要はありません。そうすると、その場所に空の行または段落があることを示します。

アプリでは、行区切り記号を使用して、無条件の行末を示すことができます。 ただし、行区切り記号は、個別の復帰文字と改行文字、またはこれらの文字の組み合わせには対応しません。 行区切り記号は、復帰文字と改行文字とは別に処理する必要があります。

アプリでは、テキストの段落間に段落区切り記号を挿入できます。 この区切り記号を使用すると、異なるオペレーティング システムで異なる行幅で書式設定できるプレーン テキスト ファイルを作成できます。 ターゲット システムは、行区切り記号を無視し、段落区切り記号でのみ段落を区切ることができます。

スペル チェックのガイドライン

適用対象: TextBox、RichEditBox

テキストの入力と編集中、スペル チェックでは、単語のスペルミスが赤い波線で強調表示され、ユーザーがスペルミスを修正する方法がユーザーに通知されます。

組み込みのスペル チェックの例を次に示します。

組み込みのスペル チェック

次の 2 つの目的のために、テキスト入力コントロールでスペル チェックを使用します。

  • スペル ミスを自動修正するには

    スペル チェック エンジンは、修正に自信があるときにスペルミスの単語を自動的に修正します。 たとえば、エンジンは自動的に "the" を "the" に変更します。

  • 代替スペル を表示するには

    スペル チェック エンジンが修正に自信がない場合は、スペル ミスの単語の下に赤い線が追加され、単語をタップまたは右クリックすると、ショートカット メニューに代替候補が表示されます。

  • ユーザーがテキスト入力コントロールに単語や文を入力する場合に役立つスペル チェックを使用します。 スペル チェックは、タッチ、マウス、キーボードの入力で機能します。

  • 単語が辞書に含まれていない可能性がある場合や、ユーザーがスペル チェックを評価しない場合は、スペル チェックを使用しないでください。 たとえば、テキスト ボックスが電話番号または名前をキャプチャすることを目的としている場合は、オンにしないでください。

  • 現在のスペル チェック エンジンがアプリの言語をサポートしていないため、スペル チェックを無効にしないでください。 スペル チェックで言語がサポートされていない場合、何も行われないため、オプションをオンのままにしても問題はありません。 また、一部のユーザーは、入力メソッド エディター (IME) を使用してアプリに別の言語を入力する場合があり、その言語がサポートされている可能性があります。 たとえば、日本語アプリを構築する場合、スペル チェック エンジンが現在その言語を認識していない場合でも、スペル チェックをオフにしないでください。 ユーザーは英語の IME に切り替えて、アプリに英語を入力できます。スペル チェックが有効になっている場合、英語はスペル チェックを受けます。

TextBox コントロールと RichEditBox コントロールの場合、スペル チェックは既定で有効になっています。 これをオフにするには、 IsSpellCheckEnabled プロパティを false に設定します。

デザイナーの場合

開発者向け (XAML)

  • Last updated on