[UWP][RichTextBlock] 画像とハイパーリンクを表示する

2016.05.10

今回はRichTextBlockに画像とハイパーリンクを表示する方法について見ていきます。

以下に、画像とハイパーリンクを表示する例を示します。

この例では2つのParagraph（段落）を使用し、上のParagraphに画像を表示しています。

画像は<Image>を使用しますが、単純にParagraphの中には配置できず、<InlineUIContainer>の中に配置します。

2つ目のParagraphにはハイパーリンクを表示しています。

<Hyperlink>でハイパーリンクを作成し、表示するテキストは<Run>を使用しています。

<RichTextBlock>
    <Paragraph>
        <InlineUIContainer>
            <Image Source="Assets/cropped-title.png" Width="200" Stretch="Uniform" Margin="0,0,0,35"/>
        </InlineUIContainer>
    </Paragraph>
    <Paragraph TextIndent="10">
        <Hyperlink NavigateUri="https://blog.hiros-dot.net" >
            <Run Text="HIRO's.NET Blog"/>
        </Hyperlink>
    </Paragraph>
</RichTextBlock>

このXamlの実行例を以下に示します。