WebView2 control not loading HTML string

Question

WebView2 control not loading HTML string

WebView2 Control: As shown below, the HTML String successfully loads via NavigateToString(...) call inside Button_Click(...) event. But I need to have the HTML string loaded as soon as the Window and/or its Grid is loaded. But the following code either inside the constructor MainWindow(){...} or inside rootGrid_Loadded(...) event throws the error shown below:

Question: How can we have the issue resolved and have the HTML string loaded right after either the Window or the Grid is loaded? Or are there better solutions/workarounds?

MainWindow.xaml:

<Window x:Class="WpfWebView2TEST.MainWindow"
        .....
        xmlns:wv2="clr-namespace:Microsoft.Web.WebView2.Wpf;assembly=Microsoft.Web.WebView2.Wpf"
        mc:Ignorable="d"
        Style="{StaticResource CustomWindowStyle}"
        Title="MainWindow" Height="450" Width="800">
    
    <Grid>
        <Button x:Name="btnTest" Content=Test" Click="btnTest_Click"/>
        <wv2:WebView2 Name="MyWebView" />
    </Grid>
</Window>

NOTE: Call to MyLoadHTMLString() in the following constructor or the rootGrid_Loaded(...) event throws the error shown below:

MainWindow.xaml.cs:

public partial class MainWindow : Window
{
    public MainWindow()
    {
        InitializeComponent();
        MyLoadHTMLString();
    }
........
}

private void rootGrid_Loaded(object sender, RoutedEventArgs e)
{
  MyLoadHTMLString();
}


public void MyLoadHTMLString()
{
    string sHTML = "<!DOCTYPE html>" +
    "<html lang=\"en\" xmlns=\"http://www.w3.org/1999/xhtml\">" +
    "<head>" +
        "<meta charset=\"utf-8\" />" +
        "<title>Test Title</title>" +
    "</head>" +
    "<body>" +
        "<p>Test paragraph</p>" +
    "</body>" +
    "</html>";
MyWebView.NavigateToString(sHTML);
}

NOTE: Following Button click event successfully loads the HTML string into WebView2

private void btnTest_Click(object sender, RoutedEventArgs e)
{
  MyLoadHTMLString();
}

Error:

System.InvalidOperationException HResult=0x80131509 Message=Attempted to use WebView2 functionality which requires its CoreWebView2 prior to the CoreWebView2 being initialized. Call EnsureCoreWebView2Async or set the Source property first. Source=Microsoft.Web.WebView2.Wpf

UPDATE:

The second and third paragraph of this MSDN Doc seem to provide some resolution to such an issue. but I'm not sure how to implement it

c#

wpf

xaml

webview

webview2

asked on Stack Overflow Jul 19, 2020 by

nam • edited Jul 19, 2020 by

nam

2 Answers

First:

The answer to your question:

You must ensure the Webview2 control is initialized before you can use it. You can do this in one of two ways, either call:

await MyWebView.EnsureCoreWebView2Async();

Or simply set the Source property.

Next: This is just a good advice. I never use 'NavigateToString', because having html in a C# string can quickly become 'messy'.

Instead I create a subfolder (called 'html'). Then I have a html file, a css file and a script file inside this folder. Now I can edit the files directly and have intellisense and error checking at design time.

Remember: Click the files in 'Property Inspector', then in properties window, select 'Copy to output directory'. Here select: 'Copy if newer'. Now the files will be copied to 'Bin' folder, so WebView2 can find them.

Now in your code, you simple set the WebView2's Source property to the path of the html file, like this:

MyWebView.Source = new Uri(Path.Combine(Environment.CurrentDirectory, @"Html\MyWebView.html"));

Note: This will automatically initialize the WebView2 and navigate to your html file.

In your html file, you can now include css and script files like you normally do for a webpage:

<html>
<head>
    <meta charset="utf-8" />
    <title>Whatever</title>
    <link rel="stylesheet" href="MyWebView.css" type="text/css" />
    <script type="text/javascript" src="MyWebView.js">
    </script>
................

This is IMHO a much nicer way to use local html - much easier to maintain.

answered on Stack Overflow Jul 20, 2020 by

Poul Bak

To load a html into WebView2, you can use NavigateToString:

private async void Form1_Load(object sender, EventArgs e)
{
    var html = @"
        <html>
            <head>
                <title>Basic Web Page</title>
            </head>
            <body>
                Hello World!
            </body>
        </html>";

    await webView21.EnsureCoreWebView2Async();
    webView21.NavigateToString(html);
}

answered on Stack Overflow Jan 23, 2021 by

Reza Aghaei

User contributions licensed under CC BY-SA 3.0