RTF 區塊Rich text block

RTF 區塊提供數個適用於進階文字配置的功能,當您需要支援段落、內嵌的 UI 元素或複雜的文字配置時,可以使用 RTF 區塊。Rich text blocks provide several features for advanced text layout that you can use when you need support for paragraphs, inline UI elements, or complex text layouts.

平台 APIRichTextBlock 類別 (英文)、RichTextBlockOverflow 類別 (英文)、Paragraph 類別 (英文)、Typography 類別 (英文)Platform APIs: RichTextBlock class, RichTextBlockOverflow class, Paragraph class, Typography class

這是正確的控制項嗎?Is this the right control?

當您需要支援多個段落、多欄或其他複雜的文字配置,或內嵌的 UI 元素 (例如影像) 時,請使用 RichTextBlockUse a RichTextBlock when you need support for multiple paragraphs, multi-column or other complex text layouts, or inline UI elements like images.

使用 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 更好的文字轉譯效能。TextBlock provides a simpler content model, so it's typically easier to use, and it can provide better text rendering performance than RichTextBlock. 大部分的 app UI 文字都慣用這個控制項。It's preferred for most app UI text. 儘管您可以在文字中放置分行符號,但 TextBlock 是針對顯示單一段落而設計,不支援文字縮排。Although you can put line breaks in the text, TextBlock is designed to display a single paragraph and doesn't support text indentation.

如需如何選擇正確文字控制項的詳細資訊,請參閱文字控制項文章。For more info about choosing the right text control, see the Text controls article.

範例Examples

XAML 控制項庫XAML Controls Gallery
XAML controls gallery

如果您已安裝 XAML 控制項庫應用程式,請按一下這裡以開啟應用程式並查看 RichTextBlock 的運作情形If you have the XAML Controls Gallery app installed, click here to open the app and see the RichTextBlock in action.

建立 RTF 區塊Create a rich text block

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. 不過,RichTextBlock 提供數種 TextBlock 未提供的獨特功能。However, RichTextBlock provides several unique features that TextBlock doesn't provide.

RichTextBlock 支援:RichTextBlock supports:

  • 多個段落。Multiple paragraphs. 藉由設定 TextIndent 屬性來設定段落的縮排。Set the indentation for paragraphs by setting the TextIndent property.
  • 內嵌的 UI 元素。Inline UI elements. 使用 InlineUIContainer 來顯示 UI 元素,例如內嵌文字的影像。Use an InlineUIContainer to display UI elements, such as images, inline with your text.
  • 溢出區的容器。Overflow containers. 使用 RichTextBlockOverflow 元素來建立多欄文字配置。Use RichTextBlockOverflow elements to create multi-column text layouts.

段落Paragraphs

您可以使用 Paragraph 元素來定義要顯示在 RichTextBlock 控制項內的文字區塊。You use Paragraph elements to define the blocks of text to display within a RichTextBlock control. 每個 RichTextBlock 應該至少包含一個 Paragraph。Every RichTextBlock should include at least one Paragraph.

您可以透過在 RichTextBlock 中設定 RichTextBlock.TextIndent 屬性,來設定所有段落的縮排量。You can set the indent amount for all paragraphs in a RichTextBlock by setting the RichTextBlock.TextIndent property. 您可以在 RichTextBlock 中,將 Paragraph.TextIndent 屬性設為不同的值,來覆寫特定段落的此項設定。You can override this setting for specific paragraphs in a RichTextBlock by setting the Paragraph.TextIndent property to a different value.

<RichTextBlock TextIndent="12">
  <Paragraph TextIndent="24">First paragraph.</Paragraph>
  <Paragraph>Second paragraph.</Paragraph>
  <Paragraph>Third paragraph. <Bold>With an inline.</Bold></Paragraph>
</RichTextBlock>

內嵌的 UI 元素Inline UI elements

InlineUIContainer 類別可讓您將任何 UIElement 內嵌於文字中。The InlineUIContainer class lets you embed any UIElement inline with your text. 常見的案例是將 Image 與您的文字內嵌在一起,但是您也可以使用互動式元素,例如 Button 或 CheckBox。A common scenario is to place an Image inline with your text, but you can also use interactive elements, like a Button or CheckBox.

如果您想在相同位置中內嵌多個元素,請考慮使用面板做為單一 InlineUIContainer 子項,然後在該面板中放置多個元素。If you want to embed more than one element inline in the same position, consider using a panel as the single InlineUIContainer child, and then place the multiple elements within that panel.

以下範例示範如何使用 InlineUIContainer 將影像插入 RichTextBlock。This example shows how to use an InlineUIContainer to insert an image into a RichTextBlock.

