Windows Store Apps: How to load local html file in WebView control, beginners tutorials (C#-XAML)

Introduction:

Some times we may need to load local html file in webview, and fortunately we can easily load html file in window phone (in both silverlight & winrt). However this article will explain how to load local html file in WinRT WebView control using different ways :)

Requirements:

This sample is targeted for windows phone WinRT 8.1 OS,So make sure you’ve downloaded and installed the Windows Phone 8.1 SDK. For more information, see Get the SDK.
I assumes that you’re going to test your app on the Windows Phone emulator. If you want to test your app on a phone, you have to take some additional steps. For more info, see Register your Windows Phone device for development.
This post assumes you’re using Microsoft Visual Studio Express 2013 for Windows or Later.

Description:

Previously in silverlight platfrom(WP8.0/WP8.1), we are using below code to load html content in WebBrowser control with different ways.

Silverlight WindowsPhone:

//Load local html file using 'Source' property
WebBrowserName.Source = new Uri("LocalHTMLPage.html", UriKind.Relative);
//Load local html file using 'Navigate' method
WebBrowserName.Navigate(new Uri("LocalHTMLPage.html", UriKind.Relative));
//Load html string using 'NavigateToString' method
WebBrowserName.NavigateToString("<Html><Body><h1>Load local html string in windows phone silverlight app.<h1><Body></Html>");

WinRT WindowsPhone:
Now lets start to write code for load html content in WebView control with different ways.

1. Open Microsoft Visual Studio Express 2013 for Windows (or) later.

2. Create new windows phone winrt project using the "Blank App" template available under Visual C# -> Store Apps -> Windows Phone Apps. (for example project name :WindwsCsharpvsJavascript)

3. And lets add below code in MainPage.xaml, which is having one WebView control is for displaying html conent , and one Button is for loading html on Click event.

<Grid Background="LightBlue">
<Grid x:Name="LayoutRoot" Margin="5">
<Grid.RowDefinitions>
<RowDefinition Height="Auto"/>
<RowDefinition Height="Auto"/>
</Grid.RowDefinitions>
<WebView Name="WebBrowserName" Grid.Row="0" Height="272" Margin="5" />
<Button Name="BtnLoadHtml" Foreground="Black" Grid.Row="1" HorizontalAlignment="Stretch" Content="Load local html file" Click="BtnLoadHtml_Click" />
</Grid>
</Grid>

4. In general, in WinRT we have following ways to load html content in WebView control

private void BtnLoadHtml_Click(object sender, RoutedEventArgs e)
{
//Load local file using 'Source' property
WebBrowserName.Source = new Uri("ms-appx-web:///HTMLPage.html");
//Load local file using 'Navigate' method
WebBrowserName.Navigate(new Uri("ms-appx-web:///HTMLPage.html"));
//Load html string using 'NavigateToString' method
WebBrowserName.NavigateToString("<Html><Body><h1>Load local html string in windows phone winrt app.<h1><Body></Html>");
}

Note: in WinRT WebView can load content from the application’s package using ms-appx-web://, from the network using http/https, or from a string using NavigateToString. It cannot load content from the application’s data storage. To access the intranet, the corresponding capability must be turned on in the application manifest.

5. And also we have another way to load local html file in WinRT WebView control is using NavigateToLocalStreamUri we can load local web content of application. This method can be used in both windows store(8.1) and windows phone 8.1 [Windows Runtime apps only].

5.1 How to load local html file in WebView control using NavigateToLocalStreamUri:

5.1.1 Why NavigateToLocalStreamUri method?

We can also use NavigateToString to navigate to static HTML content, but does not provide a way to generate these resources programmatically.(Ex: we can't load local html files with NavigateToString method). So we can handle it from NavigateToLocalStreamUri method.

Okay lets follow below steps to use NavigateToLocalStreamUri

Step 1:

Right click on project , create Html page and add your html content in it.
Example html content:

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<script type="text/javascript">
function LoadSearch(searchString) {
window.location = "http://www.bing.com/search?q=" + searchString
window.external.notify("Search completed")
}
</script>
</head>
<body>
<h1 style="color:red;">Load local html file in windows phone winrt app.</h1>
</body>
</html>

and project reference folder should be like below:

Step 2:

Right click on project and create helper class name is 'StreamUriWinRTResolver' and it should implement 'IUriToStreamResolver' interface that translates a URI pattern into a content stream.

public sealed class StreamUriWinRTResolver : IUriToStreamResolver
{
public IAsyncOperation<IInputStream> UriToStreamAsync(Uri uri)
{
if (uri == null)
{
throw new Exception();
}
string path = uri.AbsolutePath;
// Because of the signature of the this method, it can't use await, so we
// call into a seperate helper method that can use the C# await pattern.
return GetContent(path).AsAsyncOperation();
}
private async Task<IInputStream> GetContent(string path)
{
// We use a package folder as the source, but the same principle should apply
// when supplying content from other locations
try
{
Uri localUri = new Uri("ms-appx://" + path);
StorageFile f = await StorageFile.GetFileFromApplicationUriAsync(localUri);
IRandomAccessStream stream = await f.OpenAsync(FileAccessMode.Read);
return stream;
}
catch (Exception) { throw new Exception("Invalid path"); }
}
}

Step 3:

On Button click event, use above helper class like below:

private void BtnLoadHtml_Click(object sender, RoutedEventArgs e)
{
//Load local file using 'NavigateToLocalStreamUri' method
Uri url = WebBrowserName.BuildLocalStreamUri("MyTag", "HTMLPage.html");
StreamUriWinRTResolver myResolver = new StreamUriWinRTResolver();
// Pass the resolver object to the navigate call.
WebBrowserName.NavigateToLocalStreamUri(url, myResolver);
}

6. Output:

Important Notes:

1. In this article, we learn about new method called 'NavigateToLocalStreamUri' and your helper class should implement a interface called 'IUriToStreamResolver'.

2. Local html file path should be prefix with 'ms-appx-web://' (Ex:ms-appx-web://LoclalHtmlPage.html)

3. WebView control in windows phone WinRT is used for displaying html content, and in silverlight windows phone we called it as 'WebBrowser' control.

4. This sample will be work on all above windows phone 8.0 OS devices. and this sample was tested in Nokia Lumia 735 device & Microsoft 535.

FeedBack Note:

Please share your thoughts,what you think about this post,Is this post really helpful for you?I always welcome if you drop comments on this post and it would be impressive.

Follow me always at @Subramanyam_B

Have a nice day by Subramanyam Raju :)