文字控制項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.

重要 APITextBlock 類別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 屬性值,以在您的 app 中透過 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 元素 (例如影像) 時,請使用 RichTextBlockUse 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. 它沒有您可以用來輕鬆存取 app 中控制項文字內容的 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. 您可以使用 Text 屬性來取得 TextBox 中的文字,並在其中設定文字。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 屬性設定為 NumberFor 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 字型會定義表情符號與其他 Emoji 字元的色彩版本。For example, the Segoe UI Emoji font defines color versions of the Emoticon and other Emoji characters.

標準和 rtf 文字控制項支援顯示色彩字型。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:

內建的拼字檢查工具

您可以針對下列兩個目的,搭配文字輸入控制項使用拼字檢查: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. 另外,有些使用者可能會使用輸入法 (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 屬性設定為 true 來關閉它。You can turn it off by setting the IsSpellCheckEnabled property to false.

適用於設計人員For designers

適用於開發人員 (XAML)For developers (XAML)