Issue with webView2 control not sending messages until form has been resized

BRENT MALNACK 20 Reputation points
2024-05-16T16:50:55.1333333+00:00

Hello,

I've written an app that generates a SVG graphic in a second form. That form contains a webView2 control.

I was not able to ever get a message to the webMessageReceived block until I switched from a window.external.notify command to a window.chrome.webview.postMessage command. On top of that, the command only fires when the form with the webView2 control has been resized.

I've done a ton of debugging on this and I can't seem to get it to fire until the form has been resized.

I've tried to force a reload on the form and when I do that, the SVG never renders.

Any thoughts? The code is a bit complex so I didn't want to overcomplicate the question.

JavaScript API
JavaScript API
An Office service that supports add-ins to interact with objects in Office client applications.
1,007 questions
C#
C#
An object-oriented and type-safe programming language that has its roots in the C family of languages and includes support for component-oriented programming.
11,108 questions
{count} votes

Accepted answer
  1. Jiale Xue - MSFT 47,581 Reputation points Microsoft Vendor
    2024-05-17T06:26:25.2266667+00:00

    Hi @BRENT MALNACK , Welcome to Microsoft Q&A,

    Before attempting to send a message via window.chrome.webview.postMessage, make sure that the WebView2 control is fully initialized and loaded with the correct content.

    Resizing the form causes the message to fire, which may be related to the layout and rendering mechanism of WebView2. You can try to force a redraw to be triggered after the SVG content is loaded, without needing to resize the form.

    Make sure you're using the latest version of the WebView2 SDK and runtime. There may be some issues with older versions.

    If the SVG doesn't render when you reload the form, it may be because of timing of the content loading. Make sure to render the SVG after the HTML content is loaded.

    public partial class Form1 : Form
    {
        public Form1()
        {
            InitializeComponent();
            InitializeWebView();
        }
    
        private async void InitializeWebView()
        {
            await webView.EnsureCoreWebView2Async(null);
            webView.CoreWebView2.NavigationCompleted += WebView_NavigationCompleted;
            webView.CoreWebView2.WebMessageReceived += WebView_WebMessageReceived;
            LoadSvgContent();
        }
    
        private void WebView_NavigationCompleted(object sender, CoreWebView2NavigationCompletedEventArgs e)
        {
            string script = @"
                function boxClicked(folderId) {
                    window.chrome.webview.postMessage(folderId);
                }
            ";
            webView.CoreWebView2.ExecuteScriptAsync(script);
        }
    
        private void WebView_WebMessageReceived(object sender, CoreWebView2WebMessageReceivedEventArgs e)
        {
            string message = e.TryGetWebMessageAsString();
            MessageBox.Show($"Received message: {message}");
        }
    
        private void LoadSvgContent()
        {
            StringBuilder svgBuilder = new StringBuilder();
            svgBuilder.AppendLine("<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 500 500\" preserveAspectRatio=\"xMidYMid meet\" id=\"svg-content\">");
            svgBuilder.AppendLine("<script>function boxClicked(folderId) { window.chrome.webview.postMessage(folderId); }</script>");
            svgBuilder.AppendLine("<rect x=\"0\" y=\"0\" width=\"100\" height=\"100\" fill=\"lightgray\" stroke=\"black\" stroke-width=\"2\" onclick=\"boxClicked('folder1')\"/>");
            svgBuilder.AppendLine("</svg>");
            webView.NavigateToString(svgBuilder.ToString());
        }
    }
    

    Best Regards,

    Jiale


    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.

    1 person found this answer helpful.

0 additional answers

Sort by: Most helpful

Your answer

Answers can be marked as Accepted Answers by the question author, which helps users to know the answer solved the author's problem.