How to display complex HTML content in WPF

Ankita 0

I am working on Visual Studio 2022 VSIX project. I have HTML content which I needs to bind in XAML. I have used WebBrowser control. It is working fine with simple HTML. But when I tried to load dynamic data with complex HTML then it gives Script error. Please suggest any other control to display HTML data. Thanks in advance.

Tianyu Sun-MSFT 28,951 Reputation points Microsoft Vendor

2023-04-11T06:42:41.4333333+00:00

Hello @Ankita,

Welcome to Microsoft Q&A forum.

Could you please share us the detailed error message to check? Could you please share some steps with us to reproduce the issue and confirm the behavior for better suggesting other control?
Viorel 114.2K Reputation points

2023-04-11T09:10:49.7+00:00
If the WebBrowser control cannot be used even by writing a special FEATURE_BROWSER_EMULATION registry key, then consider the new WebView2 control:

https://video2.skills-academy.com/en-us/microsoft-edge/webview2/get-started/wpf

Ankita 0

Hi @Tianyu Sun-MSFT , I am calling one get api which returns HTML code. That api hosted on localhost. Eg. API : [http://localhost:9220/getSampleHTML] Response :

<!DOCTYPE html>
<html>
<head>
<title>Sample HTML</title>
<link href="/resources/sample.css" rel="stylesheet" />
</head>
<body>
    <div>
        <h1 id="sample_heading">Sample HTML Code</h1>
    </div>
    <h3 id="sample_sub_heading">Sample Sub Heading</h3>
    <div class="sectionHead" onclick="showHideSection(this)">
        <h5>HTML</h5>
    </div>
    <div class="sectionContent">
        <p>The HyperText Markup Language or HTML is the standard markup language for documents designed to be displayed in a web browser. It is often assisted by technologies such as Cascading Style Sheets and scripting languages such as JavaScript. </p>
    </div>
    <div class="sectionHead" onclick="showHideSection(this)">
        <h5>CSS</h5>
    </div>
    <div class="sectionContent">
        <p>Cascading Style Sheets is a style sheet language used for describing the presentation of a document written in a markup language such as HTML or XML. CSS is a cornerstone technology of the World Wide Web, alongside HTML and JavaScript.</p>
    </div>
    <a onclick="document.body.scrollTop=0;document.documentElement.scrollTop=0;event.preventDefault()" id="backToTop"> <span class="label">Back to top</span></a>
    <br /><br />
    <script src="/resources/sample.js"></script>
    <script>
        on_resize(function () {
            setSection();
        });
    </script>
</body>
</html>

Setting WebBrowser content :

myWebBrowser.NavigateToString(result); // result contain HTML response value

When I run it, it gives Script error for sample.css and sample.js. It will work fine if If I change below href

<link href="/resources/sample.css" rel="stylesheet" />


<link href="http://localhost:9220/resources/sample.css" rel="stylesheet" />

And same for js url. Let me know if more information required to resolve the issue because API response is dynamic so I can not change href or src. Thanks in advance.

1 answer

Tianyu Sun-MSFT 28,951 Reputation points Microsoft Vendor

2023-04-17T13:57:59.79+00:00

Hi @Ankita,

This issue seems to be caused by WebBrowser control(it renders pages in compatibility mode by default - IE). See if adding this tag to the header works => <meta http-equiv="X-UA-Compatible" content="IE=Edge" />.

Also, please check if this document: Controlling WebBrowser Control Compatibility helps.

There are also some methods to suppress this error, for example => adding webBrowser.ScriptErrorsSuppressed=true;.

Perhaps you can consider using other control like WebView2.

BTW, on my side, the script error appeared no matter using <link href="/resources/sample.css" rel="stylesheet" /> or using <link href="http://localhost:XXXX/resources/sample.css" rel="stylesheet" />.

Sincerely,

Tianyu

If the answer is the right solution, please click "Accept Answer" and kindly upvote it. If you have extra questions about this answer, please click "Comment".

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.
Please sign in to rate this answer.

0 comments No comments
Sign in to comment

Share via

How to display complex HTML content in WPF

1 answer