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 NowNext up:
- Dinosaur or Mega-Soar
- Word Equations
- Rounding Numbers in Excel, Part 2
- OneDrive for Business Gets Some Major Enterprise Updates
- Do the Quick Step in Outlook
- Leadership, Management and Feedback
- Implementing paging easily
- Creating a layout for Word and Excel
- All About VLOOKUP() in Excel
- New security features in Windows 10
Previously
- Creating Labels in Microsoft Word
- Show Excel Chart in SharePoint 2013
- Rounding Numbers in Excel, Part 1
- Guidelines for Effective Time Management
- Easily sample and transfer colours between objects in InDesign
- Multiple Desktops in Windows 10
- Implementing and administering AD RMS
- Automate a table of contents in InDesign
- 5-steps to conducting quality feedback sessions
- Create a Custom Tracking View in Project 2013