WebView Control in Windows Store Apps Using C#/XAML

Gaurav Gupta
12y
66.9k
0
0

Article

Today we discuss a Control named WebView control in Windows Store Apps. The WebView control works as a container control in which we can put web content or HTML content.

When we want show to web page content in the WebView control we specify the URL of the page to the WebView. In this article we will show you various ways to put the content in the control.

The WebView control has basically two types of method sthat we can use to set their content.

By setting a URL we can load a web page in the Web View control.
By setting the HTML content in the WebView control.

In a later section we discuss both ways.

Using the Source URL.

We can navigate the WebView control to a specific URL by setting the source of the page. Here I use the Navigate method of the WebView control to host web content. It takes the URI type value that contains the URL of the Web page.

The code is here:

<Grid>

</Grid>

Here is the C# code of the button's click event:

Uri uri= new ("http://www.c-sharpcorner.com");

WebView1.Navigate(uri);

Output

Load WebView control with HTML Content.

This is another type of data format that is supported in WebView control. We can also load HTML content into the WebView control. To give the HTML source content to the control I use the NaviageToString() method of the control. This method takes HTML content as an argument and shows it in the WebView control.

Here we set the HTML content to the control in the Code-behind code using C#.

Step 1

Create the HTML content:

string htmContent = @" <html>
<head></head>

<body>

<div id='myDiv'>Welcome to C-SharpCorner</div>

</body>

</html>";

Step 2

Give that content to the WebView control using the NavigateToString() Method:

WebView1.NavigateToString(HtmlContent);

Output

Another interesting thing about the WebView control and it's HTML content is that if your HTML content contains some scripts such JavaScript code then, we can also invoke that script also in the WebView control manually and show the result in the WebView control.

Here is the Exmaple.

Suppose the HTML content contains the scripting code like this:

string htmlFragment =

<html>

<head>

Function Hello()

{

document.getElementById('myDiv').innerText += 'Hello ';

}

</script>

</head>

<body>

<div id='myDiv'>Welcome to C-Sharpcorner</div>

</body>

</html>";

As you can see in the above code the HTML content consists of a JavaScript function named Hello. Now, when I put this HTML content in the WebView control, then it will display only the HTML part of the completed code in the control.

Output

Here I use a button to invoke the script code of the HTML content. To invoke the JavaScript code, click on the button and see the output. To invoke the script code, the WebView control has a method called InvokeScript() that takes two arguments; the first is the JavaScript function name that you want to invoke and the second is the arguments to pass.

private void Script_Click(object sender, RoutedEventArgs e)

{

// Invoke the javascript function called 'SayGoodbye' that is loaded into the WebView.

WebView3.InvokeScript("Hello", null);

}

Output

Invoke-Script-In-Webview-Control-In-Windows-Store-apps.jpg