Bind HTML To Textblock with HTML to XAML Converter

I was recently looking for an easy way to get some existing HTML content resources into a WPF / Silverlight application. Now, in retrospect, it looks like I could have done something with a FlowDocument Viewer that might have been a little easier, but I figured I would post my solution in case it helps out someone else.

There are basically 3 pieces to binding HTML to a Textblock in WPF.

1. Some HTML and a TextBlock to bind the HTML to.
2. An HTML to XAML Converter (Provided by MSDN, adapted slightly)
3. An Attached Property for the TextBlock.

The HTML to XAML Converter comes from a sort of proof of concept over on MSDN. I basically took the converter sample project and combined it all into one file so I could easily incorporate it into my project (or any other project for that matter; you can download the code below). The converter will parse the HTML, tokenize it, and convert it to a collection of Inline XAML elements that we can add to the TextBlock Inlines property.

All that's left is adding an Attached Property for us to bind to and replace the TextBlock's Inline elements. The way this works is to use a standard Attached Property and whenever our Attached Property changes, convert the bound HTML to a collection of Inline elements and add them to our TextBlock. The majority of the hard stuff is done by the HTML to XAML converter, but here is the code for the Attached Property and an example of the XAML to use it in your application.

Download Sample App / Code

// Attached Property to facilitate Binding HTMLto a TextBlock

    public static class HtmlTextBoxProperties 

    {         

        public static string GetHtmlText(TextBlock wb) 

        { 

            return wb.GetValue(HtmlTextProperty) as string; 

        } 

        public static void SetHtmlText(TextBlock wb, string html) 

        { 

            wb.SetValue(HtmlTextProperty, html); 

        } 

        public static readonly DependencyProperty HtmlTextProperty = 

            DependencyProperty.RegisterAttached("HtmlText", typeof(string), typeof(HtmlTextBoxProperties), new UIPropertyMetadata("", OnHtmlTextChanged)); 

        private static void OnHtmlTextChanged( 

            DependencyObject depObj, DependencyPropertyChangedEventArgs e) 

        { 

            // Go ahead and return out if we set the property
         on something other than a textblock, or set a value that is not a string. 

            var txtBox = depObj as TextBlock; 

            if (txtBox == null) 

                return; 

            if (!(e.NewValue is string)) 

                return; 

            var html = e.NewValue as string; 

            string xaml; 

            InlineCollection xamLines; 

            try 

            { 

                xaml = HtmlToXamlConverter.ConvertHtmlToXaml(html,
false); 

                xamLines = ((Paragraph)((Section)System.Windows.Markup.XamlReader.Parse(xaml)).Blocks.FirstBlock).Inlines; 

            } 

            catch 

            { 

                // There was a problem parsing the html, return
         out. 

                return; 

            } 

            // Create a copy of the Inlines and add them to the
         TextBlock. 

            Inline[] newLines = new Inline[xamLines.Count]; 

            xamLines.CopyTo(newLines, 0); 

            txtBox.Inlines.Clear(); 

            foreach (var l in newLines) 

            { 

                txtBox.Inlines.Add(l); 

            } 

        } 

    } 

<TextBlock 

   x:Name="MyHtmlBlock"

   behaviors:HtmlTextBlockProperties.HtmlText="{Binding Path=MyHtml}"

   />

Now Playing - Matt & Kim - Daylight