百度360必应搜狗淘宝本站头条
当前位置:网站首页 > 技术文章 > 正文

桌面程序嵌套Web项目实践之WPF和Blazor混合应用开发

myzbx 2025-03-20 16:54 23 浏览

前言

WPF作为Windows平台上强大且成熟的桌面应用程序开发技术,拥有丰富的UI控件库、强大的数据绑定机制和丰富的图形渲染能力,与此同时,Blazor作为一种基于Web的新兴技术,无需学习JavaScript。Blazor借助WebAssembly技术,使Web项目代码能够在桌面程序中运行。因此,将WPF和Blazor结合起来开发混合应用,成为了一种可以落地实践的做法。因为可以充分发挥两者的优势,弥补彼此的不足。通过这种方式,可以利用WPF强大的桌面开发能力,同时又能够借助Blazor实现跨平台部署,使应用程序能够同时运行在Windows平台和Web浏览器中,从而实现一份代码,多端运行的目标。

下面我们来实践下混合开发的带来的奇妙体验,跟着步骤,一起来:

一、创建 WPF 应用

在 Visual Studio 中创建一个新的WPF项目,命名为WpfBlazorApp。

二、修改项目文件

对其项目 (.csproj) 文件进行一些修改。在“解决方案资源管理器”中,右键单击项目名称“WpfBlazorApp”,然后选择“编辑项目文件”以访问项目文件 (WpfBlazorApp.csproj),项目文件最初的样子。

我们需要先在这里做一些改变。

  1. 元素: 这指定了项目使用的 SDK。此 SDK 提供用于构建项目的工具、编译器和其他必要组件。我们需要将其从更改为。通过此更改,该项目将利用 Razor 语法和功能来创建动态 Web 内容。
  2. 中的这是项目的根命名空间。现在,我们需要将其设置为 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混合应用开发非常熟悉或者有其他的方式开发混合应用,欢迎留言交流。

如果你喜欢我的文章,谢谢三连,点赞,关注,转发吧!!

#春曰生活打卡季# #编程经验# #记录我的2024# #自律学习计划#

相关推荐

任天堂Switch OLED:一块沉浸屏,点燃全家欢乐的游戏时光

在一个寻常的周末午后,客厅里弥漫着轻松惬意的氛围。电视屏幕暂时休眠,全家人的目光却聚焦在那台轻巧的掌上设备——任天堂SwitchOLED。父母与孩子挤在沙发上,指尖在Joy-Con手柄上跃动,时而因...

Switch是什么地区的版本?怎么分辨Switch普通版和续航版、OLED版

Switch有国行、港版、日版、美版、欧版、韩版,版本之间又有普通版和续航版的OLED区别。只要看掌机的序列号第二三位,第二位代表的机型,A是普通版,K是续航版,T是OLED版。第三位代表的是区域,比...

这款Switch手柄真别致!开箱体验八位堂Lite蓝牙手柄

【引言】Hi大家好,我是歌布林,今天给大家带来一款八位堂Lite蓝牙手柄的开箱报告!相信已经有不少Switch玩家已经入手了这款产品,讲真,这款手柄的颜值真的吸引到我了~双十一旗舰各大快递公...

switch 的性能提升了 3 倍,我只用了这一招

上一篇《if快还是switch快?解密switch背后的秘密》我们测试了if和switch的性能,得出了要尽量使用switch的结论,因为他的效率比if高很多,具体原因点击上文查看。既...

在对《Nintendo Switch 运动》充满期待的同时,我也有些许不安

任天堂「运动」系列的最新作《NintendoSwitch运动》即将于4月29日正式发售。在等待本作发售的日子里,笔者每一天都在掰着指头计算发售日还有几天才到来。在《NintendoSwi...

switch上最值得玩的五款JRPG(switch最值得玩的大作)

不知道为什么即使现在节奏变得这么快,人也变得浮躁,我依旧喜欢玩JPRG,喜欢沉浸入游戏的角色之中体验一场独特的冒险。JRPG的灵魂是什么?那绝对不是回合制战斗或者古旧的系统,而是令人深刻的剧情及在这漫...

那个 Vue 的路由,路由是干什么用的?

在Vue里,路由就像“页面导航的指挥官”,专门负责管理页面(组件)的切换和显示逻辑。简单来说,它能让单页应用(SPA)像多页应用一样实现“不同URL对应不同页面”的效果,但整个过程不会刷新网页。一、路...

S235JRH材50x50x3-5mm欧标方管疲劳强度分析

在工程与建筑领域,方管作为一种重要的结构材料,广泛应用于各种框架和支撑结构中。S235JRH材质的50x50x3-5mm欧标方管在疲劳强度方面的表现尤其受到关注。本文将以“解答常见误区”的形式,分析该...

纤维丛上的联络与曲率关系之二:七个联络

参阅一文看懂纤维丛(看图说话)纤维丛上的联络与曲率关系之一1.仿射联络(AffineConnection)定义:在光滑流形M的切丛TM上,一个仿射联络是一个双线性映射:仿射联络定义了向量...

安全完整性等级(SIL)分析报告编制与认证实践方法

以下是一篇关于安全完整性等级(SIL)分析报告的文章,涵盖SIL定级方法、验证流程、计算模型及工程实践。安全完整性等级(SIL)是量化安全仪表系统(SIS)性能的核心指标,由IEC61508/615...

欧标方管75x75x3mm8mm S355J0H力学性能测试

欧标方管75x75x3mmS355J0H是一种常见的钢管材料,广泛应用于建筑、机械制造和结构工程等领域。下面将对其力学性能进行详细测试和分析。1.材料概述S355J0H是欧洲标准EN10210中规定的...

p光与s光在SHG中的相位匹配中有哪些不同?

【第六期】p光与s光在SHG中的相位匹配中有哪些不同?在二次谐波生成(SHG)中,p偏振光和s偏振光的相位匹配条件存在显著差异。这些差异主要源于它们与纳米结构相互作用的方式以及它们在激发表面等离子体共...

S355JRH欧标方管机械性能及工程应用解析

S355JRH欧标方管是一种高强度钢管,以其优良的机械性能和良好的加工性在工程领域得到广泛应用。本文将从机械性能、场景应用等方面对S355JRH欧标方管进行解析,以帮助读者更好地理解其特性及应用。1....

《三国志·战棋版》PK7黄天蔽汉,四队共存作业来啦!

哈喽大家好啊,今天要给大家分享的是三棋PK7黄天蔽汉平时四队共存队,这只是其中一种选择供大家参考,后面可能还会分享其他的四队共存方案。队伍共存绝不唯一,大家有什么好的共存方案或者想看哪些队伍的共存也欢...

迈阿密三大巨星首秀被0-0逼平,豪阵为何难赢开罗国民

谁能想到,汇聚梅西、苏亚雷斯、布斯克茨这“银河战舰”级别三巨头,迈阿密国际世俱杯首秀居然0-0被埃及劲旅开罗国民逼平?全场90分钟,球迷的心情从“期待冠军”一路跌到“差点开门黑”。补时第96分钟,梅西...