前言
WPF作为Windows平台上强大且成熟的桌面应用程序开发技术，拥有丰富的UI控件库、强大的数据绑定机制和丰富的图形渲染能力，与此同时，Blazor作为一种基于Web的新兴技术，无需学习JavaScript。Blazor借助WebAssembly技术，使Web项目代码能够在桌面程序中运行。因此，将WPF和Blazor结合起来开发混合应用，成为了一种可以落地实践的做法。因为可以充分发挥两者的优势，弥补彼此的不足。通过这种方式，可以利用WPF强大的桌面开发能力，同时又能够借助Blazor实现跨平台部署，使应用程序能够同时运行在Windows平台和Web浏览器中，从而实现一份代码，多端运行的目标。
下面我们来实践下混合开发的带来的奇妙体验，跟着步骤，一起来：
一、创建 WPF 应用
在 Visual Studio 中创建一个新的WPF项目,命名为WpfBlazorApp。
二、修改项目文件
对其项目 （.csproj） 文件进行一些修改。在“解决方案资源管理器”中，右键单击项目名称“WpfBlazorApp”，然后选择“编辑项目文件”以访问项目文件 （WpfBlazorApp.csproj）,项目文件最初的样子。
我们需要先在这里做一些改变。
元素： 这指定了项目使用的 SDK。此 SDK 提供用于构建项目的工具、编译器和其他必要组件。我们需要将其从更改为 。通过此更改，该项目将利用 Razor 语法和功能来创建动态 Web 内容。 中的 这是项目的根命名空间。现在，我们需要将其设置为 WpfBlazorApp，项目中的所有代码文件都属于此命名空间。这有助于避免不同命名空间之间的命名冲突。：
三、添加Microsoft.AspNetCore.Components.WebView.Wpf组件包
Microsoft.AspNetCore.Components.WebView.Wpf 是一个 .NET 库，用于在 WPF应用程序中承载 Blazor WebAssembly 应用程序。这个库允许将基于 Web 的用户界面嵌入到 WPF 应用程序中，从而充分利用 Blazor WebAssembly 的功能和优势。
核心技术：Build WPF apps with Blazor and WebView2.
四、创建 wwwroot/Index.html 文件
每个 Web 应用程序都需要一个 wwwroot 文件夹。将一个添加到您的项目中，并将起始文件（将Index.HTML）放入其中。以下是该index的内容
WpfBlazorApp
<base href="/" />
Loading...
<script src="_framework/blazor.webview.js"></script>
五、添加新的 Razor 组件
创建一个 Razor 组件。将名为“QuickGridExample”的组件添加到项目的根目录。此组件演示一个快速网格。
可以使用 QuickGrid，需要从 NuGet 包安装“
Microsoft.AspNetCore.Components.QuickGrid”组件。添加如下代码：
@using Microsoft.AspNetCore.Components.QuickGrid
Displaying C# Programming Books
C# Programming Books
@code {
record CSharpBook(string Title, string Author, DateTime PublicationYear);
private IQueryable cSharpBooks = new List
{
new CSharpBook("C# in Depth", "Jon Skeet", new DateTime(2019, 1, 1)),
new CSharpBook("Effective C#: 50 Specific Ways to Improve Your C#", "Bill Wagner", new DateTime(2017, 1, 1)),
new CSharpBook("CLR via C#", "Jeffrey Richter", new DateTime(2012, 1, 1)),
new CSharpBook("Pro C# 7: With .NET and .NET Core", "Andrew Troelsen, Philip Japikse", new DateTime(2017, 1, 1)),
new CSharpBook("C# Programming Yellow Book", "Rob Miles", new DateTime(2014, 1, 1)),
new CSharpBook("Head First C#", "Andrew Stellman, Jennifer Greene", new DateTime(2013, 1, 1)),
new CSharpBook("Programming C# 8.0: Build Cloud, Web, and Desktop Applications", "Ian Griffiths", new DateTime(2019, 1, 1)),
new CSharpBook("C# 7.0 in a Nutshell: The Definitive Reference", "Joseph Albahari, Ben Albahari", new DateTime(2017, 1, 1)),
new CSharpBook("Essential C# 8.0", "Mark Michaelis", new DateTime(2019, 1, 1))
}.AsQueryable();
}
最终的文件夹结构如下所示。
六、从 XAML 窗口集成 Razor 组件
将 WPF 窗口与刚刚创建的 Blazor 组件进行映射。打开“MainWindow.xaml”文件并添加以下命名空间。
xmlns:blazor="clr-namespace:Microsoft.AspNetCore.Components.WebView.Wpf;assembly=Microsoft.AspNetCore.Components.WebView.Wpf"MainWindow.Xaml 中的修改
MainWindow.xaml.cs文件中添加如下代码：
namespace WpfBlazorApp
{
///
/// Interaction logic for MainWindow.xaml
///
public partial class MainWindow : Window
{
public MainWindow()
{
InitializeComponent();
var serviceCollection = new ServiceCollection();
serviceCollection.AddWpfBlazorWebView();
Resources.Add("services", serviceCollection.BuildServiceProvider());
}
}
}运行
运行成功，Wpf加载的html页面
让我们进行一些外观更改以增强其 UI。向组件添加样式。
再次运行项目
结论
WPF 和 Blazor 的融合开发，代表了桌面程序嵌套Web项目开发越来越容易，在某些特定的场合，混合开发带了的优势非常明显。在本文中，我们探讨了从设置 WPF 项目到合并 Razor 组件以及将 Razor 组件与 WPF 绑定的集成过程。学习了如何在 WPF 应用程序中呈现 HTML 内容。借助 WPF 和 Blazor，可以在混合应用开发中开辟新的领域，这将塑造跨不同平台的用户体验的未来。
如果本文对你有帮助，我将非常荣幸。
如果你对WPF和Blazor混合应用开发非常熟悉或者有其他的方式开发混合应用，欢迎留言交流。
如果你喜欢我的文章，谢谢三连，点赞，关注，转发吧！！