RTF 區塊

  • 發行項

RTF 方塊提供數種進階文字版面配置的功能，可在您需要支援段落、內嵌 UI 元素或複雜文字版面配置時使用。

這是正確的控制項嗎？

如果您需要支援多個段落、多欄或其他複雜文字版面配置，或者影像等內嵌 UI 元素，請使用 RichTextBlock。

使用 TextBlock 在您的應用程式中顯示大部分唯讀文字。 您可以使用它來顯示單行或多行文字、內嵌超連結，以及採用粗體、斜體或底線格式的文字。 TextBlock 提供較簡單的內容模型，如此一來，通常就能讓它更易於使用，而且它可以提供比 RichTextBlock 更好的文字轉譯效能。 這是多數應用程式 UI 文字的偏好選項。 儘管您可以在文字中放置分行符號，但 TextBlock 是針對顯示單一段落而設計，不支援文字縮排。

如需如何選擇正確文字控制項的詳細資訊，請參閱文字控制項文章。

建議

請參閱字型印刷樣式和指導方針。

UWP 和 WinUI 2

重要

本文中的資訊和範例針對使用 Windows App SDK 和 WinUI 3 的應用程式進行了最佳化，但通常適用於使用 WinUI 2 的 UWP 應用程式。 如需平台特定資訊和範例，請參閱 UWP API 參考。

本節包含您在 UWP 或 WinUI 2 應用程式中使用控制項所需的資訊。

此控制項的 API 位在 Windows.UI.Xaml.Controls 命名空間中。

建議使用最新的 WinUI 2 來取得所有控制項的最新樣式和範本。 WinUI 2.2 或更新版本包含此使用圓角之控制項的新範本。 如需詳細資訊，請參閱圓角半徑。

建立 RTF 方塊

開啟 WinUI 3 程式庫應用程式，並查看 RichTextBlock 運作情形。

WinUI 3 資源庫應用程式包含大多數 WinUI 3 控制項和功能的互動式範例。 從 Microsoft Store 取得應用程式，或在 GitHub 上取得原始程式碼

RichTextBlock 的內容屬性是 Blocks 屬性，可透過 Paragraph 元素支援段落式的文字。 它沒有 Text 屬性可供您在應用程式中輕鬆存取控制項的文字內容。 不過，RichTextBlock 提供數種 TextBlock 未提供的獨特功能。

RichTextBlock 支援以下功能：

  • 多段落。 藉由設定 TextIndent 屬性來設定段落的縮排。
  • 內嵌 UI 元素。 使用 InlineUIContainer 來顯示內嵌在文字中的 UI 元素，例如影像。
  • 溢位容器。 使用 RichTextBlockOverflow 元素來建立多欄文字的版面配置。

段落

您可以使用 Paragraph 元素來定義要在 RichTextBlock 控制項內顯示的文字區塊。 每個 RichTextBlock 都應至少包含一個 Paragraph。

您可以設定 RichTextBlock.TextIndent 屬性，藉此設定 RichTextBlock 中所有段落的縮排量。 您可以將 Paragraph.TextIndent 屬性設定為不同值，藉此覆寫 RichTextBlock 對特定段落的這項設定。

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

內嵌 UI 元素

InlineUIContainer 類別可讓您在文字中內嵌任何 UIElement。 常見的案例是將影像內嵌在文字中，但也可以使用互動式元素，例如 Button 或 CheckBox。

如果您想要將多個元素內嵌在相同位置，建議將面板當作單一 InlineUIContainer 子項，然後將多個元素放在面板內。

此範例示範如何使用 InlineUIContainer 將影像插入 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>

溢位容器

您可以使用 RichTextBlock 搭配 RichTextBlockOverflow 元素來建立多個欄或其他進階版面配置。 RichTextBlockOverflow 元素內容一律來自 RichTextBlock 元素。 您可以將 RichTextBlockOverflow 元素設定為 RichTextBlock 或其他 RichTextBlockOverflow 的 OverflowContentTarget，藉此連結 RichTextBlockOverflow 元素。

以下簡單範例示範建立兩個資料欄版面配置。 如需更複雜的範例，請參閱「範例」章節。

<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>

文字格式化

雖然 RichTextBlock 會儲存純文字，但您可以套用各種格式設定選項，自訂如何在應用程式中呈現文字。 您可設定標準控制項屬性 (例如 FontFamily、FontSize、FontStyle、Background、Foreground、CharacterSpacing)，藉此變更文字的外觀。 您也可以使用內嵌文字元素和印刷樣式附加屬性來設定文字格式。 這些選項僅會影響 RichTextBlock 在本機顯示文字的方式，因此舉例來說，若您將文字複製並貼至 RTF 控制項，系統不會套用任何格式設定。

內嵌元素

Microsoft.UI.Xaml.Documents 命名空間提供各種內嵌文字元素，可讓您用來格式化文字，例如 Bold、Italic、Run、Span 和 LineBreak。 將格式設定套用至文字區塊的常鍵方式，是將文字放在 Run 或 Span 元素，然後對該元素設定屬性。

以下段落中的第一個字詞顯示為粗體、藍色、16pt 的文字。

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

印刷樣式

Typography 類別的附加屬性可讓您存取一組 Microsoft OpenType 印刷樣式屬性。 您可以對 RichTextBlock 或個別的內嵌文字元素設定這些附加屬性，如下所示。

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

取得範例程式碼

文字控制項

適用於設計人員

適用於開發人員 (XAML)

適用於開發人員 (其他)