背景

我们有些工具在 Web 版中已经有了很好的实践，而在 WPF 中重新开发也是一种费时费力的操作，那么直接集成则是最省事省力的方法了。

思路解释

1. 为什么要使用 WPF？莫问为什么，老 C# 开发的坚持，另外因为 Windows 上已经装了 Webview2/edge 整体打包比 electron 小很多，release 后的体积主要是 ASP.NET Core 的文件。
2. 为什么要使用 ASP.NET Core 进行代理呢？很简单，因为很多操作要求使用 HTTP Context，在类似 file:/// 的链接下是不能使用的，如果做成联网的有些资源进行跨域请求也是不能的。举个很简单的例子，vite 打包后的 SPA 如果直接点开那么里面打包的 ES Module 的文件全部不允许请求。
3. 那你这个项目不联网能用吗？看你的需求了，不联网当然能用，这里集成的 SPA 不一定全部都得是完整的 SPA，整套集成如果客户在有网的环境下可以直接引用网页的 URL 就好了。比如我们要用 monaco-editor 或者其他的文字编辑器又或者是 3D 编辑器，在 C# 上找不到或不好找到类似的库，那么集成 npm 上现成的库就是最佳选择。

修改项目文件

我们首先修改项目文件，让 WPF 项目可以包含 ASP.NET Core 的库，以及引用 WebView2 控件。

<Project Sdk="Microsoft.NET.Sdk">    <PropertyGroup> 	<OutputType>WinExe</OutputType> 	<TargetFramework>net8.0-windows</TargetFramework> 	<Nullable>enable</Nullable> 	<ImplicitUsings>enable</ImplicitUsings> 	<UseWPF>true</UseWPF>   </PropertyGroup>    <ItemGroup>     <!-- 这里插入 WebView2 的包，用于显示网页 --> 	<PackageReference Include="Microsoft.Web.WebView2" Version="1.0.2478.35" />     <!-- 这里插入 ASP.NET Core 的框架引用，用于代理资源文件 --> 	<FrameworkReference Include="Microsoft.AspNetCore.App" />   </ItemGroup>    <ItemGroup>     <!-- 这里模仿 ASP.NET Core，将 SPA 资源文件存于 wwwroot 文件夹下 --> 	<None Update="wwwroot**"> 	  <CopyToOutputDirectory>Always</CopyToOutputDirectory> 	</None>   </ItemGroup>  </Project> 

修改 App.xaml 和 App.xaml.cs 以使用 ASP.NET Core 的 WebApplication.CreateBuilder()

这里为了全局使用依赖注入，我们将 WebApplication.CreateBuilder() 放在 App.xaml.cs 中全局使用。为了使用依赖注入应注释掉默认启动窗口，并接管 Startup 事件。

<Application x:Class="WpfAircraftViewer.App"              xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"              xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"              xmlns:local="clr-namespace:WpfAircraftViewer"              Startup="ApplicationStartup">     <!-- 这里将 StartupUri 属性删除，然后注册 Startup 事件 -->     <Application.Resources>               </Application.Resources> </Application> 

然后通过修改 Startup 事件的代码来实现相应的加载动作。

using Microsoft.AspNetCore.Builder; using Microsoft.AspNetCore.StaticFiles; using Microsoft.Extensions.DependencyInjection; using System.Windows;  namespace WpfAircraftViewer {     /// <summary>     /// Interaction logic for App.xaml     /// </summary>     public partial class App : Application, IAsyncDisposable     {         public WebApplication? WebApplication { get; private set; }          public async ValueTask DisposeAsync()         {             if (WebApplication is not null)             {                 await WebApplication.DisposeAsync();             }             GC.SuppressFinalize(this);         }                  private async void ApplicationStartup(object sender, StartupEventArgs e)         {             // 这里是创建 ASP.NET 版通用主机的代码             var builder = WebApplication.CreateBuilder(Environment.GetCommandLineArgs());             // 注册主窗口和其他服务             builder.Services.AddSingleton<MainWindow>();             builder.Services.AddSingleton(this);             var app = builder.Build();             // 这里是文件类型映射，如果你的静态文件在浏览器中加载报 404，那么需要在这里注册，这里我加载一个 3D 场景文件的类型             var contentTypeProvider = new FileExtensionContentTypeProvider();             contentTypeProvider.Mappings[".glb"] = "model/gltf-binary";             app.UseStaticFiles(new StaticFileOptions             {                 ContentTypeProvider = contentTypeProvider,             });             // 你如果使用了 Vue Router 或者其他前端路由了，需要在这里添加这句话让路由返回前端，而不是 ASP.NET Core 处理             app.MapFallbackToFile("/index.html");             WebApplication = app;             // 处理退出事件，退出 App 时关闭 ASP.NET Core             Exit += async (s, e) => await WebApplication.StopAsync();             // 显示主窗口             MainWindow = app.Services.GetRequiredService<MainWindow>();             MainWindow.Show();             await app.RunAsync().ConfigureAwait(false);         }     } } 

此时，我们已经可以正常开启一个默认界面的 MainWindow 了。

使用 WebView2 控件

这时我们就可以先将 SPA 文件从 npm 项目的 dist 复制到 wwwroot 了，在编辑 MainWindow 加入 WebView2 控件后就可以查看了。

<Window x:Class="WpfAircraftViewer.MainWindow"         xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"         xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"         xmlns:d="http://schemas.microsoft.com/expression/blend/2008"         xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"         xmlns:local="clr-namespace:WpfAircraftViewer"         xmlns:wv2="clr-namespace:Microsoft.Web.WebView2.Wpf;assembly=Microsoft.Web.WebView2.Wpf"         mc:Ignorable="d" MinHeight="450" MinWidth="800" SnapsToDevicePixels="True">         <!-- 在上面加入 xmlns:wv2 属性用于引用 WebView2 控件 -->     <Grid>         <!-- 这里插入 WebView2 控件，我们默认可以让 Source 是 http://localhost:5000，这是 ASP.NET Core 的默认监听地址 -->         <wv2:WebView2 Name="webView"                   Source="{Binding SourceUrl, FallbackValue='http://localhost:5000'}" AllowDrop="True" SnapsToDevicePixels="True"/>     </Grid> </Window> 

我们可以继续编辑窗口的信息，让他可以关联 ASP.NET Core 的监听地址。

using Microsoft.AspNetCore.Hosting.Server; using Microsoft.AspNetCore.Hosting.Server.Features; using System.Windows;  namespace WpfAircraftViewer {     /// <summary>     /// Interaction logic for MainWindow.xaml     /// </summary>     public partial class MainWindow : Window     {         public string SourceUrl { get; set; }         public MainWindow(IServer server)         {             InitializeComponent();             // 这里通过注入的 IServer 对象来获取监听的 Url             var addresses = server.Features.Get<IServerAddressesFeature>()?.Addresses;             SourceUrl = addresses is not null ? (addresses.FirstOrDefault() ?? "http://localhost:5000") : "http://localhost:5000";             // 无 VM，用自身当 VM             DataContext = this;         }     } } 

这时我们就可以看到窗口打开了我们的 SPA 页面了。

示例代码

• SofiaXu/WpfWebView2SpaLoader