Convert simple HTML to a RichTextBlock

Question

I am starting with Windows 8 and I am trying to convert HTML to a RichTextBlock.

I have read that I could use this function : HtmlUtilities.ConvertToText in a TextBlock but I can't find a way to use this function in a RichTextBlock!

From what I understand and tried I can't extend the RichTextBlock so I can't apply this function everytime a RichTextBlock is called.

Also, I can't find any way to bind text to a RichTextBlock and building a parser just for simple HTML (I only want paragraphs and italics/bolds) seems an overkill. Also, I have no idea where I should do this parsing since I the RichTextBlock seems unextendable.

I can't use the WebView because I need transparency (and from what I have read the WebView doesn't have it).

EDIT

@mydogisbox made me see I was getting too far on my research.

I can use HtmlUtilities.ConvertToText in the getter of a property that I can bind in the RichTextBlock. I couldn't bind it because I was trying to do <Run Text="{Binding TextHTML}" /> without a <Paragraph> tag.

However HtmlUtilities.ConvertToText doesn't preserve italics or bolds. Only paragraphs :/.

Answer 1

I ended up using a package avaiable on gitHub that converts from HTML to a RickTextBlock.

Basiclly you only need to open the Package Manager Console (Tools > Library Package Manager > Package Manager Console) and install the package running Install-Package RichTextBlock.Html2Xaml.

Then you open RichTextBlockProperties.cs and you have the lines you need to copy. In my case I had to add the namespace:

xmlns:rtbx="using:EventTests.Common"

And then you can bind your property that has HTML using:

<RichTextBlock rtbx:Properties.Html="{Binding ...}"/>

Some problems and some solutions

A problem I have found with this library is how it handles simple html with no divs. Like:

<p>Testing <i>italic</i> and something more.</p>
<p>More testing </p>

This prints:

Testing italic and something more.
More testing

However, I wanted something like this:

Testing italic and something more.

More testing

So I had to wrap the second paragraph in a div (and all paragraphs except the first could be wrapped).

<p>Testing <i>italic</i> and something more.</p>
<div><p>More testing </p></div>

If you wrap the first paragraph then you will have an extra new line.

So far this is the best solution I have found. If you find better I apreciate it since I am testing and learning. If you find a better solution I will accept yours.

Be carefull

This approach will crash if you have symbols like "<" or "&" in your html. I suggest that you replace those chars before you try to use this library.