HTML TextBlock

On the web, HTML is king. So when we create applications on the Windows Phone 7 that presents content from the web, we are bound to run into the HTML obstacle.

In this post I will dig into the ways in wich you can present HTML on the Windows Phone 7 and offer you an alternative.

Consider the HTML version of my previous post;

 <p>So it has come to this, I’ve started a blog. Let me start off by introducing myself;</p> <p>I am Matthijs Krempel a part time Windows Phone 7 developer, full time .Net developer and life time father of two boys.</p> <p>With this blog I want to share the challenges and solutions of my development journeys on the Windows Phone 7 platform. The last year I have been developing the <a title=”Channel9 Client for Windows Phone 7″ href=”http://www.windowsphone.com/en-US/apps/7551da0c-bd88-e011-986b-78e7d1fa76f8” target=”_blank”>Channel9 Client for Windows Phone 7</a> and have developed some solutions to challenges that I think and hope you will find interesting.</p> <p>I will host all code on <a title=”Krempel’s codeplex project” href=”http://krempelwp7.codeplex.com/”>codeplex </a>and link to it from here. In my next post I will go into details about the HTML Textblock.</p> <br />

The good, the bad and the ugly

Say you want to use this content in an Windows Phone 7 application. A solution is to use the standard WebBrowser control.

You can navigate to HTML from an URI or from a string. Let’s Navigate to this HTML from string, this is what the end result looks like;

It’s a start, with some additional Html formatting (solution via Ben Geek);

That’s more like it! We can now present any HTML in the native style of the phone! However, it’s not all dandy.

The huge drawback in using the webbrowser control is that it handles gestures for it’s internal scrolling and zooming. This means that if you host this control in a scrollable region, it will capture the gestures and not scroll the parent container. There are solutions in wich you can disable vertical or horizontal scrolling by drilling into the Visual Tree, but the gesture will still not availible outside the webbrowser control. The user will not be able to navigate. The tradeoff could be that you can use the webbrowser control in a standalone page, like many news readers do.

So, you are limited in your options for using the webbrowser control to present HTML content, if you are not willing to sacrifice usability.

The alternative

With Windows Phone 7.1 (Mango) a new control was added to the standard library; the RichTextBox. The RichTextBox enables us to present (a subset of) flowdocument elements, natively.

Only three obstacles left to conquer;

1. We have HTML and we would like RichTextBox XAML
2. Length of the XAML must not exceed 1500 (or so) characters
3. Height of the RichTextBox must be smaller then 2000 pixels (2000×2000 is the maximum size of any Windows Phone 7 visual element)

HTML Agility Pack

I’ve solved the first problem by using the HTML Agility Pack. There is a Windows Phone 7 version availible on codeplex, download the source, open the Trunk/HAPPhone.7.1 solution, add reference to System.Xml.XPath from the Silverlight 4.0 SDK, remove build scripts and compile!  Now we have a effiecient way of navigating trough the HTML, all we have to do is translate the HTML to XAML objects. That solves obstacle 1.

We are left with two obstacles, 2 and 3. Wich we can solve quite easily. Instead of trying to create one huge RichTextBox with all the HTML in it, we create a whole host of RichTextBoxes. What I’ve done in the solution is to make a RichTextBox per paragraph. As long as the author of the comment or article refrains from using lenghty texts, we will be fine.

The end result looks something like;

You can host this HTMLTextBlock in any kind of scrollable container and the gestures work!

Source code and this example is available here!

The main goal of this control is to render the kind of HTML seen in blogs and comments, it’s not ment as a full blown browser, if you want those kinds of features fallback to the webbrowser control.

UPDATE;

New version is availible here!

~ by Matthijs Krempel on March 5, 2012.