HtmlTextBlock WinRT

Jan 18, 2015 at 4:50 PM
Edited Jan 18, 2015 at 4:54 PM
Good afternoon.

In one of my apps I have been trying for "years" to render HTML accordingly, but I've always hit the hard wall that is the WebView needing a fixed size. In the context of my app, the HTML content that needs rendering can have any size. I was trying one more time to make it work when I saw that you also have a control for that called HtmlTextBlock. It seemed perfect for me, because I am not expecting the rendered HTML to be very complex: just images and font styles.

I immediately tried it and the text is rendered, but instead of images I get the ACTUAL tag "img" in the content and NOT the images. I have attached a screenshot of the end result:

Image It's not very easy to see because those generated tags are in blue and my app's background is black.

A sample of the first row content is written next:
"I will start this out with a person random in the pool.
<div><span class="photo_container pc_m bbml_img"><a data-track="thumb" href="/photos/ringozang/4143097936/" title="Metro-SH #1 by Ringo.Zang" ><img class='notsowide' src="https://ec.yimg.com/ec?url=https%3A%2F%2Ffarm3.staticflickr.com%2F2462%2F4143097936_4023c5bd52_m.jpg&t=1421601756&sig=TpLeO_4y4w7d520gDcfvFA--~B" width="165" height="240" alt="Metro-SH #1 by Ringo.Zang"  class="pc_img" border="0" /></a></span></div>"
In the Wiki page of that control you say that "Some generators are missing in the WinRT version." Do they include images? If yes, can you please update this control now? From what I can see in my app it's just the img tag that doesn't get rendered.

Thank you.
Coordinator
Jan 18, 2015 at 5:02 PM
Images are supported, the problem here is that the class attribute is declared twice and thus the tag is ignored... remove one of the class attributes...
Jan 18, 2015 at 5:30 PM
Good afternoon.

It is true that the majority of image tags in the content of my app have those two classes, but even after removing one of them (in this case the first one) and getting the final string below, images are still not displayed (same blue tag).
I will start this out with a person random in the pool.
<div><span class="photo_container pc_m bbml_img"><a data-track="thumb" href="/photos/ringozang/4143097936/" title="Metro-SH #1 by Ringo.Zang" ><img  src="https://ec.yimg.com/ec?url=https%3A%2F%2Ffarm3.staticflickr.com%2F2462%2F4143097936_4023c5bd52_m.jpg&t=1421605379&sig=lgMTUeyKJ3.7Zdkzk1mniQ--~B" width="165" height="240" alt="Metro-SH #1 by Ringo.Zang"  class="pc_img" border="0" /></a></span></div>
Thank you.
Coordinator
Jan 18, 2015 at 5:36 PM
Yes, the problem is that the image is embedded in a link (a href), this is currently not supported, if you remove the a tag, then it should work if the src is available...
Jan 18, 2015 at 6:34 PM
Good evening.

Yes, I have just made a bunch of tests and just by removing the anchor tag the issue is fixed (I even left the redundant class attributes). This is a huge thing for my app, thank you VERY much.

Whenever you can please work on this control a little bit more; I think there's a lot of opportunity here, at least in the type of apps that I do, which consume content provided by users through HTML-enabled editors.

Keep up the good work!
Coordinator
Jan 18, 2015 at 7:02 PM
The parser may need some improvements... But currently i have no time to also work on this... If you like the project, write a review or follow it..
Jan 18, 2015 at 7:19 PM
Good evening.

Yes, I just proposed improvements so that you know that at least someone is interested in it, but I'm not expecting you to work on everything so fast. Please take your time, you have already helped me so much.

I have noticed that the control has a minimum height, i.e. it corretly stretches with more content but has a minimum size no matter what the HTML is, and the majority of the times I use the control the content is actually just one line. I have attached an example for you to see (it's the Comments HubSection):

Image

I have tried setting the various exposed Margin properties, as well as the MinHeight, but to no avail.

What can I do?

Thank you.
Jan 19, 2015 at 8:24 PM
Good evening.

I can't believe that I hadn't tried FixedHtmlTextBlock before: it fixed the height issue! :)

Thank you.
Coordinator
Jan 20, 2015 at 7:07 AM
Yes, one is with integrated scrollviewer and virtualization, the other a static/fixed control without scrolling and virtualization... Enjoy.