WPF到Web的无缝过渡：英雄联盟客户端的OpenSilver迁移实战

nUyKj0U

开源项目名称：leagueoflegends-OpenSilver
作者：Vicky&James
leagueoflegends-opensilver:https://github.com/jamesnetgroup/leagueoflegends-opensilver
leagueoflegends-wpf:https://github.com/jamesnetgroup/leagueoflegends-wpf
Jamesnet个人网站:https://jamesnet.dev

• 网站链接
  
• GitHub链接
  

*请多多点亮Star和Fork以表鼓励，大家的支持是我们持续开源的动力！😊
目录

• 引言
  
  
  • 项目概述：英雄联盟系列
    
  • OpenSilver 的迁移能力
    
  • 继承 WPF 开发方法的用户体验
    
  • 原生网页集成方案
    
  
  
• 架构
  
  
  • OpenSilver 项目结构
    
  • 基于 CustomControl 的开发
    
  • 项目去中心化与模式
    
  • 跨平台架构
    
  
  
• 跨平台响应式架构策略
  
  
  • IValueConverter 的使用
    
  • VisualStateManager 的集成
    
  • ICommand 与 CustomControl 的交互
    
  • 跨平台依赖注入策略
    
  
  
• 结论
  

1. 引言

本文探讨了使用 XAML 实现英雄联盟客户端并成功迁移至 OpenSilver 的案例研究。该项目通过 GitHub 仓库 和 Azure Web App 网站 公开发布，重点展示了 OpenSilver 的技术特点——一个将 XAML 技术扩展到网页环境的平台，基于传统以桌面为中心的 WPF 体验构建。英雄联盟在 WPF 中已建立了模块化架构，而 OpenSilver 则为这一架构无缝迁移到 WebAssembly 执行提供了基础。

1. 项目概述：英雄联盟系列

在过去五年中，英雄联盟项目通过从 WPF 迁移到包括 Uno Platform、UWP 和 WinUI 3 在内的各个桌面 XAML 平台，不断发展其基于 .NET Standard 2.0 的单一框架架构。这一次，它通过 OpenSilver 将 XAML 技术扩展到网页上，为桌面体验向网页环境的过渡提供了新可能。迁移自 WPF 的逻辑和 UI 作为一个类库直接在 OpenSilver 中得到利用。
GitHub: https://github.com/jamesnetgroup/leagueoflegends-opensilver

2. OpenSilver 的迁移能力

OpenSilver 提供了全球公认的强大迁移能力，其基于在 Silverlight 和 WPF 应用迁移方面的丰富全球经验和专业知识。众多公司和开发者已成功将现有的 WPF 与 Silverlight 应用迁移至 WebAssembly 环境，进一步巩固了其在全球市场的地位。英雄联盟项目利用了这一世界级技术，将其基于 CustomControl 的架构——原本在 WPF 中开发——迁移至类库，并进一步扩展到网页上，从而实现高效的迁移，无需复杂的代码修改。
3. 继承 WPF 开发方法的用户体验

OpenSilver 保持与 WPF 相同的架构和开发模式（例如 CustomControl、依赖注入、项目去中心化）。这使得 WPF 开发者无需额外学习即可在熟悉的环境中工作，确保一致的用户体验和高度兼容性。英雄联盟项目自然地将 WPF 中设计的模块化结构迁移至 OpenSilver，在网页上保持同样的高质量表现。
4. 原生网页集成方案

JavaScript、CSS、路由和 URL 管理等原生技术在网页开发中至关重要。OpenSilver 背后的公司 Userware 同时开发了 CSHTML5（将 XAML 转换为 HTML）和 XAML for Blazor（使 XAML 可在 Blazor 中使用），展示了他们在将 XAML 与原生网页技术集成方面的深厚专业知识。基于这一经验，OpenSilver 将 JavaScript 与 CSS 等原生网页功能与传统的 WPF 开发方法相融合，在保留 XAML 优势的同时，最大化了网页固有的功能与性能。在将 WPF 中基于 CustomControl 的模块迁移到 OpenSilver 后，英雄联盟项目利用 OpenSilver 的原生网页集成技术，在 WebAssembly 环境中提供了优化的用户体验。

2. 架构

OpenSilver 将 WPF 的技术特性扩展到网页上，提供了满足现代网页开发需求的架构。本节探讨了 OpenSilver 项目的结构以及英雄联盟项目基于 CustomControl 的开发方式。英雄联盟已在 WPF 中建立了跨平台设计的架构，而 OpenSilver 则为这一架构扩展到网页环境提供了框架支持。
1. OpenSilver 项目结构

