使用 WinUI 3 实现英雄联盟客户端:从 Uno Platform 的快速转换及仓库介绍
控件名称:leagueoflegends-uno/wpf/winui3
作者:Vicky&James
leagueoflegends-wpf[1]:https://github.com/jamesnetgroup/leagueoflegends-wpf
leagueoflegends-uno[2]:https://github.com/jamesnetgroup/leagueoflegends-uno
leagueoflegends-winui3[3]:https://github.com/jamesnetgroup/leagueoflegends-winui3
引言
上一片文章中,我们详细介绍了<基于XAML框架和跨平台项目架构设计的深入技术分析>
。在这篇文章中,我们将介绍如何将基于WPF和Uno Platform
开发的<英雄联盟客户端项目>移植到WinUI 3平台
,并分享相关代码仓库。此外,我们还将重点讨论为什么能够在短短30分钟内完成从Uno Platform到WinUI 3的转换,以及具体的转换过程。
另外,从WPF开始,我们对包括Uno Platform在内的基于XAML的框架和项目架构设计有着深入的兴趣和经验。大家可以在我们的GitHub上查看各种项目:
GitHub - jamesnet214[4] GitHub - vickyqu115[5]
目录
创建WinUI 3仓库的背景 为什么选择基于Uno Platform而不是WPF进行转换 WPF与WinUI 3的关系 30分钟内完成WinUI 3转换的过程
4.1 项目复制和配置 4.2 创建WinUI 3项目 4.3 文件复制 4.4 修改App.xaml和App.xaml.cs 4.5 检查资源和图片路径
1. 创建WinUI 3仓库的背景
我们之前介绍的基于Uno Platform和WPF的英雄联盟客户端最初是几年前用WPF开发的。
近期,考虑到跨平台开发的需求,我们选择了能最有效利用WPF技术的桌面跨平台解决方案 - Uno Platform
,并用它开发了新版英雄联盟客户端。在此过程中,我们将XAML框架和项目架构的核心构建在.NET Standard 2.0上,这使得WPF和Uno Platform都能保持相同的项目结构。
而且我们没有止步于此,为了证明可以在更多平台上使用相同的项目架构进行开发
,我们尝试转换到WinUI 3
。这个选择非常具有战略性和效果,基于Uno Platform转换到WinUI 3用时不到30分钟。
2. 为什么选择基于Uno Platform而不是WPF
Uno Platform桌面版和WinUI 3使用相同的核心库,如Microsoft.UI.Xaml.dll
。这意味着两个平台共享相同的库和命名空间,代码兼容性和可重用性非常高。
两个平台都基于Microsoft.*
命名空间,特别是Microsoft.UI.Xaml
是UI构建的核心元素。这些共同点使得源代码能100%重用,无需更改命名空间或修改代码就能在平台间切换。
正是由于这些特性,从Uno Platform转换到WinUI 3变得非常容易,可以大大节省开发时间和精力。
3. WPF与WinUI 3的关系
WPF基于其独有的核心库,如PresentationCore.dll
、PresentationFramework.dll
、System.Xaml.dll
、WindowsBase.dll
等。因此,它使用的库和命名空间与WinUI 3有根本的不同。
WPF使用System.Windows.*
命名空间,而WinUI 3使用Microsoft.UI.Xaml
命名空间。此外还有一些细微的语法差异,比如ResourceDictionary
的Source
路径语法。这些原因使得从WPF转换到WinUI 3需要更多时间。
不过,由于项目架构本身都是基于.NET Standard 2.0的XAML框架
,除了一些细微的语法差异外,整体结构和设计并无区别。因此,通过现有的Uno Platform、WPF以及这次公开的WinUI 3这三个平台开发的英雄联盟客户端,将成为平台间技术扩展和转换的重要参考。
4. 30分钟内完成的WinUI 3转换过程
4.1 项目复制和配置
转换到WinUI 3的过程是在创建新的WinUI 3项目后,将Uno Platform项目中的各个匹配文件夹和所有文件复制并粘贴进去。
4.2 创建WinUI 3项目
使用Visual Studio的WinUI 3桌面应用程序模板创建新项目。将项目名称和命名空间设置与Uno Platform项目相同,这样可以使后续工作更顺利。
4.3 文件复制
将Uno Platform项目的Views
、ViewModels
、Models
等公共文件夹和文件复制到WinUI 3项目中。这时需要保持相同的文件夹结构以维持项目结构的一致性。
4.4 修改App.xaml和App.xaml.cs
根据WinUI 3的要求修改应用程序入口点App.xaml和其代码后置文件。这部分通常在项目创建时会自动配置,但根据需要可以添加额外的资源或设置。
4.5 检查资源和图片路径
检查并确保资源文件和图片路径设置正确,必要时进行修改。特别注意路径结构可能存在的差异。
通过这些步骤,我们能够在不修改代码的情况下构建和运行WinUI 3项目。
5. 英雄联盟仓库介绍
在WinUI 3、Uno Platform和WPF这三个平台上运行的英雄联盟应用程序都基于XAML,呈现和运行方式完全相同
。WPF支持Windows 7及以上版本,WinUI 3支持Windows 10及以上版本并可发布到Microsoft Store,而通过Uno Platform,除了Windows外,还能在macOS和Linux等所有主要桌面环境中运行基于XAML的应用程序。
在不同环境中同样运行的基于XAML的英雄联盟客户端
大家可以通过GitHub下载包括WinUI 3在内的Uno Platform、WPF仓库,亲自体验各平台间的差异和特点。
5.1 仓库列表
Jamesnet.Core框架: GitHub - jamesnet.core[6] 这是一个可在所有XAML平台上运行的框架,提供DI、MVVM、Bootstrapper等功能。 各平台仓库:
5.2 仓库使用方法
由于各仓库共享相同的项目架构和代码,开发者可以根据目标平台克隆相应的项目进行使用。这样可以在不同平台上获得一致的开发体验。
6. 总结与展望
本文强调了通过单一框架和项目架构在不同平台上开发相同应用程序的可能性
。特别是,由于Uno Platform和WinUI 3的源代码几乎完全一致,使得向WinUI 3的转换能够非常有效且快速地完成。这也意味着未来不仅是WPF,在WinUI 3平台上也能有效地实现向Uno Platform等跨平台的技术转换和扩展
。
我们将继续分享基于WPF技术的XAML技术在Uno Platform等各种平台上的开发经验,希望能与社区一起成长。期待大家的关注和参与。
参考资料
主要仓库
Jamesnet.Core 框架:GitHub - jamesnet.core[7] 一个在所有基于 XAML 的平台上运行的框架,提供 DI、MVVM、Bootstrapper 等功能。 英雄联盟客户端重构项目: WPF 版本:GitHub - leagueoflegends-wpf[8] Uno Platform 版本:GitHub - leagueoflegends-uno[9] WinUI 3 版本:GitHub - leagueoflegends-winui3[10] DynamicResource Theme:GitHub - dynamic-theme[11] 一个用于 WPF 中动态资源主题切换的库。
目前已更新的WPF教程(自定义控件)
目前我们已经在Bilibili平台(小李趣味多)更新了7个WPF自定义系列教学视频。
关于我们
感谢您的阅读。
源码链接1: https://github.com/jamesnetgroup/leagueoflegends-wpf
[2]源码链接2: https://github.com/jamesnetgroup/leagueoflegends-uno
[3]源码链接3: https://github.com/jamesnetgroup/leagueoflegends-winui3
[4]GitHub - jamesnet214: https://github.com/jamesnet214
[5]GitHub - vickyqu115: https://github.com/vickyqu115
[6]GitHub - jamesnet.core: https://github.com/JamesnetGroup/leagueoflegends-wpf/tree/main/src/Jamesnet.Core
[7]GitHub - jamesnet.core: https://github.com/JamesnetGroup/leagueoflegends-wpf/tree/main/src/Jamesnet.Core
[8]GitHub - leagueoflegends-wpf: https://github.com/jamesnetgroup/leagueoflegends-wpf
[9]GitHub - leagueoflegends-uno: https://github.com/jamesnetgroup/leagueoflegends-uno
[10]GitHub - leagueoflegends-winui3: https://github.com/jamesnetgroup/leagueoflegends-winui3
[11]GitHub - dynamic-theme: https://github.com/jamesnetgroup/dynamic-theme
[12]实现主题切换: https://www.bilibili.com/video/BV1FN41eHE7e
[13]实现Riot PlayButton: https://www.bilibili.com/video/BV1Tu4y1j7Ei
[14]实现导航栏: https://www.bilibili.com/video/BV1Ui4y1a717
[15]实现Riot Slider: https://www.bilibili.com/video/BV1uy421a7yM
[16]实现智能日期: https://www.bilibili.com/video/BV1pE421L7c2
[17]实现Cupertino TreeView: https://www.bilibili.com/video/BV1xz42187wV