How can I view HTML files in local on winUI as webView 2?

Question

Hello, I have a simple problem.
I want to work on the screen using the html file within the project using webView 2 in the win UI 3 project.

The path of the local HTML file is shown in the following image....

In order to use webView 2, I wrote the path of the corresponding HTML like the code below.
Source="ms-appx-web://Assets/html/MyHtml.html"

---

<?xml version="1.0" encoding="utf-8"?>
<Window 
	x:Class="WebViewTest.MainWindow" 			
	xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" 
	xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" 
	xmlns:local="using:WebViewTest" 
	xmlns:d="http://schemas.microsoft.com/expression/blend/2008" 
	xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" 
	xmlns:controls="using:Microsoft.UI.Xaml.Controls" 
	mc:Ignorable="d">

 	<Grid>
 		<Grid.RowDefinitions>
			<RowDefinition Height="Auto" />
			<RowDefinition Height="" />
		</Grid.RowDefinitions>
		<Grid.ColumnDefinitions>
			<ColumnDefinition Width="" />
			<ColumnDefinition Width="Auto" />
		</Grid.ColumnDefinitions>

		<controls:WebView2 x:Name="webView" Grid.Row="1" Grid.ColumnSpan="2"
						Source="ms-appx-web:///Assets/MyHtml.html" 				
						HorizontalAlignment="Stretch" VerticalAlignment="Stretch"/> 
	</Grid> 	
</Window>

I used ms-appx-web to path the local file, but the problem is that when I run the code, nothing comes out of the html file and the screen keeps coming out white.
Is there something I'm missing?
For example, I don't have a code that adds the manifest part separately. Would that be a problem?

Does anyone else have a similar situation to mine?
I would appreciate it in advance if you could tell me how to solve this problem.

Answer 1

Hello,

Welcome to Microsoft Q&A!

How can I view HTML files in local on winUI as webView 2?

Using ms-appx-web directly to load local content in WebView2 is not supported. If you need to load local HTML content, please do it in code-behind.

You could try to use the following code:

  var storageFile = await Windows.Storage.StorageFile.GetFileFromApplicationUriAsync(new Uri("ms-appx:///Assets/html/TestWeb.html"));
  MyWebView.Source = new Uri(storageFile.Path);

Another way is to use SetVirtualHostNameToFolderMapping

 await MyWebView.EnsureCoreWebView2Async(); // ensure the CoreWebView2 is created
 var core_wv2 = MyWebView.CoreWebView2;
 if (core_wv2 != null)
 {
     core_wv2.SetVirtualHostNameToFolderMapping(
         "appassets.example", "assets/html",
         Microsoft.Web.WebView2.Core.CoreWebView2HostResourceAccessKind.Allow);

     MyWebView.Source = new Uri(@"https://appassets.example/TestWeb.html");
 }

You could also check this Github Hub issue for more details: https://github.com/microsoft/microsoft-ui-xaml/issues/1967

Thank you.

---

If the answer is the right solution, please click "Accept Answer" and kindly upvote it. If you have extra questions about this answer, please click "Comment". Note: Please follow the steps in our documentation to enable e-mail notifications if you want to receive the related email notification for this thread.