Display local html file content in UWP WebView
I believe this is pretty straightforward task and I've seen a lot of examples in the web but still none of them is working for me since I experience different exceptions.
html:
<html lang="en">
<head>
<meta charset="utf-8" />
<title></title>
</head>
<body>
<p>
Help html content.
</p>
</body>
</html>
xaml:
<Grid>
<Grid.RowDefinitions>
<RowDefinition/>
<RowDefinition Height="30"/>
</Grid.RowDefinitions>
<WebView x:Name="webView" />
<Button x:Name="buttonRefresh"
Grid.Row="1"
HorizontalAlignment="Center"
Click="buttonRefresh_Click">
Refresh
</Button>
</Grid>
To display static html saved in help.html file in my UWP application LocalFolder I've already tried the following:
- Use Navigate method:
private void buttonRefresh_Click(object sender, RoutedEventArgs e)
{
var uri = new Uri("ms-appdata:///local/help.html");
webView.Navigate(uri);
}
and the result is the following exception:
System.ArgumentException: Value does not fall within the expected range.
at Windows.UI.Xaml.Controls.WebView.Navigate(Uri source)
at SimpleUwpApp.Proxy.SimplerPage.buttonRefresh_Click(Object sender, RoutedEventArgs e)
- Try to set Source property of webView explicitly in code behind:
private void buttonRefresh_Click(object sender, RoutedEventArgs e)
{
var uri = new Uri("ms-appdata:///local/help.html");
webView.Source = uri;
}
result:
System.ArgumentException: Value does not fall within the expected range.
at Windows.UI.Xaml.Controls.WebView.put_Source(Uri value)
at SimpleUwpApp.Proxy.SimplerPage.buttonRefresh_Click(Object sender, RoutedEventArgs e)
- Set Source property of webView explicitly in xaml: This is the exact example from microsoft documentation.
<WebView x:Name="webView" Source="ms-appdata:///local/help.html" />
As a result exception on startup:
Windows.UI.Xaml.Markup.XamlParseException: The text associated with this error code could not be found.
Failed to assign to property 'Windows.UI.Xaml.Controls.WebView.Source' because the type 'Windows.Foundation.String' cannot be assigned to the type 'Windows.Foundation.Uri'. [Line: 16 Position: 54]
at Windows.UI.Xaml.Application.LoadComponent(Object component, Uri resourceLocator, ComponentResourceLocation componentResourceLocation)
at SimpleUwpApp.Proxy.SimplerPage.InitializeComponent()
- Tried using url string directly in Navigate() arguments as in this microsoft examples but Navigate() accepts only Uri as an aargument so the documentation is either invalid, either for older version of xaml toolkit.
webView.Navigate("ms-appx-web:///help.html");
result:
Syntax error.
The only solution I've temporary came up with is reading the content of html file with some kind of file manager and using NavigateToString() method:
var content = fileManager.Read("help.html"); // Manually read the content of html file
webView.NavigateToString(content);
So the question is why described examples don't work? How to avoid using NavigateToString?
Answer
So i got two different things, which worked for me:
The XAML-version:
<WebView x:Name="webView" Source="ms-appx-web:///help.html"/>
Here you need to use the ms-appx-web prefix.
The code-behind version:
webView.Navigate(new Uri("ms-appx-web:///help.html"));
The difference to your version is, that you are not allowed to enter the string only. You need to create a new Object of the Uri-Class.
In both versions, the html-file is a direct child of the project and the project is a Windows-10-UWP Application [You didnt say, if you use Windows 8 or Windows 10]