· 文件 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 对话框：
