リッチ テキスト ブロック

リッチ テキスト ブロックには、段落、インライン UI 要素、または複雑なテキスト レイアウトのサポートが必要な場合に使用できる高度なテキスト レイアウト用の機能がいくつか用意されています。

これは適切なコントロールですか?

複数の段落、複数列またはその他の複雑なテキスト レイアウト、画像などのインライン UI 要素をサポートする必要がある場合はRichTextBlock を使用します。

TextBlock を使用して、アプリ内のほとんどの読み取り専用テキストを表示します。 これを使用すると、1 行または複数行のテキスト、インライン ハイパーリンク、太字、斜体、下線などの書式設定でテキストを表示できます。 TextBlock は、よりシンプルなコンテンツ モデルを提供します。そのため、一般に使い方がより簡単で、テキスト レンダリングのパフォーマンスも RichTextBlock より優れています。 ほとんどのアプリ UI テキストに適しています。 テキスト内に改行を配置することはできますが、TextBlock は単一の段落を表示するために設計されており、テキストのインデントはサポートされていません。

適切なテキスト コントロールの選択の詳細については、「テキスト コントロール」の記事をご覧ください。

推奨事項

フォントの文字体裁とガイドラインを参照してください。

UWP と WinUI 2

このコントロールの API は Windows.UI.Xaml.Controls 名前空間に存在します。

最新の WinUI 2 を使用して、すべてのコントロールの最新のスタイルとテンプレートを取得することをお勧めします。 WinUI 2.2 以降には、丸みのある角を使用するこのコントロールの新しいテンプレートが含まれます。 詳しくは、「角の半径」をご覧ください。

リッチ テキスト ブロックを作成する

WinUI 3 ギャラリー アプリには、ほとんどの WinUI 3 コントロールと機能の対話型の例が含まれています。 Microsoft Store からアプリを入手するか、GitHub でソース コードを取得します。

RichTextBlock の content プロパティは、 Blocks プロパティであり、 Paragraph 要素を介して段落ベースのテキストをサポートします。 アプリ内のコントロールのテキスト コンテンツに簡単にアクセスするために使用できる Text プロパティはありません。 しかし、RichTextBlock には、TextBlock にはない独自の機能がいくつかあります。

RichTextBlock では、次の機能がサポートされます。

• 複数の段落。 TextIndent プロパティを設定して、段落のインデントを設定します。
• インライン UI 要素。 InlineUIContainerを使用して、画像などの UI 要素をテキストとインラインで表示します。
• オーバーフロー コンテナー。 RichTextBlockOverflow 要素を使用して、複数列のテキスト レイアウトを作成します。

段落

Paragraph 要素を使用して、RichTextBlock コントロール内に表示するテキスト ブロックを定義します。 すべての RichTextBlock には、少なくとも 1 つの段落を含める必要があります。

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 などの対話型要素を使用することもできます。

同じ位置に複数の要素をインラインで埋め込む場合は、1 つのパネルを 1 つの 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 として設定します。

2 列のレイアウトを作成する簡単な例を次に示します。 より複雑な例については、「例」セクションを参照してください。

<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、Foreground、CharacterSpacing などの標準コントロール プロパティを設定して、テキストの外観を変更できます。 インライン テキスト要素と文字体裁添付プロパティを使用して、テキストの書式を設定することもできます。 これらのオプションは、RichTextBlock でテキストをローカルに表示する方法にのみ影響するため、テキストをコピーしてリッチ テキスト コントロールに貼り付けると、書式設定は適用されません。

インライン要素

Microsoft.UI.Xaml.Documents 名前空間には、太字、斜体、実行、スパン、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>

サンプル コードの入手

• WinUI ギャラリー サンプル - すべての XAML コントロールを対話形式で参照できます。

関連記事

テキスト コントロール

デザイナーの場合

• スペル チェックのガイドライン
• 検索の追加
• テキスト入力のガイドライン

開発者向け (XAML)

• TextBox クラス
• PasswordBox クラス

開発者向け (その他)

• String.Length プロパティ