UWP HTML data display

Question

question

MadhuLi-9634 asked Apr 6, '21 AryaDing-MSFT commented Apr 9, '21

UWP HTML data display

Hi,

We need to implement a screen like below in a UWP app where we need to show around 500 - 1000 steps like below.
Each step can have plain text or rich text which includes bold, italic, underline, bullet, numbering and other characters, superscript, subscript etc.. Like in this example.

And we have the data in html/xml format like below for example. We are trying to decide what is the best UWP component to use for this. Using web views for each of these steps/rows might be one option, but I have heard that web views are heavy weight and we shouldn't use them as it can cause memory issues etc.. (as we need to show 500-1000 of steps like that). Please share your thoughts on that. And what is the component you can suggest to implement this.

Step 1 wit text Aalsfs sfsfls fsdfj slfjdslf jsdlfkjsd fsdf sdfsdfsdfsdfdsf Sfs. SDLfsjfls fsdlkfjdslfsdjflsdf. Slskfjs fsflsdjfd sf sdf. <ol style="list-style-type:decimal;"><li>aa</li><li>bb</li><li>cc</li></ol>

Thanks,
Madhu

windows-uwp

2.png (35.7 KiB)

5 |1600 characters needed characters left characters exceeded

Attachments: Up to 10 attachments (including images) can be used with a maximum of 3.0 MiB each and 30.0 MiB total.

Answer 1 · 2021-04-07T08:44:34.927Z

AryaDing-MSFT answered Apr 7, '21 AryaDing-MSFT commented Apr 9, '21

Hi,

Welcome to Microsoft Q&A!

You could use RichTextBlock to show html content. Please refer the following steps to do this.

1.Create a class library, register dependency property for RichTextBlock.

2.Parse the Html document and generate the corresponding Block or Inline based on the tag type by recursion.

3.Write conversion methods for various tags

4.Reference the class library in uwp project, convert html to string type and bind it to RichTextBlock property

You could find more information here, which is still available even though it has expired. That sample captures most of the elements, you could expand the analysis according to specific situation.

In addition, I’m not very clear about your issue. Could you please tell me why you can’t combine these 500 steps to a html file and display them in a webView?

If the response is helpful, please click "Accept Answer" and upvote it.

Note: Please follow the steps in our documentation to enable e-mail notifications if you want to receive the related email notification for this thread.

· 2

5 |1600 characters needed characters left characters exceeded

Attachments: Up to 10 attachments (including images) can be used with a maximum of 3.0 MiB each and 30.0 MiB total.

MadhuLi-9634 · Apr 07, 2021 at 02:47 PM

@AryaDing-MSFT Thank you very much for the details.
We can't hard code these in a html as these are all Dynamic data. Different items in our app can have different number of Steps and all these steps data is read from the server and shown here. And for each step we have different actions defined with different button at the right side like adding comments adding photos and viewing different info related to those steps. So we'll have to show each of these steps and actions related to each steps one by one.

0 ·

AryaDing-MSFT MadhuLi-9634 · Apr 09, 2021 at 09:49 AM

@MadhuLi-9634 The key to this way is parsing the html structure and converting the tag to the text type that RichTextBlock supported. Please refer to this document to know more supported text types.

0 ·

question