テキスト コントロールText controls

テキスト コントロールは、テキスト入力ボックス、パスワード ボックス、自動提案ボックス、テキスト ブロックで構成されています。Text controls consist of text input boxes, password boxes, auto-suggest boxes, and text blocks. XAML フレームワークには、テキストのレンダリング、入力、編集用のいくつかのコントロールと、テキストの書式設定用のプロパティのセットが用意されています。The XAML framework provides several controls for rendering, entering, and editing text, and a set of properties for formatting the text.

重要な API:TextBlock クラスRichTextBlock クラスTextBox クラスRichEditBox クラスAutoSuggestBox クラスPasswordBox クラスImportant APIs: TextBlock class, RichTextBlock class, TextBox class, RichEditBox class, AutoSuggestBox class, PasswordBox class

適切なコントロールの選択Is this the right control?

使うテキスト コントロールは、シナリオによって異なります。The text control you use depends on your scenario. 以下の情報を参考にして、アプリに適切なテキスト コントロールを選んでください。Use this info to pick the right text control to use in your app.

読み取り専用テキストのレンダリングRender read-only text

TextBlock を使用して、アプリ内の読み取り専用テキストの大半を表示します。Use a TextBlock to display most read-only text in your app. これを使用すると、単一行または複数行のテキスト、インライン ハイパーリンク、書式 (太字、斜体、下線付きなど) が設定されたテキストを表示できます。You can use it to display single-line or multi-line text, inline hyperlinks, and text with formatting like bold, italic, or underlined.

TextBlock は、一般的に、RichTextBlock より使い方が簡単で、テキスト レンダリングのパフォーマンスが優れているため、ほとんどのアプリで UI テキストに適しています。TextBlock is typically easier to use and provides better text rendering performance than RichTextBlock, so it's preferred for most app UI text. Text プロパティの値を取得することによって、アプリ内で TextBlock のテキストに容易にアクセスして使用することができます。You can easily access and use text from a TextBlock in your app by getting the value of the Text property.

テキストのレンダリング方法をカスタマイズするための書式設定オプションも、同じものが数多く用意されています。It also provides many of the same formatting options for customizing how your text is rendered. テキスト内に改行を配置することはできますが、TextBlock は単一の段落を表示するために設計されており、テキストのインデントはサポートされていません。Although you can put line breaks in the text, TextBlock is designed to display a single paragraph and doesn’t support text indentation.

複数の段落、段組テキスト、インライン UI 要素 (画像など) をサポートする必要がある場合は、RichTextBlock を使います。Use a RichTextBlock when you need support for multiple paragraphs, multi-column text or other complex text layouts, or inline UI elements like images. RichTextBlock には、高度なテキスト レイアウトのための機能がいくつか用意されています。RichTextBlock provides several features for advanced text layout.

RichTextBlock のコンテンツ プロパティは Blocks プロパティです。このプロパティでは、Paragraph 要素によって段落に基づくテキストがサポートされています。The content property of RichTextBlock is the Blocks property, which supports paragraph based text via the Paragraph element. アプリ内でコントロールのテキスト コンテンツに簡単にアクセスすることができる Text プロパティは含まれていません。It doesn't have a Text property that you can use to easily access the control's text content in your app.

テキスト入力Text input

ユーザーが書式設定されていないテキストを入力、編集できるようにするには、TextBox コントロールを使います。Use a TextBox control to let a user enter and edit unformatted text, such as in a form. TextBox 内のテキストの取得と設定には、Text プロパティを使います。You can use the Text property to get and set the text in a TextBox.

TextBox を読み取り専用にすることはできますが、これは一時的な条件付きの状態である必要があります。You can make a TextBox read-only, but this should be a temporary, conditional state. テキストを編集可能にしない場合は、代わりに TextBlock を使用することを検討してください。If the text is never editable, consider using a TextBlock instead.

