リッチ テキスト ブロックRich text block

リッチ テキスト ブロックは、段落、インライン 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.

重要な API:RichTextBlock クラスRichTextBlockOverflow クラスクラスを段落タイポグラフィ クラスImportant APIs: RichTextBlock class, RichTextBlockOverflow class, Paragraph class, Typography class

適切なコントロールの選択Is this the right control?

複数の段落、段組などの複雑なテキスト レイアウト、インライン UI 要素 (画像など) をサポートする必要がある場合は、RichTextBlock を使います。Use 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. 画像などの UI 要素をテキスト内にインラインで表示するには InlineUIContainer を使います。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

RichTextBlock コントロール内に表示するテキストのブロックを定義するには Paragraph 要素を使います。You use Paragraph elements to define the blocks of text to display within a RichTextBlock control. すべての RichTextBlock に少なくとも 1 つの 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.

同じ位置に複数の要素をインラインで埋め込むには、パネルを 1 つの 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

RichTextBlockOverflow 要素を持つ RichTextBlock を使って、段組などの高度なページ レイアウトを作成することができます。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 または別の RichTextBlockOverflow の OverflowContentTarget として設定します。You link RichTextBlockOverflow elements by setting them as the OverflowContentTarget of a RichTextBlock or another RichTextBlockOverflow.

2 段組みのレイアウトを作成する簡単な例を次に示します。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 の最初の語句が太字、青色、16 ポイントのテキストで表示されます。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 の一連の Typography プロパティへのアクセスを提供します。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)