OpenSilver 是一个主要为 WebAssembly 执行设计的统一平台，同时也支持通过 WPF 在 Windows 上进行测试执行以便开发。英雄联盟项目最初基于 WPF 中的模块化结构构建，而 OpenSilver 提供了一个将 WebAssembly 与 Windows 测试执行良好分离的架构，使得 WPF 项目可以直接迁移并运行。这使得在 WPF 中构建的逻辑与 UI 能够迁移到类库，并自然扩展至 OpenSilver。

项目组件

• Leagueoflegends：主项目，涵盖基于 XAML 的 UI 和核心业务逻辑。基于从 WPF 迁移到类库的逻辑，并为 OpenSilver 的 WebAssembly 执行进行了优化。
  
• Leagueoflegends.Browser：通过将 OpenSilver 代码转换为 WebAssembly 格式进行部署，提供网页执行环境，在将 WPF 设计结构扩展到网页上方面起到了关键作用。
  
• Leagueoflegends.Simulator：基于 WPF 的模拟器，支持测试和调试工具（如设计器、实时预览），允许在 OpenSilver 内保持与 WPF 相同的开发方式。
  

这一结构保留了 WPF 的开发方法，同时实现了向 WebAssembly 执行的扩展，有效整合了迁移到类库中的 WPF 逻辑在 OpenSilver 中的应用。英雄联盟项目利用这一架构自然地将其模块化设计迁移到网页环境中。
2. 基于 CustomControl 的开发

英雄联盟项目从一开始就在 WPF 中采用了所有 UI 元素均以 CustomControl 实现的结构。该方法提供了重用性和样式灵活性，为跨平台迁移奠定了基础。
由于 OpenSilver 提供了与 WPF 相同的 CustomControl 支持，现有设计可以在扩展到网页环境时保持不变。这一设计允许在 WPF 中已优化的模块化架构迁移到类库，并以 WebAssembly 的形式在 OpenSilver 中执行。
优势

CustomControl 通过统一的模板和样式定义提供了模块化的 UI，不仅便于样式和自定义，而且提升了代码的可读性和可维护性。英雄联盟项目在 WPF 中采用这一方法设计了独立组件，并在 OpenSilver 中应用相同模式，以在迁移过程中最大程度地减少代码修改。
与传统的 UserControl 不同，CustomControl 通过将 UI 元素拆分为独立模块来降低复杂依赖性。例如，UserControl 需要使用 x:Key 单独定义样式，从而增加了详细设置的复杂性并降低了重用性。
相比之下，CustomControl 将按钮或卡片等独立组件封装为具备自身逻辑和样式的单元，提高了重用性。这使得从 WPF 到 OpenSilver 的无缝集成成为可能，且在一致模式下工作能减少维护和扩展过程中出现的错误。

上图直观地展示了 CustomControl 结构的优势。在将英雄联盟项目从 WPF 设计迁移至 OpenSilver 时，这一结构非常有利，使得迁移到类库的逻辑能在 WebAssembly 环境中高效运行。
迁移效率

CustomControl 简单清晰的结构相比 UserControl 降低了兼容性问题，并在必要时支持快速修改。英雄联盟项目在 WPF 中采用这种结构为跨平台设计做好了准备，而 OpenSilver 原生支持这一结构，使得从 WPF 到网页的过渡更为高效。迁移到类库的 WPF 逻辑在 OpenSilver 的 WebAssembly 环境中能够自然运行，同时保持现有的 CustomControl 设计。

与 AI 应用的协同

基于 CustomControl 的分布式结构与生成式 AI（如 GPT、Claude）高度契合。由独立模块组成的 UI 允许 AI 精确生成或增强特定组件，最大化自动化工具的效率。英雄联盟项目在 WPF 中采用了这种结构，而通过迁移到类库，在 OpenSilver 中同样能实现这一优势。
3. 项目去中心化与模式

传统 XAML 项目遵循层级结构，屏幕在主项目下垂直依赖，资源则全局管理。然而，英雄联盟项目已基于 WPF 的 CustomControl 模块化设计建立了跨平台架构。OpenSilver 为这一架构和 CustomControl 提供了与 WPF 相同的支持，使得现有结构可以原样迁移，克服了层级限制，实现灵活去中心化。
基于 CustomControl 的设计与灵活去中心化

