Implementing the League of Legends Client with WinUI 3: A Quick Transition from Uno Platform and Repository Introduction #10148
jamesnet214
started this conversation in
Show and tell
Replies: 0 comments
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
-
Originally published at jamesnet.dev
In this article, we will introduce how we transitioned our League of Legends client, previously developed using WPF and Uno Platform, to WinUI 3. We will focus on the reasons and the process that allowed us to make this transition from Uno Platform to WinUI 3 in just 30 minutes.
Introduction
Hello, I'm Jaewung Lee. I am active as a Microsoft MVP (Windows Development) and have deep interest and experience in XAML-based frameworks and project architecture design, starting with WPF and including Uno Platform. You can check out various projects on my GitHub:
Table of Contents
1. Background for Creating the WinUI 3 Repository
Our League of Legends client, based on Uno Platform and WPF, was initially implemented using WPF several years ago. Recently, we felt the need for cross-platform development and considered desktop cross-platform solutions that could most effectively utilize WPF technology. We chose Uno Platform to create a new League of Legends client. In this process, we built the core of the XAML-based framework and project architecture with .NET Standard 2.0, maintaining the same project structure in both WPF and Uno Platform.
Furthermore, we did not stop there and attempted to transition to WinUI 3 to prove that we could develop the same project architecture on more platforms. This choice was very strategic and effective, and it took less than 30 minutes to transition from Uno Platform to WinUI 3.
2. Why We Chose Uno Platform as the Basis Instead of WPF
Uno Platform Desktop and WinUI 3 use the same core libraries, such as
Microsoft.UI.Xaml.dll. This means that both platforms share the same libraries and namespaces, resulting in very high code compatibility and reusability.Both platforms are based on the
Microsoft.*namespace, and particularly,Microsoft.UI.Xamlis a core element for UI composition. Due to these commonalities, it is possible to reuse 100% of the source code, and platform transitions can be made without changing namespaces or modifying code.Thanks to these characteristics, transitioning from Uno Platform to WinUI 3 is very easy, significantly reducing development time and effort.
3. The Relationship Between WPF and WinUI 3
WPF is based on its own core libraries such as
PresentationCore.dll,PresentationFramework.dll,System.Xaml.dll, andWindowsBase.dll. Therefore, it uses fundamentally different libraries and namespaces compared to WinUI 3.WPF uses the
System.Windows.*namespace, while WinUI 3 uses theMicrosoft.UI.Xamlnamespace. There are also minor syntactic differences, such as theSourcepath syntax inResourceDictionary. For these reasons, transitioning from WPF to WinUI 3 takes a bit more time.However, since the project architecture itself uses the same XAML-based framework based on .NET Standard 2.0, there are no differences in the overall structure or design except for minor syntactic differences. Therefore, the League of Legends client created through the three platforms—Uno Platform, WPF, and the newly released WinUI 3—is expected to be a significant repository for technological expansion and transition between platforms.
4. The Process of Transitioning to WinUI 3 in 30 Minutes
4.1 Project Copy and Setup
The transition to WinUI 3 was carried out by creating a new WinUI 3 project and then copying and pasting all matching folders and files from the Uno Platform project.
4.2 Creating a WinUI 3 Project
In Visual Studio, create a new project using the WinUI 3 Desktop Application template. Setting the project name and namespace the same as the Uno Platform project makes subsequent work smoother.
4.3 Copying Files
Copy the common folders and files such as
Views,ViewModels, andModelsfrom the Uno Platform project into the WinUI 3 project. Keep the folder structure the same to maintain consistency in the project structure.4.4 Modifying App.xaml and App.xaml.cs
Modify
App.xamland its code-behind fileApp.xaml.cs, which are the entry points of the application, to suit WinUI 3. This part is usually set automatically when the project is created, but you can apply additional resources or settings as needed.4.5 Checking Resource and Image Paths
Check whether the resource files or image paths are correctly set, and modify them if necessary. Be particularly cautious as the path structure may differ.
Through these processes, we were able to build and run the WinUI 3 project without modifying the code.
5. Introduction to the League of Legends Repository
The League of Legends application running on each platform—WinUI 3, Uno Platform, and WPF—is expressed and operates identically based on XAML. With WPF running on Windows 7 or later, WinUI 3 on Windows 10 or later, and the ability to distribute applications to the Microsoft Store, and through Uno Platform enabling operation on all major current desktop environments including Windows, macOS, and Linux, XAML-based applications can run across diverse environments.
League of Legends client based on XAML that operates identically in various environments
By downloading the repositories of Uno Platform, WPF, and WinUI 3 from GitHub, you can directly explore the differences and features of each platform.
5.1 Repository List
5.2 How to Utilize the Repositories
Each repository shares the same project architecture and code, so developers can clone and utilize the project for the platform they want. This allows for a consistent development experience across various platforms.
6. Overall Evaluation and Future Direction
In this article, we emphasized that it is possible to develop the same application across various platforms through a single framework and project architecture. In particular, we confirmed that transitioning to WinUI 3 can be carried out very effectively and quickly because the source code of Uno Platform and WinUI 3 is almost perfectly identical. This also means that we can effectively carry out technological transitions and expansions to cross-platforms like Uno Platform not only in WPF but also in WinUI 3 platforms in the future.
We aim to continue sharing development experiences in various platforms, including Uno Platform, based on XAML technology derived from WPF, and to grow together with the community. We ask for your interest and participation.
References
Main Repositories
Main Channels
WPF Tutorials (Custom Control)
Seminars and Lectures
Thank you.
Beta Was this translation helpful? Give feedback.
All reactions