· 文件 App.xaml.cs 定义一个 Application 表示应用实例的类。

· 文件MainWindow.xaml.cs定义一个MainWindow类，该类表示应用实例显示的main窗口。 类派生自 WinUI 命名空间中的 Microsoft.UI.Xaml 类型。

7. 在) 窗口顶部中间的“ 解决方案配置” 下拉列表 (，选择“ 调试”。

8. 在 “解决方案平台” 下拉列表中，选择一个平台，例如 x64。

9. 选择“ 全部>文件保存 ” (Ctrl Shift S) 保存项目。

10. 按 F5 生成并运行项目。 此时会打开空白 WinUI 桌面应用，但尚未添加 WebView2 控件：

11. 关闭应用。

更新目标版本号

对于上述生成步骤：如果要更新以前的项目，可能需要更新 目标版本 和 最低版本的版本号。 为此，请在“解决方案”中右键单击项目，然后选择“ 编辑项目文件”。 文件 .csproj 随即打开。 确保值已按如下所示更新，然后保存所有更改并生成项目。

<TargetFramework>net6.0-windows10.0.19041.0</TargetFramework> <TargetPlatformMinVersion>10.0.17763.0</TargetPlatformMinVersion>

上述值表示：

· 目标版本：Windows 10版本 2004 (内部版本 19041) 或更高版本。

· 最低版本：Windows 10 版本 1809 (内部版本 17763) 。

步骤 4 - 添加 WebView2 控件

本教程项目基于项目模板 空白应用、打包 (桌面) WinUI 。 此项目模板使用 WindowsAppSDK，其中包括 WebView2 SDK。

MainWindow.xaml编辑 和 MainWindow.xaml.cs 文件以将 WebView2 控件添加到空白的 WinUI 3 应用项目，如下所示：

1. 在 Visual Studio 解决方案资源管理器 中，双击MainWindow.xaml以在代码编辑器中将其打开。

2. 通过在开始标记中 <Window> 插入以下属性来添加 WebView2 XAML 命名空间：

XMLns:controls="using:Microsoft.UI.Xaml.Controls"

请确保 中的 MainWindow.xaml 代码类似于以下内容：

<Window x:Class="MyWebView2WinUI3.MainWindow" xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" xmlns:local="using:MyWebView2WinUI3" xmlns:d="http://schemas.microsoft.com/expression/blend/2008" xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" mc:Ignorable="d" xmlns:controls="using:Microsoft.UI.Xaml.Controls"> <StackPanel Orientation="Horizontal" HorizontalAlignment="Center" VerticalAlignment="Center"> <Button x:Name="myButton" Click="myButton_Click">Click Me</Button> </StackPanel> </Window>

3. 若要添加 WebView2 控件，请将整个 <StackPanel> 元素替换为以下 <Grid> 代码。 底部 Source 附近的 属性设置 WebView2 控件中显示的初始 URI， () HTTPS://www.microsoft.com ：

<Grid> <Grid.RowDefinitions> <RowDefinition Height="Auto"/> <RowDefinition Height="*"/> </Grid.RowDefinitions> <Grid.ColumnDefinitions> <ColumnDefinition Width="*"/> <ColumnDefinition Width="Auto"/> </Grid.ColumnDefinitions> <controls:WebView2 x:Name="MyWebView" Grid.Row="1" Grid.ColumnSpan="2" Source="https://www.microsoft.com" HorizontalAlignment="Stretch" VerticalAlignment="Stretch"/> </Grid>

4. 在 解决方案资源管理器中，展开MainWindow.xaml，然后打开 MainWindow.xaml.cs。

5. 在 MainWindow.xaml.cs中，注释掉以下行，如下所示：

C#代码 // myButton.Content = "Clicked";

6. 选择“ 全部>文件保存 ” (Ctrl Shift S) 保存项目。

7. 按 F5 生成并运行项目。

8. 应用是包含 WebView2 控件的 WebView2 主机应用。 WebView2 控件显示网站 https://www.microsoft.com：

9. 关闭应用。

步骤 5 - 添加导航控件

若要允许用户控制 WebView2 控件中显示的网页，请向应用添加地址栏，如下所示：

1. 在 中 MainWindow.xaml，将以下代码粘贴到 <Grid> 包含 元素的 元素中 <controls:WebView2> ：

<TextBox Name="addressBar" Grid.Column="0"/> <Button x:Name="myButton" Grid.Column="1" Click="myButton_Click">Go</Button> 确保文件中生成的 <Grid> 元素 MainWindow.xaml 与以下内容匹配： XML复制 <Grid> <Grid.RowDefinitions> <RowDefinition Height="Auto"/> <RowDefinition Height="*"/> </Grid.RowDefinitions> <Grid.ColumnDefinitions> <ColumnDefinition Width="*"/> <ColumnDefinition Width="Auto"/> </Grid.ColumnDefinitions> <TextBox Name="addressBar" Grid.Column="0"/> <Button x:Name="myButton" Grid.Column="1" Click="myButton_Click">Go</Button> <controls:WebView2 x:Name="MyWebView" Grid.Row="1" Grid.ColumnSpan="2" Source="https://www.microsoft.com" HorizontalAlignment="Stretch" VerticalAlignment="Stretch"/> </Grid>

2. 在 中 MainWindow.xaml.cs，将以下代码粘贴到 myButton_Click中，覆盖现有 myButton_Click 方法 () 几乎为空。 此代码将 WebView2 控件导航到在地址栏中输入的 URL。

private void myButton_Click(object sender, RoutedEventArgs e) { try { Uri targetUri = new Uri(addressBar.Text); MyWebView.Source = targetUri; } catch (FormatException ex) { // Incorrect address entered. } }

3. 选择“ 全部>文件保存 ” (Ctrl Shift S) 保存项目。

4. 按 F5 生成并运行项目。

5. 在地址栏中输入新的完整 URL，例如 https://www.bing.com，然后单击“ 转到 ”按钮。

应用中的 WebView2 控件显示必应网站。 地址栏显示 URL，例如 https://www.bing.com：

6. 在地址栏中输入不完整的 URL，例如 bing.com，然后单击“ 转到 ”按钮。

将 ArgumentException 引发异常，并在关闭应用后显示，因为 URL 不以 http:// 或 https://开头。

7. 关闭应用。 可能会出现以下 Visual Studio 对话框：