英雄联盟项目从最初在 WPF 中就将所有 UI 元素实现为 CustomControl。该方法不仅提供了重用性和样式灵活性，还为跨平台迁移奠定了基础。由于 OpenSilver 为 CustomControl 提供了与 WPF 相同的支持，现有设计在扩展到网页环境时可以保持不变。每个组件都在 Themes/Generic.xaml 中定义了自己的模板和样式，消除了全局资源依赖，确保了独立性。
实际项目结构已经脱离了传统的层级布局，而是根据功能和需求灵活地去中心化为多个模块。以下为一个示例，直观展示了项目中非层级、独立模块的排列方式，各模块之间没有直接引用，各自基于 CustomControl，并通过依赖注入和视图注入实现灵活交互：
// 非层级、独立模块列表// 每个模块基于 CustomControl，独立运行，无直接引用，通过依赖/视图注入交互// 主模块与导航模块Leagueoflegends.Main         // 负责菜单和整体屏幕布局的主屏幕Leagueoflegends.Navigate     // 处理菜单功能的模块// 游戏模式与屏幕模块Leagueoflegends.Clash        // 与 Clash 相关的屏幕模块Leagueoflegends.Home         // 主页屏幕模块Leagueoflegends.Collection   // 收藏屏幕模块Leagueoflegends.Shop         // 处理商城相关功能的屏幕模块Leagueoflegends.Store        // 商店相关功能的屏幕模块Leagueoflegends.Tft          // TFT 屏幕模块// 用户相关功能模块Leagueoflegends.Social       // 好友相关功能模块Leagueoflegends.Profile      // 用户个人资料相关功能模块// 设置与覆盖模块Leagueoflegends.Settings     // 覆盖式设置菜单模块// 模块之间无直接引用；可通过依赖/视图注入实现灵活连接这一结构摒弃了传统层级方式（例如所有屏幕都依赖于主项目），而是根据功能和逻辑需求实现模块去中心化。每个模块由一组独立的 CustomControl 组成，实现独立开发、测试与部署。模块间通过接口、依赖注入和视图注入进行交互，确保了松散耦合。该方法打破了层级限制，使得不同布局和功能（例如菜单（Navigate）、主屏幕（Main）、特定功能屏幕（Clash、Home 等）和覆盖设置（Settings））能够有机组合，为现代软件开发提供了最佳方案。
通过依赖注入与视图注入实现的灵活性

各模块通过依赖注入和视图注入进行交互，无需直接引用，消除了层级约束，使得每个模块在独立运行的同时又能提供集成的用户体验。例如，Main 模块可动态加载 Navigate 模块中的菜单视图，而 Settings 模块则可在需要时以覆盖方式调用。此机制使得在 WPF 中设计的结构能原样在 OpenSilver 中使用，实现运行时灵活集成模块，最大化扩展性与可维护性。
独立的资源管理

每个 CustomControl 均管理自身资源。例如，Navigate 模块中的菜单按钮或 Shop 模块中的产品卡均定义了各自的模板和样式。这一做法在 OpenSilver 中延续了 WPF 建立的资源隔离策略，使得每个模块都能独立迁移，并在跨平台迁移过程中简化平台特定的定制工作。
结论

英雄联盟项目已通过 WPF 建立了基于 CustomControl 的跨平台设计架构，而 OpenSilver 完全支持这一结构，确保了平滑迁移。此模式——通过依赖注入和视图注入实现灵活去中心化，而不受层级约束——使得 Main、Navigate、Clash、Social、Profile 和 Settings 等模块在逻辑上和独立性上均得到了最佳组织，为现代软件开发提供了最优解决方案。
3. 跨平台响应式架构策略

跨平台响应式架构策略指的是一种设计方法，强调兼容性和迁移友好性，使得为某一 XAML 平台设计的架构能够灵活迁移到另一基于 XAML 的平台。英雄联盟项目最初基于 WPF 开发，并扩展到包括 UWP、WinUI 3、Uno Platform 和 OpenSilver 在内的多个平台，通过这一策略维护和发展了单一框架架构。本节探讨了在跨平台环境中（包括 OpenSilver）有效的架构策略。
1. IValueConverter 的使用

IValueConverter 是 System.ComponentModel 命名空间中提供的标准接口，在所有基于 XAML 的平台上均可统一运行，与任何特定平台无关。英雄联盟项目利用该接口设计了平台无关的数据转换逻辑。例如，在 WPF 中定义的值转换逻辑可以在 OpenSilver 的 WebAssembly 环境中无缝运行，无需修改，最大化了跨平台迁移过程中代码的重用性。
2. VisualStateManager 的集成

VisualStateManager (VSM) 是一个强大的状态管理工具，在 WPF、UWP、WinUI 3、Uno Platform 和 OpenSilver 等各类 XAML 平台中均有一致支持。它替代了 WPF 中的 Trigger，专门用于系统化地处理复杂的 UI 状态转换和动画。英雄联盟项目利用 VSM 确保在各平台间实现一致的视觉效果——例如在所有环境中实现统一的按钮悬停状态和屏幕过渡效果。下面的 YouTube 视频展示了 VSM 应用的一个优秀案例：

