Windows 8 Metro RichTextColumns embed hyperlinks and images

Question

I am building a simple rss reader app for Windows 8 in C# and XMAL.

The feed returns html content for the article body.

I create an ItemDetailPage and in it, it uses RichTextBlock columns to display columns of text - which look great.

So I bind a Content property to the rich text block which uses HtmlUtilities.ConvertToText to parse the text from the html content.

This works well. However I still want to have hyperlinks and images in the content. Originally I was using a WebView and NavigateToString however you can't use columns so get a long page of text, which I don't want.

Is there a way to do this? I can parse the images and hyperlinks using the metro port of the Html Agility Pack but is there any way to embed these hyperlinks and images? For images, I was thinking of adding to richtextcolumns class so when creating a new column, before adding that, it added an image. This may work, but would terrible with a image at the start of every column.

Does anyone have any ideas how this could be achieved? I would be similar to the contoso news app design they have up http://msdn.microsoft.com/en-us/library/windows/apps/hh868272.aspx. If you scroll to the article page they have a block quote in the article content.

Answer 1

The RichTextBlock contains a collection of Paragraphs and a Paragraph is a list of Inlines. The Inlines are usually Runs, but you can also use InlineUIContainer as a inline. InlineUIContainer has a child that can by any XAML element you want, hyperlink or an image.

I personally use this function to convert an hyperlink from html to a Inline:

    public void AddLink(XElement element)
    {
        var link = element.Attribute("href").Value;

        InlineUIContainer uc = new InlineUIContainer();
        TextBlock tb = new TextBlock();
        tb.Margin = new Thickness(0, 0, 0, 0);
        var run = new Run();
        run.Text = element.Value;
        tb.Inlines.Add(run);
        tb.Tapped += (s, e) =>
        {
            Launcher.LaunchUriAsync(new Uri(link, UriKind.Absolute));
        };
        uc.Child = tb;
        paragraph.Inlines.Add(uc);
    }

You can do a similiar think with an Image