下面我们来实践下混合开发的带来的奇妙体验，跟着步骤，一起来：
一、创建 WPF 应用在 Visual Studio 中创建一个新的WPF项目,命名为WpfBlazorApp。
二、修改项目文件
对其项目 （.csproj） 文件进行一些修改。在“解决方案资源管理器”中，右键单击项目名称“WpfBlazorApp”，然后选择“编辑项目文件”以访问项目文件 （WpfBlazorApp.csproj）,项目文件最初的样子。
我们需要先在这里做一些改变。
<Project Sdk> 元素： 这指定了项目使用的 SDK。此 SDK 提供用于构建项目的工具、编译器和其他必要组件。我们需要将其从<Project Sdk=“Microsoft.NET.Sdk”>更改为<Project Sdk=“Microsoft.NET.Sdk.Razor”>。通过此更改，该项目将利用 Razor 语法和功能来创建动态 Web 内容。<PropertyGroup>中的<RootNamespace>：这是项目的根命名空间。现在，我们需要将其设置为 WpfBlazorApp，项目中的所有代码文件都属于此命名空间。这有助于避免不同命名空间之间的命名冲突。
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的内容
<!DOCTYPE html><html lang="en"><head> <meta charset="utf-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>WpfBlazorApp</title> <base href="/" /></head><body> <div id="app">Loading...</div> <script src="_framework/blazor.webview.js"></script></body></html>五、添加新的 Razor 组件
创建一个 Razor 组件。将名为“QuickGridExample”的组件添加到项目的根目录。此组件演示一个快速网格。
可以使用 QuickGrid，需要从 NuGet 包安装“Microsoft.AspNetCore.Components.QuickGrid”组件。添加如下代码：
@using Microsoft.AspNetCore.Components.QuickGrid<h1> Displaying C# Programming Books </h1><h3>C# Programming Books</h3><QuickGrid Items="@cSharpBooks"> <PropertyColumn Title="Title" Property="@(b => b.Title)" Sortable="true" /> <PropertyColumn Title="Author" Property="@(b => b.Author)" Sortable="true" /> <PropertyColumn Title="Publication Year" Property="@(b => b.PublicationYear)" Format="yyyy" Sortable="true" /></QuickGrid>@code { record CSharpBook(string Title, string Author, DateTime PublicationYear); private IQueryable<CSharpBook> cSharpBooks = new List<CSharpBook> { 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 中的修改
<Window x:Class="WpfBlazorApp.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:WpfBlazorApp" xmlns:blazor="clr-namespace:Microsoft.AspNetCore.Components.WebView.Wpf;assembly=Microsoft.AspNetCore.Components.WebView.Wpf" mc:Ignorable="d" Title="MainWindow" Height="450" Width="800"> <Grid> <blazor:BlazorWebView HostPage="wwwroot\index.html" Services="{DynamicResource services}"> <blazor:BlazorWebView.RootComponents> <blazor:RootComponent Selector="#app" ComponentType="{x:Type local:QuickGridExample}" /> </blazor:BlazorWebView.RootComponents> </blazor:BlazorWebView> </Grid></Window>
MainWindow.xaml.cs文件中添加如下代码：
namespace WpfBlazorApp{ /// <summary> /// Interaction logic for MainWindow.xaml /// </summary> public partial class MainWindow : Window { public MainWindow() { InitializeComponent(); var serviceCollection = new ServiceCollection(); serviceCollection.AddWpfBlazorWebView(); Resources.Add("services", serviceCollection.BuildServiceProvider()); } }}运行
运行成功，Wpf加载的html页面
让我们进行一些外观更改以增强其 UI。向组件添加样式。
<style> table { border-collapse: collapse; width: 100%; border: 2px solid #ccc; } th, td { padding: 12px; text-align: left; border-bottom: 1px solid #ddd; } h1, h3 { font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; color: #333; text-align: center; } th { background-color: #28b463; color: white; font-weight: bold; font-size: 16px; border: none; } tr:nth-child(even) { background-color: #f2f2f2; } th:hover { background-color: #45a049; }</style>
再次运行项目
结论WPF 和 Blazor 的融合开发，代表了桌面程序嵌套Web项目开发越来越容易，在某些特定的场合，混合开发带了的优势非常明显。在本文中，我们探讨了从设置 WPF 项目到合并 Razor 组件以及将 Razor 组件与 WPF 绑定的集成过程。学习了如何在 WPF 应用程序中呈现 HTML 内容。借助 WPF 和 Blazor，可以在混合应用开发中开辟新的领域，这将塑造跨不同平台的用户体验的未来。
如果本文对你有帮助，我将非常荣幸。
如果你对WPF和Blazor混合应用开发非常熟悉或者有其他的方式开发混合应用，欢迎留言交流。
如果你喜欢我的文章，谢谢三连，点赞，关注，转发吧！
！
#春曰生活打卡季# #编程经验# #记录我的2024# #自律学习计划#