• BiliBili 项目展示链接
  

VSM 标准化了状态管理，无需额外的特定平台实现，在迁移过程中对保持 UI 一致性起到了至关重要的作用。
3. ICommand 与 CustomControl 的交互

英雄联盟项目将所有视图和控件实现为 CustomControl，通过 ICommand 强化了 MVVM 模式。除了依赖内置控件（如 Button）外，项目在 CustomControl 中定义了事件，并结合 DependencyProperty 自由调用 ICommand 的 Execute 方法。该设计使得每个控件均能在跨平台环境中与 ViewModel 保持一致交互，灵活控制事件的触发时机与位置。
这一方法避免了不同平台间行为程序集（例如 System.Windows.Interactivity）差异带来的需求，并允许对冒泡和隧道事件进行细粒度控制。以下列出了一些行为程序集示例：

• System.Windows.Interactivity
  
• System.Windows.Interactivity.WPF
  
• Microsoft.Xaml.Behaviors.Wpf
  
• Microsoft.Xaml.Behaviors.Uwp
  
• Microsoft.Xaml.Behaviors.WinUI
  
• CommunityToolkit.WinUI.Behaviors
  
• CommunityToolkit.Uwp.Behaviors
  
• Uno.Microsoft.Xaml.Behaviors.Interactivity
  
• Uno.Microsoft.Toolkit.Uwp.UI.Behaviors
  
• Avalonia.Xaml.Interactivity
  

如上所示，不同平台间的行为各有差异，容易引起混淆并限制集成，而该方法则实现了必要的 MVVM 交互，无需额外行为支持，从而提升了跨平台兼容性。
4. 跨平台依赖注入策略

. NET 提供的标准依赖注入（Microsoft.Extensions.DependencyInjection）主要面向 SPA（单页应用）架构的生命周期，例如 ASP.NET。然而，对于像 WPF 这样的桌面应用，Transient、Scoped 和 Singleton 等生命周期并不总是适用。
例如，在使用 CommunityToolkit.Mvvm 时，可以利用标准 DI 作为默认依赖注入来实现 MVVM 模式。另一方面，专为 XAML 应用设计的 Prism 则允许将 MVVM 与其自有的 IoC 容器集成。
值得注意的是，CommunityToolkit.Mvvm 同时支持标准 DI 和基于 .NET 通用接口 IServiceProvider 的 DI，提供了更大的灵活性。然而，Prism 的 DI 运行于其自有的 IContainerProvider 上，这意味着不能将 CommunityToolkit.Mvvm 默认的 DI 替换为 Prism 的 DI。不过，这两个框架可以组合使用。尽管如此，英雄联盟项目选择开发并应用自有基于 .NET Standard 2.0 的 Jamesnet.Foundation 框架，而不是依赖这些外部框架。
该 Jamesnet.Foundation 框架在 WPF、WinUI 3、UWP、Uno Platform 和 OpenSilver 中统一实现了依赖注入和 MVVM 模式，全面支持视图与视图模型之间的数据上下文绑定映射、视图模型之间的交互接口以及依赖注入管理。通过整合所有管理点，即使在跨平台迁移过程中，也能保持并发展单一架构。作为开源项目，Jamesnet.Foundation 已包含在英雄联盟系列源代码中，任何人均可访问。
结论

英雄联盟项目的跨平台响应式架构策略通过使用 IValueConverter、VisualStateManager、ICommand 和依赖注入，实现了各基于 XAML 平台间的兼容性和灵活性。借助如 Jamesnet.Foundation 这样的统一框架，该项目不仅实现了从 WPF 到 OpenSilver 的迁移，而且在多样环境中保持了一致的架构，为现代 XAML 开发提供了一种经过优化的方法。
4. 结论

这次 OpenSilver 迁移证实了 WPF 的技术优势可以忠实地在网页环境中实现。尤其令人印象深刻的是，现有的 WPF 开发体验可以自然地扩展到网页上，这有望为 XAML 开发者开辟新的可能性。
Jaewung Lee
来自韩国的微软 MVP Jaewung 专注于将 WPF、Uno Platform、WinUI 3、UWP 和 OpenSilver 等多种基于 XAML 的平台统一到一个框架中。作为 OpenSilver 的倡导者，他提出了将 WPF 技术扩展到网页环境的创新方法。
Yang Qu
来自中国的微软 MVP Yang 是一位专注于 WPF 的开发者，她成功展示了英雄联盟 WPF 版本向 OpenSilver 的迁移。她还通过各种渠道积极活动和提供 WPF 技术相关教程。