Handling Images with the HtmlToXamlConverter

I was asked via a comment "why won't HtmlToXamlConverter display images, for example those embedded in an RSS feed's contents?".

The answer is probably indicated by the comment in the HtmlToXamlConverter classes AddBlock() method :

        case "img":
            // TODO: Add image processing
            AddImage(xamlParentElement, htmlElement, inheritedProperties, stylesheet, sourceContext);
            break;

And the equally terse AddImage() method itself:

        private static void AddImage(XmlElement xamlParentElement, XmlElement htmlElement, 
Hashtable inheritedProperties, CssStylesheet stylesheet,
List<XmlElement> sourceContext) { // Implement images }

I'd tweaked the HtmlFromXamlConverter AddImage class as follows:

        private static void AddImage(XmlElement xamlParentElement, 
XmlElement htmlElement,
Hashtable inheritedProperties,
CssStylesheet stylesheet,
List<XmlElement> sourceContext) { // Implement images (HACK by Nigel Spencer) bool inLine = (xamlParentElement.Name == HtmlToXamlConverter.Xaml_Paragraph); XmlElement xamlUIContainerElement = null; if (inLine) xamlUIContainerElement = xamlParentElement.OwnerDocument.CreateElement(
null, "InlineUIContainer", _xamlNamespace); else xamlUIContainerElement = xamlParentElement.OwnerDocument.CreateElement(
null, "BlockUIContainer", _xamlNamespace); XmlElement xamlImageElement = xamlParentElement.OwnerDocument.CreateElement(
null, "Image", _xamlNamespace); xamlImageElement.SetAttribute("Source", htmlElement.GetAttribute("src")); xamlImageElement.SetAttribute("Stretch", "None"); xamlUIContainerElement.AppendChild(xamlImageElement); xamlParentElement.AppendChild(xamlUIContainerElement); }

Don't expect too much from this though. If you really need to display rich HTML in a WPF app then use a Frame control. However, if like me, you've got some predominantly textual data stored in HTML and you want to make use of the great FlowDocument reader controls then the HtmlFromXamlConverter is a great little utility.

The source code for my test WPF harness was as  follows:

    public partial class Window1 : Window
    {
        public Window1()
        {
            InitializeComponent();
        }

        private void button1_Click(object sender, RoutedEventArgs e)
        {
            FlowDocument flowDocument = new FlowDocument();
            string xaml = HtmlToXamlConverter.ConvertHtmlToXaml(textBox1.Text, false);

            using (MemoryStream stream = new MemoryStream((new ASCIIEncoding()).GetBytes(xaml)))
            {
                TextRange text = new TextRange(flowDocument.ContentStart, flowDocument.ContentEnd);
                text.Load(stream, DataFormats.Xaml);
            }

            flowDocumentReader1.Document = flowDocument;
        }
}

Some very simple HTML to test. I also tested with HTML source from a  blog post of two and it seemed OK.

<HTML>
<BODY>
<p>The <b>Markup</b> that is to be converted.</p>
<p>An inline image [<img src="http://www.microsoft.com/australia/remix08/images/bling/iamgoing_08.jpg"/>]</p>
<p>Ooh! <i>Beautiful.</i></p>
<img src="http://images.quickblogcast.com/public/visitorImages/black_createdby.gif"/>
<p>Hmm...</p>
</BODY>
</HTML>
 

What did you think of this article?




Trackbacks
  • Trackbacks are closed for this post.
Comments

  • Friday, November 28, 2008 1:37 PM Anthony wrote:
    The one problem I have is the way the converter handles Images is when they're wrapped around a hyperlink. The hyperlink is always placed after the Image instead of making the Image inline with the hyperlink...
Leave a comment

Comments are closed.