PasswordBox コントロールを使用して、パスワードや、社会保障番号などの機密データを収集できます。Use a PasswordBox control to collect a password or other private data, such as a Social Security number. パスワード ボックスは、プライバシー保護用に入力文字が非表示になるテキスト入力ボックスです。A password box is a text input box that conceals the characters typed in it for the sake of privacy. パスワード ボックスは、入力されたテキストの代わりに記号が表示される点を除けば、テキスト入力ボックスに似ています。A password box looks like a text input box, except that it renders bullets in place of the text that has been entered. この記号は、カスタマイズできます。The bullet character can be customized.

AutoSuggestBox コントロールを使って、ユーザーが入力時に選べる候補リストを表示します。Use an AutoSuggestBox control to show the user a list of suggestions to choose from as they type. 自動提案ボックスは、基本的な検索候補の一覧をトリガーするテキスト入力ボックスです。An auto-suggest box is a text entry box that triggers a list of basic search suggestions. 候補となる用語は、一般的な検索用語とユーザーが入力した履歴の組み合わせから取得できます。Suggested terms can draw from a combination of popular search terms and historical user-entered terms.

また、検索ボックスを実装する場合も、AutoSuggestBox コントロールを使用する必要があります。You should also use an AutoSuggestBox control to implement a search box.

RichEditBox を使用して、テキスト ファイルを表示および編集します。Use a RichEditBox to display and edit text files. その他の標準的なテキスト入力ボックスを使用するように、RichEditBox を使用してアプリにユーザー入力を行わないでください。You don't use a RichEditBox to get user input into your app the way you use other standard text input boxes. 代わりに、アプリとは別のテキスト ファイルを操作するために使用します。Rather, you use it to work with text files that are separate from your app. 通常は、RichEditBox に入力されたテキストを .rtf ファイルに保存します。You typically save text entered into a RichEditBox to a .rtf file.

テキスト入力は最適な選択肢かIs text input the best option?

アプリでユーザー入力を取得するには、さまざまな方法があります。There are many ways you can get user input in your app. 標準テキスト ボックスのいずれかまたは別のコントロールのどちらがユーザー入力を取得するのに最適であるかを決定する際には、次の点を考慮します。These questions will help answer whether one of the standard text input boxes or another control is the best fit for getting user input.

  • 有効なすべての値を効率的に列挙することは現実的か。Is it practical to efficiently enumerate all valid values? そうである場合は、いずれかの選択コントロールを使うことを検討します。考えられる選択コントロールは、チェック ボックスドロップダウン リスト、リスト ボックス、ラジオ ボタンスライダートグル スイッチ日付の選択コントロール、または時刻の選択コントロールです。If so, consider using one of the selection controls, such as a check box, drop-down list, list box, radio button, slider, toggle switch, date picker, or time picker.
  • 有効な値は比較的少数か。Is there a fairly small set of valid values? 少数の場合は、ドロップダウン リストまたはリスト ボックス (値の文字数が多い場合) をお勧めします。If so, consider a drop-down list or a list box, especially if the values are more than a few characters long.
  • 有効なデータに、何も制約がないか。それとも、形式の制約 (長さや文字の種類の制約) だけがあるか。Is the valid data completely unconstrained? Or is the valid data only constrained by format (constrained length or character types)? これに該当する場合は、テキスト入力コントロールを使います。If so, use a text input control. 入力できる文字数を制限したり、アプリ コードで形式を検証したりすることができます。You can limit the number of characters that can be entered, and you can validate the format in your app code.
  • 値は、専用の共通コントロールがあるデータ型を表しているか。Does the value represent a data type that has a specialized common control? そうである場合は、テキスト入力コントロールではなく、適切なコントロールを使います。If so, use the appropriate control instead of a text input control. たとえば、データ入力を受け付けるには、テキスト入力コントロールの代わりに DatePicker を使います。For example, use a DatePicker instead of a text input control to accept a date entry.
  • 数値データのみに制限されている場合:If the data is strictly numeric:
    • 入力される値は、同じページの別の数量の近似値および相対値、またはそのいずれかか。Is the value being entered approximate and/or relative to another quantity on the same page? そうである場合は、スライダーを使います。If so, use a slider.
    • 設定の変更による効果をすぐに確認できると、ユーザーにとって便利か?Would the user benefit from instant feedback on the effect of setting changes? そうである場合は、 スライダーを使い、必要であれば付随するコントロールも使います。If so, use a slider, possibly with an accompanying control.
    • 入力された値は、結果が確認された後に調整される可能性が高いか (音量や画面の明るさなど)。Is the value entered likely to be adjusted after the result is observed, such as with volume or screen brightness? そうである場合は、スライダーを使います。If so, use a slider.

Examples

XAML コントロール ギャラリーXAML Controls Gallery
XAML controls gallery

XAML コントロール ギャラリー アプリがインストールされている場合、こちらをクリックしてアプリを開き、テキスト コントロールの動作を確認してください。If you have the XAML Controls Gallery app installed, click here to open the app and see the text controls in action.

テキスト ボックスText box

テキスト ボックス

自動提案ボックスAuto suggest box

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

パスワード ボックスPassword box

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

テキスト コントロールの作成Create a text control

各テキスト コントロールの詳細と例については、次の記事を参照してください。See these articles for info and examples specific to each text control.

フォントとスタイルのガイドラインFont and style guidelines

フォントのガイドラインについては、次の記事を参照してください。See these articles for font guidelines:

ペン入力Pen input

適用対象: TextBox、RichEditBox、AutoSuggestBoxApplies to: TextBox, RichEditBox, AutoSuggestBox

Windows 10 バージョン 1803 以降では、XAML テキスト入力ボックスは、Windows Ink を使用したペン入力の埋め込みをサポートしています。Starting with Windows 10, version 1803, XAML text input boxes feature embedded support for pen input using Windows Ink. ユーザーが Windows ペンを使用してテキスト入力ボックスでタップすると、テキスト ボックスは変換され、ユーザーは別の入力パネルを開かなくても、ペンを使用して直接書き込むことができます。When a user taps into a text input box using a Windows pen, the text box transforms to let the user write directly into it with a pen, rather than opening a separate input panel.

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

詳細については、「手書きビューでのテキスト入力」をご覧ください。For more info, see Text input with the handwriting view.

テキスト コントロールに適切なキーボードの選択Choose the right keyboard for your text control

適用対象: TextBox、PasswordBox RichEditBoxApplies to: TextBox, PasswordBox RichEditBox

ユーザーがタッチ キーボード、つまりソフト入力パネル (SIP) でデータを入力できるように、ユーザーが入力すると予想されるデータの種類に合わせてテキスト コントロールの入力値の種類を設定できます。To help users to enter data using the touch keyboard, or Soft Input Panel (SIP), you can set the input scope of the text control to match the kind of data the user is expected to enter.

ヒント この情報は、SIP にのみ適用されます。Tip This info applies only to the SIP. ハードウェア キーボードにも、Windows の簡単操作オプションで使用できるスクリーン キーボードにも適用されません。It does not apply to hardware keyboards or the On-Screen Keyboard available in the Windows Ease of Access options.

タッチ キーボードは、アプリがタッチ スクリーン付きのデバイスで実行されているときにテキスト入力に使うことができます。The touch keyboard can be used for text entry when your app runs on a device with a touch screen. タッチ キーボードは、TextBox または RichEditBox などの編集可能な入力フィールドをユーザーがタップしたときに呼び出されます。The touch keyboard is invoked when the user taps on an editable input field, such as a TextBox or RichEditBox. ユーザーが入力すると予想されるデータの種類と一致するようにテキスト コントロールの入力値の種類を設定することで、ユーザーがより速く簡単にアプリにデータを入力できるようになります。You can make it much faster and easier for users to enter data in your app by setting the input scope of the text control to match the kind of data you expect the user to enter. 入力値の種類は、システムに対してコントロールが予期しているテキスト入力の種類のヒントとなるため、システムはその入力の種類用の特殊なタッチ キーボード レイアウトを提供できます。The input scope provides a hint to the system about the type of text input expected by the control so the system can provide a specialized touch keyboard layout for the input type.