<RichTextBlock>
    <Paragraph>
        <Italic>This is an inline image.</Italic>
        <InlineUIContainer>
            <Image Source="Assets/Square44x44Logo.png" Height="30" Width="30"/>
        </InlineUIContainer>
        Mauris auctor tincidunt auctor.
    </Paragraph>
</RichTextBlock>

溢出區的容器Overflow containers

您可以使用 RichTextBlock 搭配 RichTextBlockOverflow 元素來建立多欄或其他進階頁面配置。You can use a RichTextBlock with RichTextBlockOverflow elements to create multi-column or other advanced page layouts. RichTextBlockOverflow 元素的內容一律來自 RichTextBlock 元素。The content for a RichTextBlockOverflow element always comes from a RichTextBlock element. 您可以將 RichTextBlockOverflow 元素設定為 RichTextBlock 的 OverflowContentTarget 或另一個 RichTextBlockOverflow 來連結它們。You link RichTextBlockOverflow elements by setting them as the OverflowContentTarget of a RichTextBlock or another RichTextBlockOverflow.

以下這個簡單範例會建立雙欄配置。Here's a simple example that creates a two column layout. 請參閱<範例>一節,以取得更複雜的範例。See the Examples section for a more complex example.

<Grid>
    <Grid.ColumnDefinitions>
        <ColumnDefinition/>
        <ColumnDefinition/>
    </Grid.ColumnDefinitions>
    <RichTextBlock Grid.Column="0" 
                   OverflowContentTarget="{Binding ElementName=overflowContainer}" >
        <Paragraph>
            Proin ac metus at quam luctus ultricies.
        </Paragraph>
    </RichTextBlock>
    <RichTextBlockOverflow x:Name="overflowContainer" Grid.Column="1"/>
</Grid>

格式化文字Formatting text

雖然 RichTextBlock 會儲存純文字,但是您可以套用不同的格式設定選項來自訂 app 中轉譯文字的方式。Although the RichTextBlock stores plain text, you can apply various formatting options to customize how the text is rendered in your app. 您可以設定標準控制項屬性 (例如,FontFamily、FontSize、FontStyle、Foreground 及 CharacterSpacing) 來變更文字的外觀。You can set standard control properties like FontFamily, FontSize, FontStyle, Foreground, and CharacterSpacing to change the look of the text. 您也可以使用內嵌文字元素和 Typography 附加屬性來設定文字的格式。You can also use inline text elements and Typography attached properties to format your text. 這些選項只會影響 RichTextBlock 在本機顯示文字的方式,因此,舉例來說,如果您複製文字並貼到 RTF 控制項,就不會未套用任何格式設定。These options affect only how the RichTextBlock displays the text locally, so if you copy and paste the text into a rich text control, for example, no formatting is applied.

內嵌元素Inline elements

Windows.UI.Xaml.Documents 命名空間提供各種不同的內嵌文字元素,讓您可用來設定文字格式,例如 Bold、Italic、Run、Span 和 LineBreak。The Windows.UI.Xaml.Documents namespace provides a variety of inline text elements that you can use to format your text, such as Bold, Italic, Run, Span, and LineBreak. 將格式設定套用到區段的標準方法是將文字放置在 Run 或 Span 元素中,然後在該元素上設定屬性。A typical way to apply formatting to sections of text is to place the text in a Run or Span element, and then set properties on that element.

以下這個 Paragraph 的第一個片語會以粗體、藍色 16pt 的文字來顯示。Here's a Paragraph with the first phrase shown in bold, blue, 16pt text.

<Paragraph>
    <Bold><Span Foreground="DarkSlateBlue" FontSize="16">Lorem ipsum dolor sit amet</Span></Bold>
    , consectetur adipiscing elit.
</Paragraph>

印刷樣式Typography

Typography 類別的附加屬性提供一組 Microsoft OpenType 印刷樣式屬性的存取權。The attached properties of the Typography class provide access to a set of Microsoft OpenType typography properties. 您可以在 RichTextBlock 或個別的內嵌文字元素上設定這些附加屬性,如下所示。You can set these attached properties either on the RichTextBlock, or on individual inline text elements, as shown here.

<RichTextBlock Typography.StylisticSet4="True">
    <Paragraph>
        <Span Typography.Capitals="SmallCaps">Lorem ipsum dolor sit amet</Span>
        , consectetur adipiscing elit.
    </Paragraph>
</RichTextBlock>

建議Recommendations

請參閱<印刷樣式與字型的指導方針>。See Typography and Guidelines for fonts.

取得範例程式碼Get the sample code

文字控制項Text controls

適用於設計人員For designers

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

適用於開發人員 (其他)For developers (other)