Post
Ask Question

Load HTML File In Windows 10 Universal App

We need to load local HTML file sometimes in our apps. We can easily load HTML fils in Windows 10 app. Here I will explain how to load local html files in Windows 10 app using WebView control in different ways.

Let’s see the steps.

Create new Windows 10 app and go to your design page “MainPage.XAML”and add the webview control to load the HTML file.

  1. <WebView Name="mywebview"HorizontalAlignment="Left" Height="232" Margin="10,10,0,0"VerticalAlignment="Top" Width="340"/>  
Next create or add the html file you want to load in your project and here's the screenshot,

CODE

Then go to your code behind page and write the following code.
  1. public MainPage()   
  2. {  
  3.     this.InitializeComponent();  
  4.     mywebview.Source = newUri("ms-appx-web:///HTMLPage1.html");  
  5.   
  6. }  
WebView control loads the html content from the application’s package using ms-appx-web:// using network http/https. We can load the html in three ways using source proprieties, using navigate method and using navigatetostring.

Load the html content using source properties.
  1. mywebview.Source=newUri("ms-appx-web:///HTMLPage1.html");  
Load the html content using navigate,
  1. mywebview.Navigate(newUri("ms-appx-web:///HTMLPage1.html")); 
Load the html content using navigatetostring,
  1. mywebview.NavigateToString("<Html><Body><h1>Load html string.<h1><Body></Html>"); 
Now run the application and see the expected output like the following screen.

OUTPUT

For more information on Windows 10 UWP, referto my e-book:

 

Read more articles on Universal Windows Platform:


Similar Articles