locked
Binding HTML strings to Xaml for Rich Text features (tables, formatting, hyperlinks)

    Question

  • In my Universal 8.1 app, I am connecting to a dataset which uses blocks of HTML for rich formatting and hyperlinks. I would like to bind such a text block to a XAML control for read-only display.

    • Formatting tags include - but are not limited to - bold/italic, spans, tables, lists.
    • hyperlinks include both partially-formed references to pages of the legacy app i'm replacing (href="MyAppEntityViewerPage#NameOfEntityToDisplay") and full urls to external webpages

    I would like to display the text with proper formatting, and optionally support as many hyperlinks as I can.

    Solution paths I've encountered so far:

    1) Strip all the html out with an IValueConverter: 

    Windows.Data.Html.HtmlUtilities.ConvertToText(value.ToString());

    If I can't get html features to work, I can at least show the text. Unfortunately, I really do need to handle table and list tags prettily.

    2) Use a WebView control, and call webviewcontrol.NavigateToString(...) during the DataContextChanged event.
    This is the easiest so far. In addition to proper formatting, I can use the NavigationStarting event to block or redirect the legacy hyperlinks.
    Unfortunately, WebView appears to have limitations on proper Modern/Metro styling. Also, for a user to encounter a blocked legacy url is a less than delighting scenario; it would be better if I could either support hyperlinks or remove them.

    3) Bind the html string to a ContentControl using a string-to-RichTextBlock IValueConverter.
    I've seen a number of workarounds to enable binding text and hyperlinks to a RichTextBlock, but they appear to use unavailable Silverlight features or don't fully support the tags I need, I haven't followed this option deep enough for a full understanding. It looks like it involves translating html to xaml and emitting inline xaml controls. If so, that sounds powerful, but tedious and painful to set up, especially where tables are concerned.

    https://social.msdn.microsoft.com/Forums/windowsapps/en-US/de958373-72a5-4987-97be-1f6549ee143e/binding-to-richtextblock?forum=winappswithcsharp

    http://blogs.u2u.be/diederik/post/2010/08/31/A-Rich-HTML-TextBlock-for-WPF.aspx

    So, am I on the right track with any of these options? Is there something simple I've overlooked?
    Monday, March 09, 2015 9:37 PM

Answers

  • Your best bet is probably to use a WebView and pre-process the HTML to remove the legacy URLs you don't want to show.

    Beyond that you'll have to put some work in. There isn't a direct mapping from HTML to RTF (or to Xaml) and there are HTML elements which cannot be represented in RTF. Also note that the RichTextBlock is Xaml, not RTF. You can display RTF in the RichEditBox if you can find or write a converter.

    You can use 3rd party toolkits such as http://htmlagilitypack.codeplex.com/ to parse the HTML and then rewrite it as Xaml. Text formatting and hyperlinks will be straightforward conversions to RichTextBlocks. As you note, tables and lists will be a bit trickier. They may require using InlineUIElements to embed Grids in the text flow.

    Tuesday, March 17, 2015 3:11 AM
    Owner

All replies

  • Hi Captain,

    A fourth idea, can we convert the HTML content to RTF format and apply the RTF to the RichTextBlock?

    --James


    We are trying to better understand customer views on social support experience, so your participation in this interview project would be greatly appreciated if you have time. Thanks for helping make community forums a great place.
    Click HERE to participate the survey.

    Tuesday, March 10, 2015 2:29 AM
    Moderator
  • If there's a quick and easy way to convert html-style tags to RTF, then I suppose so.  Looking at the RTF spec, it would be a pain to have to do from scratch.
    Monday, March 16, 2015 4:38 PM
  • I'm not sure but I know there should exist some third party library can do this.

    Simply search on the search engine and to see if the library supported in Windows Store App.

    --James


    We are trying to better understand customer views on social support experience, so your participation in this interview project would be greatly appreciated if you have time. Thanks for helping make community forums a great place.
    Click HERE to participate the survey.


    Tuesday, March 17, 2015 2:41 AM
    Moderator
  • Your best bet is probably to use a WebView and pre-process the HTML to remove the legacy URLs you don't want to show.

    Beyond that you'll have to put some work in. There isn't a direct mapping from HTML to RTF (or to Xaml) and there are HTML elements which cannot be represented in RTF. Also note that the RichTextBlock is Xaml, not RTF. You can display RTF in the RichEditBox if you can find or write a converter.

    You can use 3rd party toolkits such as http://htmlagilitypack.codeplex.com/ to parse the HTML and then rewrite it as Xaml. Text formatting and hyperlinks will be straightforward conversions to RichTextBlocks. As you note, tables and lists will be a bit trickier. They may require using InlineUIElements to embed Grids in the text flow.

    Tuesday, March 17, 2015 3:11 AM
    Owner
  • I had done some fiddling and discovered embedded grids as a substitute for tables as you suggest.  Thanks all, for the assistance. I'll probably start with the webview to get a minimally viable product into the store.
    Tuesday, March 17, 2015 3:49 AM