Showing Html in WinRT with RichTextBlock or other component

S

3

10

I want to show html in string with some component. Now I am using RichTextBlock and I tried few extensions for converting html to xaml or rtf but I didn´t found any working with WinRT. I know I can use WebView but it isn´t so pretty. I just want to do little change to ItemDetailPage (where is used RichTextBlock) to show users elementary html (bold, italics, links, images, ...).

Is there some component or some way how to do this (not webview)? Or is there working convertor?

Sibeal answered 26/10, 2012 at 13:38 Comment(5)

how about doing view source in the web control? – Landers 26/10, 2012 at 13:43

You would have to build your own parser. It sounds like you are barking up the wrong tree if you have to do that. – Brachypterous 26/10, 2012 at 14:2

Could you provide more detail why the WebView (which is IE10) isn't the best component for showing HTML? – Clearstory 26/10, 2012 at 14:21

I like how RTB is looking in default ItemDetailPage. Text is in columns a user is moving with text horizontally. – Sibeal 30/10, 2012 at 7:37

Component library has that richtextbox which I found very good and easy to use, but it is too much expensive for me, sharing this for those who can afford. I have tried its trial version. – Dolph 2/3, 2015 at 8:18

L

2

You have 2 ways

build or get your own html to xaml parser to use the contents as RichTextBox Source
Use WebView to display html content

I recommend WebView because this componente have a lot of features that is very difficult to implement as a parser

javascript support
css support
bad formed (real world) html support
etc

So, in a WebView control you can use WebView.NavigateToString method to display html contents stored in a string.

Yo can, even, modify string to changes styles, add scripts, etc as you need to custom webview look and feel.

NavigateToString has no support for binding but I wrote an article (spanish) teaching how to doing using attached properties: http://blogs.msdn.com/b/juank/archive/2012/10/29/tutorial-crear-app-lector-rss-winrt-parte-7.aspx

Use this code(plex) to parsing, if it not fit exactly you can change te code for your own. ;) http://html2xaml.codeplex.com/

Other wise you would create the ode yourself, if you want break pages in column text (to horizontal reading) you must use RichTextBlock, use RichTextColumns hepler class ( included in Common/ folder when you start your app from a template) and try to parse HTML to XAML.

Landahl answered 26/10, 2012 at 13:38 Comment(3)

I tried WebView and I found an article how to binding myself and it works, html look good. But I don´t want to use it because I want to show mainly text with html tags. It would be basic tags like bold, italics, lists and sometimes images and links. It should show articles so long text and I like that view of RichTextBlock in sample page (ItemDetailPage). Text is in columns and user is moving with it horizontally. I don´t know how to do it with WebView. – Sibeal 30/10, 2012 at 11:2

If you want break pages in column text (to horizontal reading) you must use RichTextBlock, use RichTextColumns hepler class included in Common/ folder when you start your app from a template and try to parse HTML to XAML. Use this code(plex) to parsing, if it not fit exactly you can change te code for your own. ;) html2xaml.codeplex.com I have added this part to the answer. – Landahl 30/10, 2012 at 22:31

how would you pass the xaml that is generated by html2xaml to the RichTextBlock? I passed my html to html2xaml via a converter and it works great except it returns the actual XAML I want to render, so the actual XAML text is what I see in the RichtTextBlock! How can I show this XAML instead of using it as the Text value? – Dorothi 11/4, 2013 at 22:42

C

3

I finally got fed up with the lack of WinRT-supported Html to Xaml conversion and wrote my own. For kicks, I put it on codeplex. For even further kicks, and to experiment with NuGet, I published it there, too...

Obviously, this isn't the end-all of Html to Xaml conversion, but it's a start...

Calves answered 31/12, 2012 at 20:20 Comment(2)

Did u forget to add some test app that shows it in action. It's kind of useless without it for anybody to try it quickly. – Abhenry 24/3, 2013 at 5:17

There should be enough at the codeplex site to get you most of the way there. If you have questions, there's also the Issue Tracker or the Discussions tabs. – Calves 25/3, 2013 at 15:12

L

2

You have 2 ways

build or get your own html to xaml parser to use the contents as RichTextBox Source
Use WebView to display html content

I recommend WebView because this componente have a lot of features that is very difficult to implement as a parser

javascript support
css support
bad formed (real world) html support
etc

So, in a WebView control you can use WebView.NavigateToString method to display html contents stored in a string.

Yo can, even, modify string to changes styles, add scripts, etc as you need to custom webview look and feel.

NavigateToString has no support for binding but I wrote an article (spanish) teaching how to doing using attached properties: http://blogs.msdn.com/b/juank/archive/2012/10/29/tutorial-crear-app-lector-rss-winrt-parte-7.aspx

Use this code(plex) to parsing, if it not fit exactly you can change te code for your own. ;) http://html2xaml.codeplex.com/

Other wise you would create the ode yourself, if you want break pages in column text (to horizontal reading) you must use RichTextBlock, use RichTextColumns hepler class ( included in Common/ folder when you start your app from a template) and try to parse HTML to XAML.

Landahl answered 26/10, 2012 at 13:38 Comment(3)

I tried WebView and I found an article how to binding myself and it works, html look good. But I don´t want to use it because I want to show mainly text with html tags. It would be basic tags like bold, italics, lists and sometimes images and links. It should show articles so long text and I like that view of RichTextBlock in sample page (ItemDetailPage). Text is in columns and user is moving with it horizontally. I don´t know how to do it with WebView. – Sibeal 30/10, 2012 at 11:2

If you want break pages in column text (to horizontal reading) you must use RichTextBlock, use RichTextColumns hepler class included in Common/ folder when you start your app from a template and try to parse HTML to XAML. Use this code(plex) to parsing, if it not fit exactly you can change te code for your own. ;) html2xaml.codeplex.com I have added this part to the answer. – Landahl 30/10, 2012 at 22:31

how would you pass the xaml that is generated by html2xaml to the RichTextBlock? I passed my html to html2xaml via a converter and it works great except it returns the actual XAML I want to render, so the actual XAML text is what I see in the RichtTextBlock! How can I show this XAML instead of using it as the Text value? – Dorothi 11/4, 2013 at 22:42

M

1

I have implemented a library which parses HTML and renders the HTML using native controls. The component is very flexible and extensible.

Have a look at:

http://mytoolkit.codeplex.com/wikipage?title=HtmlTextBlock

Margarita answered 22/10, 2014 at 8:1 Comment(0)

Recommended topics

Hot tags