Load local html file in WebView Metro Style app

Asked 21/5, 2012 at 11:52 Answered 25/4, 2016 at 23:27

I'm having a bit of trouble loading an html file in a WebView control in a metro style app. I've been searching the internet and found out that you can't load a local html file with the NavigateTo method. I also found out that there is a workaround in which you can use the NavigateToString method of the control. Below is the link where i saw this: http://social.msdn.microsoft.com/Forums/en-US/winappswithcsharp/thread/9cd8614d-2dc8-48ac-9cd9-57b03a644930

Someone in a post on that topic gave an example on how this could be done. They used and a byte array in which they put the data they obtained from calling the IInputstream.ReadAsync method. The problem I've ran into is that after i call that method the byte array is full of 0's, which i don't think is ok. Can anyone help me with this?

Overpower answered 21/5, 2012 at 11:52 Comment(0)

You can switch contexts by using the ms-appx-web:/// protocol instead of ms-appx:///, which I've had successfully loading local Html files and associated CSS and JavaScript, within a HTML/JS Metro Style App.

I've not tried this in a XAML Metro Style App, but believe that the ms-appx-web:/// protocol can be used. The limitation is that your Html (if local i.e not web hosted) has to reside within a WinRT package, which it appears to in your case i.e. /Assets.

Islamism answered 28/6, 2012 at 8:59 Comment(3)

I gave your answer a try and it worked like a charm :D. Thanks for the help. – Overpower 24/7, 2012 at 8:48

What if the html file is "outside" the WinRT Package? Let say within the "Windows.Storage.ApplicationData.Current.LocalFolder" – Eidson 23/11, 2012 at 2:4

in Windows 8.1, When I try to copy my html file to the assets folder, I get an Acces Denied. – Walkling 5/6, 2015 at 9:26

I ran into the same problem. In my application I have a file called Default.html which is read and it's contents are displayed in a WebView control.

var html = await Windows.Storage.PathIO.ReadTextAsync("ms-appx:///Assets/Default.html");
MyWebView.NavigateToString(html);

Note that I'm using await and ReadTextAsync so that the code is asynchronous (as one should when doing IO), the function you place this snipped it must be defined as async, example:

private async void LoadWebView( file ) { ... }

Voyeurism answered 4/6, 2012 at 1:10 Comment(2)

thanks for the reply. Indeed your suggestion worked, but i was wandering, is there a way to load the js and css files called in the html page header? – Overpower 5/6, 2012 at 12:30

Locally? no :/ Unfortunately at this time the WebView control does not understand the ms-appx protocol which is what is needed to do this. Threre's a thread over on MSDN about this. I've got the same problem and resorted to just including all css and JavaScript into the HTML file which is less than ideal. Hopefully this will be resolved soon! – Voyeurism 5/6, 2012 at 13:10

Here is a quick sample tell me if this help you:

I have an Html file in my Assets folder called MyHTMLPage, it has a build action of type content and a Copy to Output to Copy Always. My Html file:

<!DOCTYPE html>

<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="utf-8" />
    <title></title>
</head>
<body>
<div style="background-color: chartreuse">HELLO WORLD, from a webview</div>  
</body>
</html>

On my Main Page.xaml:

 <Grid Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">
        <WebView x:Name="MyWebView"  Width="200" Height="300"></WebView>
    </Grid>

On my Main Page.cs:

 public sealed partial class MainPage : Page
    {
        public MainPage()
        {
            this.InitializeComponent();
            Loaded += MainPage_Loaded;
        }

        private void MainPage_Loaded(object sender, RoutedEventArgs e)
        {
            string src = "ms-appx-web:///Assets/MyHTMLPage.html";
            this.MyWebView.Navigate(new Uri(src));
        }
    }

and Voila this should work.

Likelihood answered 25/4, 2016 at 23:27 Comment(0)

Recommended topics

Hot tags