共用方式為

豐富文本區塊

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

這是正確的控制嗎？

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

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

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

Recommendations

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

建立 RTF 方塊

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

WinUI 3 Gallery 應用程式包含大部分 WinUI 3 控制項、特性和功能的互動式範例。 從 Microsoft Store 取得應用程式，或在 GitHub 上取得原始程式碼

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

RichTextBlock 支援以下功能：

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

Paragraphs

您可以使用 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

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

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

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 或更新版本包含一個供此控制項使用的新範本，其採用了圓角設計。 如需詳細資訊，請參閱圓角半徑。

文字控制項

適用於設計人員

適用於開發人員 (XAML)

適用於開發人員 (其他)

  • Last updated on