HTML to XAML

It was not before proposing HTML templates for formatting content in a Silverlight app in a heated discussion that I noticed that there’s no decent way to display HTML in Silverlight.

The indecent thing you can do is overlay the Silverlight app with a piece of the browser’s document. This is an OK approach for a lot of cases, but not for this one: you get problems with scrolling and the z-order of elements within your app, you become vulnerable to all the encoding and scripting problem you wish so hard you didn’t have, and don’t even mention accessibility or print support should it ever be implemented (and if they take the vote on Silverlight features only half-serious, if should come).

The other way is transforming HTML into Silverlight. There’s no built-in support in the platform for that, but I found this article by David Anson. It offers a very useful HTML control that renders HTML. When it find correct XHML it will transform it to XAML, otherwise it uses the browser’s capabilities. However, there are some things that I wish it would do:

  • Not use the browser – I don’t need to handle malformed HTML since it’s only my own templates I want to render.
  • Support table layout.
  • Support CSS. All the decent WYSIWYG editors create CSS formatting.

So I decided to do one by myself (well, mostly for the fun of it). As it turns out, the task is quite simple: gthe behavior of elements that are displayed as blocks in HTML can be mimicked with a StackPanel. Differently formatted text in <span>tags can be displayed as Run elements in TextBlocks. Tables care very much like Grids.

The hard part was to get CSS to work, but the most important building block was already at hand: the CSS Parser by BoneSoft prove to be extremely useful. It does not only understand the basic syntax of CSS, but adds niceties like recognizing the unit of property values and converting hex value to Color structs. It needed to slightly be adapted to Silverlight (System.Windows.Media instead of System.Drawing; no ASCIIEncoding), but that was it.

The current state of the project is that it understands the basic HTML formatting tags (p, div,br,  h1. h2, h3, big, small, u, i, b), CSS style attributes for the box model and text formatting, and tables. The TODOs are CSS style sheets defined in a <style> element with proper matching, and a proper test suite. Links and script are not supported because I don’t need them right now. When done, I’m going to publish the source code; I still have to find the right place and license, but free distribution and modification is intended.

UPDATE:
Ummm, no. The thing has now dissolved into a part of a larger and proprietary project, and publishing is out of the picture at the moment.

Advertisements
About

Christian is a software architect/developer. He lives in Germany, reads a lot, and likes cycling.

Tagged with:
Posted in Coding

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: