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 :/.

Struma

You should be able to just call the ConvertToText function in the property you have bound to your RichTextBlock. What problems did you have doing it that way? – Papoose

God. I was totally lost on my research. I had a problem with <Run Text>. Now I have realized that I need a <Paragraph> before so I could use it. I have binded it and tried to use a converter before I saw your comment. The converter was crashing but after I saw your comment I have changed my property's getter and now is working! However, I found out that HtmlUtilities.ConvertToText doesn't convert italics/bolds. I only need italics, bolds and paragraphs :/. Going to update the question. Thanks for your comment. – Struma

If you just need those three, then maybe you could make a simple parser that converts those three things into text in the html and then you could parse again after running it through ConvertToText to parse those into italics etc. – Papoose

Supose I do that parsing (I am going to save that solution for last). How can I add the "generated" tree to the xaml? Can I still bind and separate the parsing from the Model? Kinda lost since I got into windows 8 today :p – Struma

I think so. You would just have a method that converts the html to your type of html and then another method which converts the result of the ConvertToText to something the RichTextBox can display. Should just be chained method calls in the property. – Papoose

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.

Struma

I ended up editing the accompanying xslt to add Margin="0,10,0,0" to the <Paragraph> tag instead. Same result, more or less. Note that I didn't mind the first paragraph having the margin as well due to how my containers were already lined up... – Murchison

Question regarding Be careful section of your answer. I am getting exception and offcourse in my html there are tags which contains '<'. how can I get rid of it? And I can't change my html because service is not in my hand. – Affiliate

and I'm getting html through service. Could I encode that string or something like that??? – Affiliate

I encoded through this System.Net.WebUtility.HtmlEncode(obj.DescriptionEN); now its not giving error exception but printing whole html there with tags :( – Affiliate