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

차준혁 40 Reputation points
2024-02-15T00:32:00.64+00:00

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.
User's image

User's image

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.

Windows App SDK
Windows App SDK
A set of Microsoft open-source libraries, frameworks, components, and tools to be used in apps to access Windows platform functionality on many versions of Windows. Previously known as Project Reunion.
745 questions
Accepted answer
  1. Roy Li - MSFT 32,721 Reputation points Microsoft Vendor
    2024-02-15T02:58:32.23+00:00

    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.

    1 person found this answer helpful.
    0 comments

0 additional answers

Sort by: Most helpful
Most helpful Newest Oldest