android, mobile, software development, tech, xamarin

Using the Xamarin WebView for programmatic display of HTML content

Xamarin Forms is a key framework for C# and .NET developers since it lets you target Android, iOS and to some extent Windows (UWP and therefore Windows 10 only) with maximum code reuse. I have a longstanding interest in embedded web browser controls and was glad to see that Xamarin Forms supports a capable WebView control. The WebView wraps Chrome on Android, Safari on iOS, and Edge on UWP.

I did a quick hands-on. In this example (running in the Android emulator on Hyper-V, of course), the HTML is generated programmatically and the CSS loaded from local storage. I also added some script to show the User Agent string that identifies the browser.

image

There are a few things needed to make this work. Some XAML to put the WebView on a page. Then to load content into the WebView you need an HTMLWebViewSource object. If you are loading external files, you must set the BaseUrl property of this object as well as the HTML itself. The BaseUrl tells the control where to look for files that have a relative address. This varies according to the target platform, so you use the Xamarin Forms Dependency Service to set it correctly for each platform.

In Visual Studio, you place the files you want to load in the appropriate folder for each platform. For Android, this is the Assets folder.

That is about all there is to it. As you can see from the above screenshot, I wrote very little code.

The WebView control can also display PDF documents. Finally, there is an EvaluateJavaScriptAsync method that lets you call JavaScript in a WebView and read the results from C#.

This JavaScript bridge is a workaround for the most obvious missing feature, that you cannot directly read the HTML content from the WebView. If this is a full programmatic solution and you generate all the HTML yourself, you can add JavaScript to do what you want. If the user is allowed to navigate anywhere on the web, you cannot easily grab the HTML; but this could be a good thing, in case the user entered a password or is viewing confidential data. You can grab the destination URL from the Navigating event and read it separately if necessary. But the intent of the control is to let you create rich applications that take advantage of the browser’s ability to render content, not to invade a user’s privacy by tracking their web browsing.