たとえば、テキスト ボックスが 4 桁の PIN の入力専用の場合は、InputScope プロパティを Number に設定します。For example, if a text box is used only to enter a 4-digit PIN, set the InputScope property to Number. これにより、システムに数字キーパッド レイアウトの表示が指示されるため、ユーザーは簡単に PIN を入力できます。This tells the system to show the number keypad layout, which makes it easier for the user to enter the PIN.

重要Important
入力スコープの設定によって、入力の検証が実行されるわけではありません。また、ユーザーが、ハードウェア キーボードやその他の入力デバイスから入力できなくなることもありません。The input scope does not cause any input validation to be performed, and does not prevent the user from providing any input through a hardware keyboard or other input device. 必要に応じて、コードで入力を検証する必要があります。You are still responsible for validating the input in your code as needed.

詳しくは、「入力値の種類を使ったタッチ キーボードの変更」をご覧ください。For more info, see Use input scope to change the touch keyboard.

カラー フォントColor fonts

適用対象: TextBlock、RichTextBlock、TextBox、RichEditBoxApplies to: TextBlock, RichTextBlock, TextBox, RichEditBox

Windows には、フォントに各グリフの複数の色付きレイヤーを含めるための機能があります。Windows has the ability for fonts to include multiple colored layers for each glyph. たとえば、Segoe UI Emoji フォントは、顔文字とその他の絵文字のカラー バージョンを定義します。For example, the Segoe UI Emoji font defines color versions of the Emoticon and other Emoji characters.

標準テキスト コントロールとリッチ テキスト コントロールは、カラー フォントの表示をサポートしています。The standard and rich text controls support display color fonts. 既定では、IsColorFontEnabled プロパティは true であり、これらの追加のレイヤーを使用するフォントはカラーでレンダリングされます。By default, the IsColorFontEnabled property is true and fonts with these additional layers are rendered in color. システムに既定のカラー フォントは Segoe UI Emoji フォントで、コントロールはこのフォントにフォールバックしてグリフをカラーで表示します。The default color font on the system is Segoe UI Emoji and the controls will fall back to this font to display the glyphs in color.

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

レンダリングされたテキストは次のようになります。The rendered text looks like this:

カラー フォントを使用したテキスト ブロック

詳しくは、IsColorFontEnabled プロパティに関するトピックをご覧ください。For more info, see the IsColorFontEnabled property.

行と段落の区切り記号のガイドラインGuidelines for line and paragraph separators

適用対象: TextBlock、RichTextBlock、複数行の TextBox、RichEditBoxApplies to: TextBlock, RichTextBlock, multi-line TextBox, RichEditBox

行の区切り文字 (0x2028) と段落の区切り文字 (0x2029) を使用すると、プレーンテキストを分割できます。Use the line separator character (0x2028) and the paragraph separator character (0x2029) to divide plain text. 各行区切り文字の後に新しい行が開始されます。A new line is begun after each line separator. 各段落区切り文字の後に新しい段落が開始されます。A new paragraph is begun after each paragraph separator.

ファイルの最初の行や段落をこれらの文字で始める必要はなく、最後の行や段落をこれらの文字で終わる必要はありません。これらの文字を使用した場合、その位置に空の行または段落があることを意味します。It isn't necessary to start the first line or paragraph in a file with these characters or to end the last line or paragraph with them; doing so indicates that there is an empty line or paragraph in that location.

アプリでは、行の区切り記号を使って無条件の行の終わりを示すことができます。Your app can use the line separator to indicate an unconditional end of line. ただし、行の区切り記号は、独立した復帰文字や改行文字またはこれらの文字の組み合わせに対応していません。However, line separators do not correspond to the separate carriage return and linefeed characters, or to a combination of these characters. 行の区切り記号は、復帰文字や改行文字とは別に処理する必要があります。Line separators must be processed separately from carriage return and linefeed characters.

