Using the WebView Control in Windows Apps

 Sep 01, 2015

Let's say you are developing a Windows Store App using XAML with C# but you need to display interactive HTML5 content as part of the overall user experience. In today's blog you will see how it can be done by leveraging the powerful WebView Control.

If interacting with HTML controls through JavaScript code constitutes most of what your app will do then I would certainly prefer to develop the app entirely with HTML5 and JavaScript, but I am assuming that the app will provide a fair amount of features that would be more convenient to implement by using XAML with C#. In that case it would make more sense to segregate the HTML5 and JavaScript part into a few XAML pages that would be hosting a WebView Control that can do the magic. Let's go through the main steps to develop such an app.

In a XAML page drop a WebView from the toolbox. Let's call this control ContentWebView. Now the XAML page is hosting a WebView and we can load any HTML file on demand. If we need even more flexibility we can build the content to be loaded programmatically as well. To load the content from a file you can do as follows:

ContentWebView.Navigate(new Uri(@"ms-appx-web:///Views/HTMLContent.html");

We are assuming that there is a file called HTMLContent.html in the Views folder. In this file we can have all the required HTML5 controls that we need to provide the UI our user will interact with. The interactivity comes from JavaScript we can embed in a script block inside the HTML file. We can add references to external libraries as for example jQuery.

To get even more from this approach you need to learn how to establish a two-way communication channel between the host XAML page and the JavaScript code inside the HTML file we loaded into the WebView. Let's start with the JavaScript code you need to pass any data to the host page.

The WebView control has an event called ScriptNotify that gets triggered by JavaScript code as below:

var text1 = "anything to be passed to the host"; external.notify(text1);

In the host XAML page you would have code as follows:

async void ContentWebView_ScriptNotify(Object sender, NotifyEventArgs e) { string str1 = e.Value as string; //... use str1 for whatever you need it for }

Now you need to call some JavaScript function by writing C# code in the host. The next code snippet shows how:

await ContentWebView.InvokeScriptAsync("loadData",new string[]{"a", "b"});

We are calling a function named loadData defined in the HTML script block.

function loadData(){ var x = arguments[0]; var y = arguments[1]; ... }

Note that x will be equal "a" and y equal "b". We could pass any number of parameters.

To summarise, we use the external.notify() to pass data from JavaScript to the XAML page and we use InvokeScript() to call JavaScript functions from the XAML page.

This technique allows us to build Windows Apps using C# and XAML together with HTML5 and JavaScript.

To learn more about Windows Store Apps we recommend the courses 20481 - Essentials of Developing Windows Store Apps Using HTML5 and JavaScript and 20484 - Essentials of Developing Windows Store Apps Using C#.

How do your Excel skills stack up?   

Test Now  

About the Author:

Newton Godoy  

With over 17 years of in-class training experience and over 16 years of industry experience, Newton offers students a wealth of real-world technical knowledge and expertise in the areas of .NET application development, SQL Server and SharePoint Server. After spending several years lecturing as a professor, Newton found his true calling and began his career as a MCT. He worked as a technical trainer for some of Brazil's and Australia’s largest corporate training organisations before finally finding a home with New Horizons where he is now one of our top trainers. Newton brings a thorough mentoring capability to the classroom where he can advise on technical issues and challenges often beyond the scope of the course curriculum. His combination of technical knowledge and instructor experience make him one of the most respected instructors within the IT training industry.

Read full bio
top
Back to top