WPF到Web的無縫過渡：英雄聯(lián)盟客戶端的OpenSilver遷移實戰(zhàn)
開源項目名稱：leagueoflegends-OpenSilver
作者：Vicky&James
leagueoflegends-opensilver:https://github.com/jamesnetgroup/leagueoflegends-opensilver
leagueoflegends-wpf:https://github.com/jamesnetgroup/leagueoflegends-wpf
Jamesnet個人網(wǎng)站:https://jamesnet.dev
*請多多點亮Star和Fork以表鼓勵，大家的支持是我們持續(xù)開源的動力！??
目錄
- 引言
- 項目概述：英雄聯(lián)盟系列
- OpenSilver 的遷移能力
- 繼承 WPF 開發(fā)方法的用戶體驗
- 原生網(wǎng)頁集成方案
- 架構
- OpenSilver 項目結構
- 基于 CustomControl 的開發(fā)
- 項目去中心化與模式
- 跨平臺架構
- 跨平臺響應式架構策略
- IValueConverter 的使用
- VisualStateManager 的集成
- ICommand 與 CustomControl 的交互
- 跨平臺依賴注入策略
- 結論
1. 引言
本文探討了使用 XAML 實現(xiàn)英雄聯(lián)盟客戶端并成功遷移至 OpenSilver 的案例研究。該項目通過 GitHub 倉庫 和 Azure Web App 網(wǎng)站 公開發(fā)布，重點展示了 OpenSilver 的技術特點——一個將 XAML 技術擴展到網(wǎng)頁環(huán)境的平臺，基于傳統(tǒng)以桌面為中心的 WPF 體驗構建。英雄聯(lián)盟在 WPF 中已建立了模塊化架構，而 OpenSilver 則為這一架構無縫遷移到 WebAssembly 執(zhí)行提供了基礎。
1. 項目概述：英雄聯(lián)盟系列
在過去五年中，英雄聯(lián)盟項目通過從 WPF 遷移到包括 Uno Platform、UWP 和 WinUI 3 在內的各個桌面 XAML 平臺，不斷發(fā)展其基于 .NET Standard 2.0 的單一框架架構。這一次，它通過 OpenSilver 將 XAML 技術擴展到網(wǎng)頁上，為桌面體驗向網(wǎng)頁環(huán)境的過渡提供了新可能。遷移自 WPF 的邏輯和 UI 作為一個類庫直接在 OpenSilver 中得到利用。
GitHub: https://github.com/jamesnetgroup/leagueoflegends-opensilver
2. OpenSilver 的遷移能力
OpenSilver 提供了全球公認的強大遷移能力，其基于在 Silverlight 和 WPF 應用遷移方面的豐富全球經(jīng)驗和專業(yè)知識。眾多公司和開發(fā)者已成功將現(xiàn)有的 WPF 與 Silverlight 應用遷移至 WebAssembly 環(huán)境，進一步鞏固了其在全球市場的地位。英雄聯(lián)盟項目利用了這一世界級技術，將其基于 CustomControl 的架構——原本在 WPF 中開發(fā)——遷移至類庫，并進一步擴展到網(wǎng)頁上，從而實現(xiàn)高效的遷移，無需復雜的代碼修改。
3. 繼承 WPF 開發(fā)方法的用戶體驗
OpenSilver 保持與 WPF 相同的架構和開發(fā)模式（例如 CustomControl、依賴注入、項目去中心化）。這使得 WPF 開發(fā)者無需額外學習即可在熟悉的環(huán)境中工作，確保一致的用戶體驗和高度兼容性。英雄聯(lián)盟項目自然地將 WPF 中設計的模塊化結構遷移至 OpenSilver，在網(wǎng)頁上保持同樣的高質量表現(xiàn)。
4. 原生網(wǎng)頁集成方案
JavaScript、CSS、路由和 URL 管理等原生技術在網(wǎng)頁開發(fā)中至關重要。OpenSilver 背后的公司 Userware 同時開發(fā)了 CSHTML5（將 XAML 轉換為 HTML）和 XAML for Blazor（使 XAML 可在 Blazor 中使用），展示了他們在將 XAML 與原生網(wǎng)頁技術集成方面的深厚專業(yè)知識。基于這一經(jīng)驗，OpenSilver 將 JavaScript 與 CSS 等原生網(wǎng)頁功能與傳統(tǒng)的 WPF 開發(fā)方法相融合，在保留 XAML 優(yōu)勢的同時，最大化了網(wǎng)頁固有的功能與性能。在將 WPF 中基于 CustomControl 的模塊遷移到 OpenSilver 后，英雄聯(lián)盟項目利用 OpenSilver 的原生網(wǎng)頁集成技術，在 WebAssembly 環(huán)境中提供了優(yōu)化的用戶體驗。
2. 架構
OpenSilver 將 WPF 的技術特性擴展到網(wǎng)頁上，提供了滿足現(xiàn)代網(wǎng)頁開發(fā)需求的架構。本節(jié)探討了 OpenSilver 項目的結構以及英雄聯(lián)盟項目基于 CustomControl 的開發(fā)方式。英雄聯(lián)盟已在 WPF 中建立了跨平臺設計的架構，而 OpenSilver 則為這一架構擴展到網(wǎng)頁環(huán)境提供了框架支持。
1. OpenSilver 項目結構
OpenSilver 是一個主要為 WebAssembly 執(zhí)行設計的統(tǒng)一平臺，同時也支持通過 WPF 在 Windows 上進行測試執(zhí)行以便開發(fā)。英雄聯(lián)盟項目最初基于 WPF 中的模塊化結構構建，而 OpenSilver 提供了一個將 WebAssembly 與 Windows 測試執(zhí)行良好分離的架構，使得 WPF 項目可以直接遷移并運行。這使得在 WPF 中構建的邏輯與 UI 能夠遷移到類庫，并自然擴展至 OpenSilver。
項目組件
- Leagueoflegends：主項目，涵蓋基于 XAML 的 UI 和核心業(yè)務邏輯。基于從 WPF 遷移到類庫的邏輯，并為 OpenSilver 的 WebAssembly 執(zhí)行進行了優(yōu)化。
- Leagueoflegends.Browser：通過將 OpenSilver 代碼轉換為 WebAssembly 格式進行部署，提供網(wǎng)頁執(zhí)行環(huán)境，在將 WPF 設計結構擴展到網(wǎng)頁上方面起到了關鍵作用。
- Leagueoflegends.Simulator：基于 WPF 的模擬器，支持測試和調試工具（如設計器、實時預覽），允許在 OpenSilver 內保持與 WPF 相同的開發(fā)方式。
這一結構保留了 WPF 的開發(fā)方法，同時實現(xiàn)了向 WebAssembly 執(zhí)行的擴展，有效整合了遷移到類庫中的 WPF 邏輯在 OpenSilver 中的應用。英雄聯(lián)盟項目利用這一架構自然地將其模塊化設計遷移到網(wǎng)頁環(huán)境中。
2. 基于 CustomControl 的開發(fā)
英雄聯(lián)盟項目從一開始就在 WPF 中采用了所有 UI 元素均以 CustomControl 實現(xiàn)的結構。該方法提供了重用性和樣式靈活性，為跨平臺遷移奠定了基礎。
由于 OpenSilver 提供了與 WPF 相同的 CustomControl 支持，現(xiàn)有設計可以在擴展到網(wǎng)頁環(huán)境時保持不變。這一設計允許在 WPF 中已優(yōu)化的模塊化架構遷移到類庫，并以 WebAssembly 的形式在 OpenSilver 中執(zhí)行。
優(yōu)勢
CustomControl 通過統(tǒng)一的模板和樣式定義提供了模塊化的 UI，不僅便于樣式和自定義，而且提升了代碼的可讀性和可維護性。英雄聯(lián)盟項目在 WPF 中采用這一方法設計了獨立組件，并在 OpenSilver 中應用相同模式，以在遷移過程中最大程度地減少代碼修改。
與傳統(tǒng)的 UserControl 不同，CustomControl 通過將 UI 元素拆分為獨立模塊來降低復雜依賴性。例如，UserControl 需要使用 x:Key 單獨定義樣式，從而增加了詳細設置的復雜性并降低了重用性。
相比之下，CustomControl 將按鈕或卡片等獨立組件封裝為具備自身邏輯和樣式的單元，提高了重用性。這使得從 WPF 到 OpenSilver 的無縫集成成為可能，且在一致模式下工作能減少維護和擴展過程中出現(xiàn)的錯誤。
上圖直觀地展示了 CustomControl 結構的優(yōu)勢。在將英雄聯(lián)盟項目從 WPF 設計遷移至 OpenSilver 時，這一結構非常有利，使得遷移到類庫的邏輯能在 WebAssembly 環(huán)境中高效運行。
遷移效率
CustomControl 簡單清晰的結構相比 UserControl 降低了兼容性問題，并在必要時支持快速修改。英雄聯(lián)盟項目在 WPF 中采用這種結構為跨平臺設計做好了準備，而 OpenSilver 原生支持這一結構，使得從 WPF 到網(wǎng)頁的過渡更為高效。遷移到類庫的 WPF 邏輯在 OpenSilver 的 WebAssembly 環(huán)境中能夠自然運行，同時保持現(xiàn)有的 CustomControl 設計。
與 AI 應用的協(xié)同
基于 CustomControl 的分布式結構與生成式 AI（如 GPT、Claude）高度契合。由獨立模塊組成的 UI 允許 AI 精確生成或增強特定組件，最大化自動化工具的效率。英雄聯(lián)盟項目在 WPF 中采用了這種結構，而通過遷移到類庫，在 OpenSilver 中同樣能實現(xiàn)這一優(yōu)勢。
3. 項目去中心化與模式
傳統(tǒng) XAML 項目遵循層級結構，屏幕在主項目下垂直依賴，資源則全局管理。然而，英雄聯(lián)盟項目已基于 WPF 的 CustomControl 模塊化設計建立了跨平臺架構。OpenSilver 為這一架構和 CustomControl 提供了與 WPF 相同的支持，使得現(xiàn)有結構可以原樣遷移，克服了層級限制，實現(xiàn)靈活去中心化。
基于 CustomControl 的設計與靈活去中心化
英雄聯(lián)盟項目從最初在 WPF 中就將所有 UI 元素實現(xiàn)為 CustomControl。該方法不僅提供了重用性和樣式靈活性，還為跨平臺遷移奠定了基礎。由于 OpenSilver 為 CustomControl 提供了與 WPF 相同的支持，現(xiàn)有設計在擴展到網(wǎng)頁環(huán)境時可以保持不變。每個組件都在 Themes/Generic.xaml 中定義了自己的模板和樣式，消除了全局資源依賴，確保了獨立性。
實際項目結構已經(jīng)脫離了傳統(tǒng)的層級布局，而是根據(jù)功能和需求靈活地去中心化為多個模塊。以下為一個示例，直觀展示了項目中非層級、獨立模塊的排列方式，各模塊之間沒有直接引用，各自基于 CustomControl，并通過依賴注入和視圖注入實現(xiàn)靈活交互：
// 非層級、獨立模塊列表
// 每個模塊基于 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 // 覆蓋式設置菜單模塊
// 模塊之間無直接引用；可通過依賴/視圖注入實現(xiàn)靈活連接
這一結構摒棄了傳統(tǒng)層級方式（例如所有屏幕都依賴于主項目），而是根據(jù)功能和邏輯需求實現(xiàn)模塊去中心化。每個模塊由一組獨立的 CustomControl 組成，實現(xiàn)獨立開發(fā)、測試與部署。模塊間通過接口、依賴注入和視圖注入進行交互，確保了松散耦合。該方法打破了層級限制，使得不同布局和功能（例如菜單（Navigate）、主屏幕（Main）、特定功能屏幕（Clash、Home 等）和覆蓋設置（Settings））能夠有機組合，為現(xiàn)代軟件開發(fā)提供了最佳方案。
通過依賴注入與視圖注入實現(xiàn)的靈活性
各模塊通過依賴注入和視圖注入進行交互，無需直接引用，消除了層級約束，使得每個模塊在獨立運行的同時又能提供集成的用戶體驗。例如，Main 模塊可動態(tài)加載 Navigate 模塊中的菜單視圖，而 Settings 模塊則可在需要時以覆蓋方式調用。此機制使得在 WPF 中設計的結構能原樣在 OpenSilver 中使用，實現(xiàn)運行時靈活集成模塊，最大化擴展性與可維護性。
獨立的資源管理
每個 CustomControl 均管理自身資源。例如，Navigate 模塊中的菜單按鈕或 Shop 模塊中的產品卡均定義了各自的模板和樣式。這一做法在 OpenSilver 中延續(xù)了 WPF 建立的資源隔離策略，使得每個模塊都能獨立遷移，并在跨平臺遷移過程中簡化平臺特定的定制工作。
結論
英雄聯(lián)盟項目已通過 WPF 建立了基于 CustomControl 的跨平臺設計架構，而 OpenSilver 完全支持這一結構，確保了平滑遷移。此模式——通過依賴注入和視圖注入實現(xiàn)靈活去中心化，而不受層級約束——使得 Main、Navigate、Clash、Social、Profile 和 Settings 等模塊在邏輯上和獨立性上均得到了最佳組織，為現(xiàn)代軟件開發(fā)提供了最優(yōu)解決方案。
3. 跨平臺響應式架構策略
跨平臺響應式架構策略指的是一種設計方法，強調兼容性和遷移友好性，使得為某一 XAML 平臺設計的架構能夠靈活遷移到另一基于 XAML 的平臺。英雄聯(lián)盟項目最初基于 WPF 開發(fā)，并擴展到包括 UWP、WinUI 3、Uno Platform 和 OpenSilver 在內的多個平臺，通過這一策略維護和發(fā)展了單一框架架構。本節(jié)探討了在跨平臺環(huán)境中（包括 OpenSilver）有效的架構策略。
1. IValueConverter 的使用
IValueConverter 是 System.ComponentModel 命名空間中提供的標準接口，在所有基于 XAML 的平臺上均可統(tǒng)一運行，與任何特定平臺無關。英雄聯(lián)盟項目利用該接口設計了平臺無關的數(shù)據(jù)轉換邏輯。例如，在 WPF 中定義的值轉換邏輯可以在 OpenSilver 的 WebAssembly 環(huán)境中無縫運行，無需修改，最大化了跨平臺遷移過程中代碼的重用性。
2. VisualStateManager 的集成
VisualStateManager (VSM) 是一個強大的狀態(tài)管理工具，在 WPF、UWP、WinUI 3、Uno Platform 和 OpenSilver 等各類 XAML 平臺中均有一致支持。它替代了 WPF 中的 Trigger，專門用于系統(tǒng)化地處理復雜的 UI 狀態(tài)轉換和動畫。英雄聯(lián)盟項目利用 VSM 確保在各平臺間實現(xiàn)一致的視覺效果——例如在所有環(huán)境中實現(xiàn)統(tǒng)一的按鈕懸停狀態(tài)和屏幕過渡效果。下面的 YouTube 視頻展示了 VSM 應用的一個優(yōu)秀案例：
VSM 標準化了狀態(tài)管理，無需額外的特定平臺實現(xiàn)，在遷移過程中對保持 UI 一致性起到了至關重要的作用。
3. ICommand 與 CustomControl 的交互
英雄聯(lián)盟項目將所有視圖和控件實現(xiàn)為 CustomControl，通過 ICommand 強化了 MVVM 模式。除了依賴內置控件（如 Button）外，項目在 CustomControl 中定義了事件，并結合 DependencyProperty 自由調用 ICommand 的 Execute 方法。該設計使得每個控件均能在跨平臺環(huán)境中與 ViewModel 保持一致交互，靈活控制事件的觸發(fā)時機與位置。
這一方法避免了不同平臺間行為程序集（例如 System.Windows.Interactivity）差異帶來的需求，并允許對冒泡和隧道事件進行細粒度控制。以下列出了一些行為程序集示例：
System.Windows.InteractivitySystem.Windows.Interactivity.WPFMicrosoft.Xaml.Behaviors.WpfMicrosoft.Xaml.Behaviors.UwpMicrosoft.Xaml.Behaviors.WinUICommunityToolkit.WinUI.BehaviorsCommunityToolkit.Uwp.BehaviorsUno.Microsoft.Xaml.Behaviors.InteractivityUno.Microsoft.Toolkit.Uwp.UI.BehaviorsAvalonia.Xaml.Interactivity
如上所示，不同平臺間的行為各有差異，容易引起混淆并限制集成，而該方法則實現(xiàn)了必要的 MVVM 交互，無需額外行為支持，從而提升了跨平臺兼容性。
4. 跨平臺依賴注入策略
. NET 提供的標準依賴注入（Microsoft.Extensions.DependencyInjection）主要面向 SPA（單頁應用）架構的生命周期，例如 ASP.NET。然而，對于像 WPF 這樣的桌面應用，Transient、Scoped 和 Singleton 等生命周期并不總是適用。
例如，在使用 CommunityToolkit.Mvvm 時，可以利用標準 DI 作為默認依賴注入來實現(xiàn) MVVM 模式。另一方面，專為 XAML 應用設計的 Prism 則允許將 MVVM 與其自有的 IoC 容器集成。
值得注意的是，CommunityToolkit.Mvvm 同時支持標準 DI 和基于 .NET 通用接口 IServiceProvider 的 DI，提供了更大的靈活性。然而，Prism 的 DI 運行于其自有的 IContainerProvider 上，這意味著不能將 CommunityToolkit.Mvvm 默認的 DI 替換為 Prism 的 DI。不過，這兩個框架可以組合使用。盡管如此，英雄聯(lián)盟項目選擇開發(fā)并應用自有基于 .NET Standard 2.0 的 Jamesnet.Foundation 框架，而不是依賴這些外部框架。
該 Jamesnet.Foundation 框架在 WPF、WinUI 3、UWP、Uno Platform 和 OpenSilver 中統(tǒng)一實現(xiàn)了依賴注入和 MVVM 模式，全面支持視圖與視圖模型之間的數(shù)據(jù)上下文綁定映射、視圖模型之間的交互接口以及依賴注入管理。通過整合所有管理點，即使在跨平臺遷移過程中，也能保持并發(fā)展單一架構。作為開源項目，Jamesnet.Foundation 已包含在英雄聯(lián)盟系列源代碼中，任何人均可訪問。
結論
英雄聯(lián)盟項目的跨平臺響應式架構策略通過使用 IValueConverter、VisualStateManager、ICommand 和依賴注入，實現(xiàn)了各基于 XAML 平臺間的兼容性和靈活性。借助如 Jamesnet.Foundation 這樣的統(tǒng)一框架，該項目不僅實現(xiàn)了從 WPF 到 OpenSilver 的遷移，而且在多樣環(huán)境中保持了一致的架構，為現(xiàn)代 XAML 開發(fā)提供了一種經(jīng)過優(yōu)化的方法。
4. 結論
這次 OpenSilver 遷移證實了 WPF 的技術優(yōu)勢可以忠實地在網(wǎng)頁環(huán)境中實現(xiàn)。尤其令人印象深刻的是，現(xiàn)有的 WPF 開發(fā)體驗可以自然地擴展到網(wǎng)頁上，這有望為 XAML 開發(fā)者開辟新的可能性。
Jaewung Lee
來自韓國的微軟 MVP Jaewung 專注于將 WPF、Uno Platform、WinUI 3、UWP 和 OpenSilver 等多種基于 XAML 的平臺統(tǒng)一到一個框架中。作為 OpenSilver 的倡導者，他提出了將 WPF 技術擴展到網(wǎng)頁環(huán)境的創(chuàng)新方法。
Yang Qu
來自中國的微軟 MVP Yang 是一位專注于 WPF 的開發(fā)者，她成功展示了英雄聯(lián)盟 WPF 版本向 OpenSilver 的遷移。她還通過各種渠道積極活動和提供 WPF 技術相關教程。
浙公網(wǎng)安備 33010602011771號