アプリでは、テキストの段落の間の段落の区切り記号を挿入できます。Your app can insert a paragraph separator between paragraphs of text. この区切り記号を使用すると、さまざまなオペレーティング システムで異なる行の幅で書式設定できるプレーンテキスト ファイルを作成できます。Use of this separator allows creation of plain text files that can be formatted with different line widths on different operating systems. ターゲット システムでは、行の区切り記号を無視し、段落の区切り記号でのみ段落を分割することができます。The target system can ignore any line separators and break paragraphs only at the paragraph separators.

スペル チェックのガイドラインGuidelines for spell checking

適用対象: TextBox、RichEditBoxApplies to: TextBox, RichEditBox

テキストの入力と編集を行っているときに、スペル チェックは単語を赤い波線で強調表示してユーザーに単語のスペルの間違いを知らせ、それを修正する方法を提供します。During text entry and editing, spell checking informs the user that a word is misspelled by highlighting it with a red squiggle and provides a way for the user to correct the misspelling.

組み込みスペル チェックの例を次に示します。Here's an example of the built-in spell checker:

組み込みスペル チェック

テキスト入力コントロールでのスペル チェックは、次の 2 つの目的で使います。Use spell checking with text input controls for these two purposes:

  • スペル ミスを自動修正するTo auto-correct misspellings

    スペル チェック エンジンは、単語にスペルの間違いがあり、修正が確実であれば自動的に修正します。The spell checking engine automatically corrects misspelled words when it's confident about the correction. たとえば、エンジンは自動的に "teh" を "the" に変更します。For example, the engine automatically changes "teh" to "the."

  • 代わりのスペルを示すTo show alternate spellings

    修正が確実でないとスペル チェック エンジンが判断した場合、スペル ミスのある単語には赤い下線が引かれ、ユーザーがその単語をタップするか右クリックすると、ショートカット メニューに修正候補が表示されます。When the spell checking engine is not confident about the corrections, it adds a red line under the misspelled word and displays the alternates in a context menu when you tap or right-click the word.

  • スペル チェックは、テキスト入力コントロールに単語や文を入力するときにユーザーを補助するために使います。Use spell checking to help users as they enter words or sentences into text input controls. スペル チェックは、タッチ、マウス、キーボード入力で機能します。Spell checking works with touch, mouse, and keyboard inputs.

  • 単語が辞書になさそうな場合や、ユーザーがスペル チェックを重視しない場合は、スペル チェックを使わないでください。Don't use spell checking when a word is not likely to be in the dictionary or if users wouldn't value spell checking. たとえば、電話番号または名前をキャプチャするためのテキスト ボックスでは、スペル チェックを有効にしません。For example, don't turn it on if the text box is intended to capture a telephone number or name.

  • 現在のスペル チェック エンジンがアプリの言語をサポートしていないという理由だけで、スペル チェックを無効にしないでください。Don't disable spell checking just because the current spell checking engine doesn't support your app language. スペル チェックでその言語がサポートされていない場合は、何も行われないので、有効にしたままで何も問題がありません。When the spell checker doesn't support a language, it doesn't do anything, so there's no harm in leaving the option on. また、一部のユーザーは Input Method Editor (IME) を使ってアプリに他の言語を入力する場合があり、その言語がサポートされている可能性もあります。Also, some users might use an Input Method Editor (IME) to enter another language into your app, and that language might be supported. たとえば、日本語のアプリを構築している場合には、現在はスペル チェック エンジンが日本語を認識していなくても、スペル チェックを無効にしないでください。For example, when building a Japanese language app, even though the spell checking engine might not currently recognize that language, don't turn spell checking off. ユーザーが英語 IME に切り替え、アプリに英語を入力する場合があります。スペル チェックが有効になっていれば、英語のスペル チェックが行われます。The user may switch to an English IME and type English into the app; if spell checking is enabled, the English will get spell checked.

TextBox コントロールおよび RichEditBox コントロールでは、スペル チェックが既定で有効になっています。For TextBox and RichEditBox controls, spell checking is turned on by default. IsSpellCheckEnabled プロパティを false に設定することによって無効にできます。You can turn it off by setting the IsSpellCheckEnabled property to false.

デザイナー向けFor designers

開発者向け (XAML)For developers (XAML)