RTF 块Rich text block

RTF 块提供了多种适用于高级文本布局的功能,你可以在需要支持段落、内联 UI 元素或复杂文本布局时使用。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. 它优先用于大部分应用 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.

创建富文本块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. 它没有可以用来轻松访问应用中控件的文本内容的 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.TextIndent 属性,你可以在 RichTextBlock 中设置所有段落的缩进量。You can set the indent amount for all paragraphs in a RichTextBlock by setting the RichTextBlock.TextIndent property. 通过将 Paragraph.TextIndent 属性设置为不同值,你可以在 RichTextBlock 中为特定段落重写此设置。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 存储纯文本,但你可以应用各种格式选项自定义文本在应用中的呈现方式。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 在本地显示文本的方式,因此如果你将文本复制并粘贴到富文本控件,将不会应用任何格式。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)