UWP HTML data display

MadhuLi-9634 41 Reputation points
2021-04-06T09:42:46.23+00:00

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.

84856-2.png

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.

<p><span style="color:#000000;">Step 1 wit text </span><b><span style="color:#000000;">Aalsfs </span></b><span style="color:#000000;">sfsfls </span><i><span style="color:#000000;"><u>fsdfj </u></span></i><span style="color:#000000;">slfjdslf j</span><b><i><span style="color:#000000;"><u>sdlfkjsd</u></span></i></b><b><i><span style="color:#000000;"><u> fsdf sdfsdfsdfsdfdsf</u></span></i></b><span style="color:#000000;"> Sfs. </span><sub>SDLfsjfls </sub><span style="color:#000000;">fsdlkfjdslfsdjflsdf. </span><sup>Slskfjs </sup><span style="color:#000000;">fsflsdjfd sf sdf. </span></p><ol style="list-style-type:decimal;"><li><p><span style="color:#000000;">aa</span></p></li><li><p><span style="color:#000000;">bb</span></p></li><li><p><span style="color:#000000;">cc</span></p></li></ol><p><span style="color:#000000;"> </span></p>

Thanks,
Madhu

Universal Windows Platform (UWP)
0 comments

1 answer

Sort by: Most helpful
Most helpful Newest Oldest
  1. AryaDing-MSFT 2,841 Reputation points
    2021-04-07T08:44:34.927+00:00

    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.